May Sat 03

Tutorial Básico - Centralizar um website na página

Publicado por Bernard De Luna em tutorial, web

  • delicious
  • Digg
  • Technorati
  • Feed rss

Muitas pessoas tem essa dúvida, alguns apenas recorrem a tabelas por não conseguir implantar isso via xhtml e css. Vejam como é básico o processo:

vamos fazer uma estrutura simples de um website:

<html>
<head>
</head>
<body>
<div class="geral">
Meu site vem todo aqui dentro
</div>
</body>
</html>

Simples. Se colocarmos para visualizar, notaremos que o código aparece no canto OCIDENTAL da tela (superior, esquerda)

agora vamos colocar isso no css ou dentro do style que fica no head, assim ó:

<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div class="geral">
Meu site vem todo aqui dentro
</div>
</body>

</html>

Coloque dentro do style esse código abaixo, repare nos comentários

body {
/* alinhando tudo ao centro, alguns navegadores alinham não só o texto como objetos também ao centro */
text-align: center;
/* diz que a margem superior e inferior é zero e que a margem lateral será automaticamente dividida pelo espaço que tiver a tela, independente da resolução do pc do usuário */
margin: 0 auto;
}
div.geral {
/* não queremos que o texto do nosso site seja todo alinhado ao centro, então colocamos left para dizer que a partir da div com class geral, tudo é alinhado a esquerda */
text-align: left;
/* largura que você quiser para a div */
width: 300px;
/* coloquei um fundo só para ficar perceptível a diferença */
background: red;
}

Prontinho, seu site está agora centralizado e sem usar tabelas, da maneira mais correta.

, , , , ,

Dê um trackback   Comente()

Escrever Comentários

Compartilhe seu conhecimento e opinião e ajude a tornar este artigo melhor. Alguns códigos em html são permitidos.

Ler Comentários

Número:
1
Escrito por:
elis
Postado por:
June 23, 2008 at 12:04 pm

Obrigada pelas dicas da div com css… eu sou péssima em css, alias nem me atrevo mto a mexer com isso ai não.rsrs… Mas pelo que você mostrou (e eu testei), não é dificil não. Valeu mesmo!