Centralizando Site com CSS

[.Fernando~ 1]

Olá Pessoal

 

Estou trazendo um tutorial de como centralizar o site usando CSS, uma duvida de muita gente!!

pra galera que não faz sites em webstandard, os padrões da web isto é bem fácil, só fazer uma tabela entre as tags <center></center>, porem para a galera que faz sites já nos padrões da W3C esta é uma duvida de muitos.

 

Bom, vamos ao que interessa:

 

Centralizar um site é uma parte essencial de muitos layouts CSS. Embora haja muitas maneiras de fazê-lo em uma variedade de situações, a explicação seguinte que usa puramente o CSS, evita mexer com percentagens, e é compatível com todos os navegadores modernos.

 

Primeiramente vamos usar um "Resetador" de valores.

usando a declaração abaixo, definimos TODOS os elementos do layout com as configurações que queremos.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Usando a declaração acima, com o seletor *(estrela) selecionamos todos os elementos usados no HTML e a declaração "margin:0;padding:0;" fala que o seletor deve ter Margem e espaçamento iguais a 0(zero)

Com isso evitamos muitos, muitos bugs =P

Alem de ficar mais fácil de se mexer no layout

 

Mas nós não queremos isto, queremos centralizar o layout

Observe a img abaixo e veja como será o esquema de demostração

 

 

Nesta imagem temos o elemento body ao fundo, com bg preto

Temos a div #layout (id="layout") com 960px de largura.

 

Para centralizar isto, devemos usar a seguinte declaração CSS

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Nesta declaração, definimos o valor da largura da div#layout em 960px e definimos a margem dele como 0 na vertical e "auto" (automático) na horizontal

E é ai que está a manha, quando definimos tal margem o CSS centraliza o layout na tela do navegador.

 

 

Infelizmente Sempre temos o IE6 para nos preocupar, afinal aproximadamente 50% de toda navegação na internet ainda é feita pelo maldito IE6 (para choro de muitos webdesigners =,( )

Então para o IE6 temos uma declaração adicional, que pode ser feita em um arquivo.css separado dentro de uma declaração de exclusão, a famosa <!--[if IE 6 ]><![endif]-->.

 

Para o Ie6 temos que fazer uma declaração no body e uma declaração adicional no #layout

As declarações são as seguintes:

body{
text-align:center; /*para IE6 =,(*/
}

#layout{
width:960px;
margin:0 auto;
text-align:left; /*para IE6 =,(*/
}

No final de tudo temos a seguinte marcação CSS:
*{
margin:0;
padding:0;
}

body{
text-align:center; /*para IE6 =,(*/
}

#layout{
width:960px;
margin:0 auto;
text-align:left; /*para IE6 =,(*/}

Créditos : Tennch