Arquivos de Tag: Tableless

Centralizar uma página na tela

Nesta dica vou mostrar como centrar uma página na tela, independente da resolução ou tamanho do monitor usado pelo visitante. O "truque" consiste em englobar todo o documento dentro de uma div e estilizá-la com umas regras CSS bem simples. Em geral, uma página centralizada na tela é dimensionada para uma largura que se acomode numa tela com resolução de 800 x 600 px. Vamos então admitir esta hipótese de largura 800px para nossa página. A largura total da div que engloba a página toda a qual chamaremos #tudo será adotada igual a 760px ( este valor é bastante cômodo, para garantir que em nenhum browser apareça uma barra de rolagem horizontal em 800 x 600 de resolução. Se você costuma projetar com valores diferentes use-o, mas certifique-se da eliminação da rolagem horizontal em 800 x 600). Então estamos acertados em uma largura de 760px. Se você simplesmente definir esta largura para a div ela será colocada no canto esquerdo da tela! A propriedade CSS margin faz o "truque". Basta definirmos que as margens esquerda e direita serão automáticas, pois CSS prevê o valor auto para as margens. É assim: CSS dimensiona a div com a largura especificada e coloca margens esquerda e direita IGUAIS. Se a tela tem largura de 1024px, CSS calcula 1024px - 760px = 264px e coloca margens laterais de 264px / 2 = 132px CENTRANDO A PÁGINA qualquer que seja a resolução. MAS QUE DROGA! O Internet Explorer interpreta errado a regra como ela foi mostrada acima. Ela funciona e centraliza a página em todos os brownsers, menos no IE :-( Devemos então usar um artifício (hack) para fazer funcionar no IE. Basta declarar text-align:center; no elemento body da página e isto resolve, mas cria outro problema. Além de centralizar no IE coloca os textos também centralizados na página. E, para corrigir isto declaramos na #tudo, text-align:left; UFA! obrigado ao IE pelos seus "bugs" para as CSS. Na parte codigo esta o codigo completo para você copiar e colar no seu editor e fazer mudanças para entender como colocar uma página centrada na tela. Bons Estudos! Leia Mais »