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

Por: Cicero Juliao da Silva 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

GRIP - Conversão e ripagem de CDs em Linux

Atualização para o Ubuntu 10.10

Real Football 2012 - Futebol de qualidade no Android

Guia introdutório do Linux IV

Processing - Programando para Android e iOS

Leitura recomendada

Instalando o CMS Joomla

Compartilhamento de Internet via NAT/DHCP (Speedy Home)

Ubuntu Server 12.04 LTS - Como Servidor Gateway e DHCP

Fuja da pirataria, use Last.fm

Solução para conexão Claro 3G no Linux Ubuntu 8.10

  
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