Alinhamento em folhas de estilo - CSS

Veremos como melhorar o posicionamento dos elementos de uma página web e também como fazer objetos "flutuarem" na página.

[ Hits: 16.316 ]

Por: Juliao Junior em 10/05/2010


Faça os elementos flutuarem



Aqui temos mais uma tradução livre do ótimo material encontrado na W3Schools. Iremos direto ao assunto, sem rodeios, pois já temos uma boa introdução nos artigos anteriores. Portanto, se precisar, leia tais artigos nos links abaixo:

Float

Usando esta opção de configuração de CSS, o Float, um elemento pode ser "jogado" para a esquerda ou para a direita. Daí, os demais elementos irão fluir em torno dele. O Float é muito usado para imagens, mas também é útil quando pensamos sobre layouts.

Podemos fazer os elementos "flutuarem" horizontalmente. Ou seja, um elemento só pode ser "jogado" para a esquerda ou para a direita, nunca para cima ou para baixo. Um elemento "flutuante" irá o máximo possível para a esquerda ou para a direita. Geralmente isso significa que irá para a extremidade horizontal da página.

Os elementos que estiverem depois do elemento flutuante fluirão ao redor dele. Os elementos que estiverem antes do elemento flutuante não serão afetados.

Se uma imagem é "jogada" para a direita, o texto que vem em sequência flui em torno dela, à esquerda (e vice-versa).

Um exemplo simples:

img
{
float: right;
}

Também é possível fazer vários elementos flutuarem um ao lado do outro. Isto ocorrerá se houver espaço suficiente na página. Basta usar a propriedade "Float" para os vários elementos. Por exemplo, usando a configuração mostrada abaixo teremos uma galeria de imagens:

.figuras
{
float: right;
width: 200px;
height:; 150px
margin: 4px;
}

É possível eliminar o fluxo ao redor de um elemento. Traduzindo: talvez você não deseje que os elementos depois do elemento flutuante fluam em torno dela. Para evitar isso, use a propriedade clear. Tal propriedade indica quais os lados de um determinado elemento não são permitidos para outros elementos flutuantes.

Como exemplo, vamos adicionar uma linha de texto para a galeria de imagens que usamos acima. Para isso, usamos a propriedade "clear":

.text_line
{
clear: both;
}

    Próxima página

Páginas do artigo
   1. Faça os elementos flutuarem
   2. Alinhamento em CSS
Outros artigos deste autor

Explorando a máquina sem abrí-la

Emacs - Poderoso ambiente de trabalho

Crie um espelho (mirror) Debian em sua máquina

Octave - Programação científica no Linux

Inkscape - Introdução (Parte 3)

Leitura recomendada

Fazendo um site completo rapidinho com Joomla

Navegando anônimo na internet

Implementação de VPN com OpenVPN

Enjaulando o Bind9 em um chroot

Configurando modem MF622 no Linux com velocidade superior a 512K

  
Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts