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.584 ]

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

Inkscape - Introdução (parte 1)

APTonCD - Seu repositório portátil

Programação: Uso de funções

Usando variáveis de ambiente

Inkscape - Introdução (parte 2)

Leitura recomendada

Ferramentas úteis para diagnóstico da rede

Certificação Digital no Linux - Apache2

Texto puro - BitTorrent

OpenGoo - Seu escritório nas nuvens Online-Ontime-Fulltime

Autenticando Documento com Blockchain e Ethereum

  
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