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

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

APT - Fantástico gerenciador de pacotes

Processing - Interagindo com o usuário

Finnix - Ótima distro para manutenção de sistemas

Explorando a máquina sem abrí-la

Guia (nem tanto) Introdutório do Linux II

Leitura recomendada

Wireless no Slackware com ndiswrapper (placa PCMCIA SMC)

Pure-ftpd: Servidor de FTP com MySQL, quota e usuários virtuais

Roteando duas sub-redes com servidores

Sistema de backup com rsyncd

Blockmail: um filtro de anexos de e-mail

  
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