Scribd Logo
Unggah

Selamat datang di Scribd!

  • Centralizar Uma Página Na Tela

    Diunggah oleh

    Sérgio Santos
    8 tayangan2 halaman
    Centralizar

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Centralizar

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    8 tayangan2 halaman

    Centralizar Uma Página Na Tela

    Diunggah oleh

    Sérgio Santos
    Centralizar

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 2

    :: Centralizar uma pgina na tela ::

    Introduo
    Nesta dica vou mostrar como centrar uma pgina na tela, independente da resoluo 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 pgina centralizada na tela dimensionada para uma largura que se
    acomode numa tela com resoluo de 800 x 600 px. Vamos ento admitir esta hiptese
    de largura 800px para nossa pgina.
    A largura total da div que engloba a pgina toda a qual chamaremos #tudo ser adotada
    igual a 760px ( este valor bastante cmodo, para garantir que em nenhum brownser
    aparea uma barra de rolagem horizontal em 800 x 600 de resoluo. Se voc costuma
    projetar com valores diferentes use-o, mas certifique-se da eliminao da rolagem
    horizontal em 800 x 600).
    Ento 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 sero automticas, 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 PGINA qualquer
    que seja a resoluo.
    MAS QUE DROGA! O Internet Explorer interpreta errado a regra como ela foi
    mostrada acima. Ela funciona e centraliza a pgina em todos os brownsers, menos no IE
    :-(
    Devemos ento usar um artifcio (hack) para fazer funcionar no IE. Basta declarar
    text-align:center; no elemento body da pgina e isto resolve, mas cria outro
    problema. Alm de centralizar no IE coloca os textos tambm centralizados na pgina.
    E, para corrigir isto declaramos na #tudo, text-align:left; UFA! obrigado ao IE
    pelos seus "bugs" para as CSS
    E, a seguir o cdigo completo para voc copiar e colar no seu editor e fazer mudanas
    para entender como colocar uma pgina centrada na tela.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN">
    <html>
    <head>
    <title>Centrar uma pgina 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; /* "remdio" 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> No use nenhum elemento HTML
    (figuras, tabelas, etc...) com largura
    superior a 750px.</p>
    </div>
    </div>
    </body>
    </html>

    [Topo da Pgina]
    Criado em: 2004-04-04
    Atualizado em: 2005-04-04

    Anda mungkin juga menyukai