20 de setembro de 2007

Centralizando sua página por CSS

Bom vou explicar pra vocês como podemos deixar uma página centralizada independente do tamanho ou resolução do monitor.

A primeira dica é deixar tudo dentro de uma 'DIV'.
é muito comum utilizar a resolução 800x600, mas mesmo assim gosto de utilizar 760x600, porque assim não teremos uma barra de rolagem na horizontal.

Temos um grande problema, quando colocamos a 'margin: 0px' no CSS, ele apenas interpreta isso no Firefox, mas ai vem uma dica, que é por o 'texto centralizado' no 'body', isso resolve o alinhamento do IE6.

Ai surge um outro problema hehehe, todos os texto ficam centralizado!
é ai que vem outra dica. Que é por o texto alinhado a esquerda na sua DIV master.
vamos para o código...

No seu CSS ficaria assim:

>CODE <<>


<style type="text/css">
    body{
        margin: 0;
        padding: 0;
        text-align:center;
/* hack para deixar a página centralizada no IE6 */
    }

    #master{
        width: 760px;
        margin: 0 auto;
/* hack para deixa o Firefox centralizado */
        padding: 15px;
        text-align:left;
/* hack para deixar o texto normal no IE6 */
    }
</style>



No seu HTML ficaria assim:

>CODE <<>


<div id="master">Seu conteudo aqui</div>


Até mais pessoal!

Nenhum comentário: