Bem vindo ao PROJECT-HTML
Aprenda mais sobre:
HTML, CSS, JavaScript, webmaster, Imagens, banners, wallpapers, videos aula, windows, utilitários para site/blogs, Jogos, animes e muito mais.
Basta se registrar!



 
InícioProject HTMLGaleriaFAQRegistrar-seConectar-se
Buscar
 
 

Resultados por:
 
Rechercher Busca avançada
Conectar-se
Nome de usuário:
Senha:
Conexão automática: 
:: Esqueci minha senha
Votação
Qual seu navegador favorito?
 FireFox
 Chrome
 Internet Explorer
 safari
 Netscape
 Opera
 Avant
Exibir resultados
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 36 em 3/4/2016, 3:36 am
Últimos assuntos
» TAG´s (comandos)
4/8/2014, 10:15 am por robson

» Comandos básico de HTML - body (corpo da home page)
16/7/2014, 10:10 am por robson

» Apresentações aqui
15/7/2014, 4:14 pm por robson

» Como colocar "posts recomendados" no sou blog sou site.
24/3/2014, 8:05 pm por Otome

» Arquivo de ajuda sobre PHP, help para iniciantes e experientes
24/3/2014, 8:03 pm por Otome

» Imagens Exercício-6
22/3/2014, 5:19 pm por SY64

» Alinhamento de imagens
22/3/2014, 4:43 pm por SY64

» Link´s Exercicios-5
22/3/2014, 12:43 pm por SY64

» Criar um site passo a passo
1/8/2013, 4:41 pm por marlonsouzajs


Compartilhe | 
 

 Flutuando elementos (floats)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 25
Localização : Aqui no PROJECT-HTML
Pontos : 5491
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Flutuando elementos (floats)   12/9/2010, 1:36 am

Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade float. Isto significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco container) (ver lição do Box model). A figura a seguir ilustra o princípio de float:

[Você precisa estar registrado e conectado para ver esta imagem.]

Se desejamos que um texto seja posicionado em volta de uma figura como mostrado abaixo, basta flutuarmos a imagem:

[Você precisa estar registrado e conectado para ver esta imagem.]

Como isto é feito ?
O HTML para o exemplo acima é mostrado a seguir:

Código:
<div id="picture">
   <img src="bill.jpg" alt="Bill Gates">
</div>

<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>

Para conseguir o efeito mostrado, basta definir uma largura para o box que o contém e declarar para ele float: left;

Código:
#picture {
   float:left;
   width: 100px;
}

Outro exemplo : colunas
Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as colunas no código HTML usando <div> como mostrado a seguir:
Código:

<div id="column1">
   <p>Haec disserens qua de re agatur
   et in quo causa consistat non videt...</p>
</div>

<div id="column2">
   <p>causas naturales et antecedentes,
   idciro etiam nostrarum voluntatum...</p>
</div>

<div id="column3">
   <p>nam nihil esset in nostra
   potestate si res ita se haberet...</p>
</div>

A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left; para cada uma das colunas:

Código:
#column1 {
   float:left;
   width: 33%;
}

#column2 {
   float:left;
   width: 33%;
}

#column3 {
   float:left;
   width: 33%;
}

float pode ser declarado left, right ou none.

A propriedade clear
A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento.

Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates.

A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear, for por exemplo definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.

Código:
<div id="picture">
   <img src="bill.jpg" alt="Bill Gates">
</div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>

Para evitar que o texto se posicione no espaço livre deixado pela foto do Bill Gates basta adicionar a seguinte regra CSS:

Código:
#picture {
   float:left;
   width: 100px;
}

.floatstop {
   clear:both;
}



_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
 
Flutuando elementos (floats)
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Mudar posição de alguns elementos
» Elementos não recebem propriedades css
» Adicionar elementos ao grupo sem acessar o painel de controle
» [Pedido] Elementos de deserto
» Alguns Brushes Legais

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: CSS - (Cascading Style Sheets) :: CSS - avançado-
Ir para: