EDUCAÇÃO / TECNOLOGIA / UTILIDADE PÚBLICA

Layout tabelas e layout centralizado na página

Definição de um layout sem o uso de tabelas usando o conceito de box model e tableless

Veremos como criar um layout baseado no padrão tableless (sem tabelas).

[QUEBRA]

Primeiro temos que estruturar a página, ou seja, criar o HTML. Esta etapa é tão importante quanto a formatação, pois é necessário um breve planejamento para termos uma idéia inicial do que será feito. Veja o esboço abaixo:

 

  TOPO

 MENU

 

 

 

 

CONTEÚDO 

 

 

 

 

  RODAPÉ

No exemplo acima estamos propondo criar um layout com um cabeçalho, um menu a esquerda,  uma área de conteúdo e um rodapé.

Este modelo poderia ser facilmente reproduzido com o uso de uma tabela, porém, tabelas são para dados tabulares.

Vamos ao HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout com css</title>
<link href="estilo_layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site">
  <div id="topo">Topo</div>
  <div id="menu">Menu</div>
  <div id="conteudo">Conteudo</div>
  <div id="rodape">Rodape</div>
</div>
</body>
</html>

Na estrutura acima foram criados 5 tags <div>, uma principal site e dentro dela outras 4 <div> topo, menu,conteudo e rodape. a posição que elas foram colocadas também é importante, veremos abaixo.

Formatação do layout

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 margin: 0px;
}
#site {
 width: 780px;
 margin: 0px auto;
}
#topo {
 background-color: #FF9933;
 height: 80px;
}
#menu{
    padding: 10px;
    width: 210px;
    background-color: #BDBD9B;
}
#conteudo{
    padding: 10px;
    width: 520px;
    background-color: #E7E7DA;
}
#rodape {
 background-color: #ffb03b;
 height: 30px;
}

Para endender melhor as regras de formatação, veja o post Box model: padding, borda e espaçamento em CSS.

Analisando o código acima:

#site: formatação da div principal. Aqui são definidas duas propriedades importantes.

  • width: 780px define que a largura da div será fixa e terá 780px, como esta div é a principal, significa que o site todo terá 780px.
  • margin: 0px auto define que o layout será centralizado na página, pois estamos definindo auto como margens esquerda e direita, desta forma o browser irá calcular a largura da tela, subtrair a largura de 780 e o restante irá aplicar em margens de largura automática.

#topo: formatação da div que terá o cabeçalho.

  • background-color: #FF9933;  - cor do fundo da div
  • height: 80px; - altura da div

#menu: formatação da div que fará o menu lateral do site.

  • padding: 10px;  - espaçamento interno da div de 10px
  • width: 210px;  - aqui temos uma importante estratégia para o nosso layout, ou seja, definimos a largura do div em 210px
  • background-color: #BDBD9B; - cor do fundo da div

#conteudo: formatação da div de conteúdo

  • padding: 10px;  - espaçamento interno da div de 10px
  • width: 520px;  - aqui temos uma importante estratégia para o nosso layout, ou seja, definimos a largura do div em 520px
  • background-color: #E7E7DA; - cor do fundo da div

#rodape: formatação da div que fará o rodapé do site.

  • background-color: #ffb03b; - cor de fundo da div
  • height: 30px; - altura da div
     

Onde deve ser colocado o CSS? Veja o post: Tipos de CSS: Inline, incorporado e Linkado.

Nosso layout está formatado, mas ainda não está pronto. Perceba que o menu está acima do conteúdo, enquanto que eles deveriam estar lado a lado.

Duas alterações serão necessárias para ocorra:

No #menu incluiremos a propriedade float:left e no #conteudo float: right. Isto fará com que o menu flutue para a esquerda e o conteúdo para a direita, tornando possível a exibição lado a lado.

Uma terceira alteração deverá ser feita no #rodape, pois como as divs acima dele estarão flutuando é necessário informar que ele não flutuará para lado nenhum, por isto incluiremos o clear:both

Veja abaixo o arquivo CSS com as novas formatações:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 margin: 0px;
}
#site {
 width: 780px;
 margin: 0px auto;
}
#topo {
 background-color: #FF9933;
 height: 80px;
}
#menu{
    padding: 10px;
    width: 210px;
    float: left;
    background-color: #BDBD9B;
}
#conteudo{
    padding: 10px;
    width: 520px;
    float: right;
    background-color: #E7E7DA;
}
#rodape {
 background-color: #ffb03b;
 height: 30px;
 clear: both;
}

Clique aqui para ver o resultado da página com a formatação acima aplicada

Agora sim. Funcionou conforme o planejado, mas vamos entender melhor o que foi feito? Primeiro um pouco de matemática.

A div menu tem 210px e a conteudo 520px, logo, 210 + 520 = 730px. Mas a largura do nosso site não é 780px?

Sim. Acontece que tanto no menu como no conteudo temos a propriedade padding: 10px, isto para com que seja adicionado 10 na margem interna direita e esquerda de cada div, com isto agora temos:

#menu: 10 + 210 + 10 = 230

#conteudo: 10 + 520 + 10 = 540

230 + 540 = 770px. Mas não é 780 o nosso layout? Sim. Perceba que entre o menu e conteúdo a um espaço de exatamente 10px que foi uma margem que deixamos apenas para mostrar esses cálculos.

Mas ainda há um problema em nosso layout. Vamos editar o código HTML e inserir um pouco de conteúdo para ver o que acontece.

Mas ainda há um problema em nosso layout. Vamos editar o código HTML e inserir um pouco de conteúdo para ver o que acontece.

Clique aqui para ver o resultado da página após o conteúdo ser inserido

Perceba que na medida em que o conteúdo foi inserido, a div conteúdo fluiu verticalmente para acomodar o texto, mas o mesmo não aconteceu com o menu que ficou inerte.

Para resolver este problema teremos de fazer algumas mudanças em nosso código CSS, primeiro vamos tirar a cor de fundo do #menu e #conteudo e em seguida iremos colocar uma imagem de fundo no #site. Como #menu e #conteudo não terão mais a cor de fundo, vai prevalecer o que colocarmos em #site.

Veja a imagem que iremos colocar como fundo de #site:

Esta imagem tem exatamente 780px de largura e primeira parte dela (cor mais forte) tem 230px de largura, exatamente a mesma largura do menu.

Agora o que precisamos é da propriedade repeat para mandar repetir verticalmente esta imagem no fundo da tag #site.

Veja como ficou nosso CSS após as modificações:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 margin: 0px;
}
#site {
 width: 780px;
 margin: 0px auto;
 background-image: url(fundo_site.jpg);
 background-repeat: repeat-y;
}
#topo {
 background-color: #FF9933;
 height: 80px;
}
#menu {
 padding: 10px;
 width: 210px;
 float: left;
}
#conteudo {
 padding: 10px;
 width: 520px;
 float: right;
}
#rodape {
 background-color: #ffb03b;
 height: 30px;
 clear: both;
}

As alterações feitas foram:

  • background-image: url(fundo_site.jpg); - colocamos uma imagem de fundo
  • background-repeat: repeat-y; - Aqui a imagem está sendo repetida no sentido y, ou seja, verticalmente.

Clique aqui para ver o nosso layout pronto



 

Veja também

Comentários

Artigo muito bom para quem está iniciando no assunto vlw Robson // schroeder
Nó! Valeuuu demais! Me ajudou total! Muito bom! Alan Lima // Belo Horizonte / MG
Primeiro obrigado pelo tutorial, to aprendendo a fazer o layout e tfoi muito bom, agora eu meidfiquei seu modelo e coloquei uma coluna central com uma a direita e uma a esquerda. Ai o conteudo ficou dessarumado. isaias // vitoria da conquista
Muito bom! Sonia // Diadema
valew cara oseu material é muioto bom ... para quem esta começando como eu é muito 10... L uo Maia // Macapá-AP
FIZ TUDO IGUALZINHO...MEU HTML ESTÁ COMO VC DESCREVEU E MEU RODAPÉ NÃO CENTRALIZA A IMAGEM... O QUE FAÇO? http://pensamentos-soltos-da-erica.blogspot.com/ ERICA VALENTE // BELÉM
© 2008-2017 | LUIS.BLOG.BR | Política de Privacidade | Em Jesus Cristo eu confio