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

Por: Juliao Junior em 10/05/2010


Alinhamento em CSS



Um elemento "bloco" é um elemento que ocupa a largura total disponível na janela, e tem uma quebra de linha antes e depois dele. Alguns exemplos de elementos de bloco são <h1>, <p> e <div>. Já vimos, em artigos anteriores, como alinhar textos. Agora vamos ver como alinhar os elementos bloco, melhorando o layout das páginas.

Os elementos bloco podem ser alinhados usando a configuração de margens esquerda e direita. Basta configurar para "auto". Definindo as margens esquerda e direita para "auto" vamos dividir a margem disponível de forma igual. O resultado é um elemento centrado. Veja um exemplo:

.center
{
margin-left:auto;
margin-right:auto;
width:85%;
}

Um outro método é alinhar os elementos usando posicionamento absoluto. Isto também já foi visto em artigos anteriores. Veja um exemplo:

.right
{
position:absolute;
right:15px;
width:250px;
}

Um terceiro método, e bem óbvio, é usar a propriedade vista na página anterior... o "float". Veja um exemplo bem auto-explicativo:

.right
{
float:right;
width:250px;
}

Aqui, cabe um pequeno aviso: tais configurações nem sempre são bem compreendidas por todos os navegadores web. Portanto, é extremamente aconselhável testar suas configurações num bom número de navegadores. Afinal, hoje temos o prazer da liberdade com vários navegadores. No entanto, o número não é tão grande a ponto de impossibilitar um pequeno teste de compatibilidade.

Vamos em frente. Muita coisa ainda pode ser vista em CSS. No próximo artigo veremos exemplos práticos: como construir uma barra de navegação para páginas web, como construir uma galeria de imagens, entre alguns outros exemplos bem úteis.

Até o próximo artigo!

Página anterior    

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

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

Guia introdutório do Linux IV

Grace - Usando a função "Regression"

Guia Introdutório do Linux

APTonCD - Seu repositório portátil

Leitura recomendada

Provedor de Internet com BrazilFW - BFW

Conectando computadores Linux e Windows através de "rede local via internet"

Canal IRC #vivaolinux na rede irc.freenode.net

Emuladores para seu sistema operacional

Balanceamento de carga e alta disponibilidade com Bonding Driver e Iproute2

  
Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts