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

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

Guia (nem tanto) Introdutório do Linux

Por que os GAMES não são a chave para o Linux em desktops

Octave - Programação científica no Linux

Inkscape - Introdução (parte 2)

APTonCD - Seu repositório portátil

Leitura recomendada

Ferramentas úteis para diagnóstico da rede

Ubuntu Server 12.04 LTS - Como Servidor Gateway e DHCP

BOINC - Computação distribuída e aplicações científicas

Passando pelo Firewall

Instalação do Apache 2 no OpenSuSE 10.2

  
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