Layout tabelas e layout centralizado na página
Home » Tecnologia
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).
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
Cadastre seu EMAIL e receba artigos no seu EMAIL
Participe do Simulado de HTML
Veja também:
Compartilhe com seus amigos:
// Comentários
Robson // schroeder // 09/11/2008 12:10:00
Artigo muito bom para quem está iniciando no assunto
vlw
Alan Lima // Belo Horizonte / MG // 23/03/2009 21:55:00
Nó! Valeuuu demais! Me ajudou total!
Muito bom!
isaias // vitoria da conquista // 27/08/2009 20:31:00
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.
Sonia // Diadema // 29/04/2010 16:37:00
L uo Maia // Macapá-AP // 27/08/2010 09:23:00
valew cara oseu material é muioto bom ...
para quem esta começando como eu é muito 10...
ERICA VALENTE // BELÉM // 01/11/2010 21:47:00
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/