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: 15.145 ]

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

Introdução ao Linux: O editor de texto Nano

Administração de sistema via WEB

Grace - Alterando e gerando gráficos usando "fitting"

Convertendo formatos de vídeo/áudio

CSS - Manual básico sobre estilo

Leitura recomendada

Configurando roteador Linux com Velox

Avaliando as dicas de segurança do Banco do Brasil

Certificação Digital no Linux - Apache2

Instalando o MSN-Proxy 0.7 no OpenSuSE 11.1 Linux

Instalar, configurar e navegar com softmodem no Slackware

  
Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário