Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Centralizar Uma Página Na Tela

    Enviado por

    Ana Lopes
    3 visualizações2 páginas

    Título original

    Centralizar uma página na tela.doc

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    DOC, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    3 visualizações2 páginas

    Centralizar Uma Página Na Tela

    Enviado por

    Ana Lopes

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 2

    :: Centralizar uma página na tela ::

    Introdução
    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 brownser
    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 760 px. 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

    E, a seguir o código completo para você copiar e colar no seu editor e fazer mudanças
    para entender como colocar uma página centrada na tela.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01


    Transitional//EN">
    <html>
    <head>
    <title>Centrar uma página com CSS</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <head>
    <style type="text/css">
    body {
    margin:0;
    padding:0;
    background:#cccccc;
    text-align:center; /* hack para o IE */
    }
    #tudo {
    width: 760px;
    margin:0 auto;
    padding: 10px;
    text-align:left; /* "remédio" para o hack do IE */
    }
    #conteudo {
    padding: 5px;
    background-color: #eeeeee;
    }
    </style>
    </head>
    <body>
    <div id="tudo">
    <div id="conteudo">
    <h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>
    <p> Não use nenhum elemento HTML
    (figuras, tabelas, etc...) com largura
    superior a 750px.</p>
    </div>
    </div>
    </body>
    </html>

    [Topo da Página]

    Criado em: 2004-04-04


    Atualizado em: 2005-04-04

    Você também pode gostar