Construindo um layout com 3 colunas usando CSS - parte 1
Monday, October 23rd, 2006Um bom desafio nos sites tableless é desenvolvermos uma estrutura de código que se comporte de forma semelhante aos layouts escritos com tabelas. Isso porque uma tabela é uma estrutura fechada - quando alguma célula que a compõe aumenta de tamanho, todas as células adjacentes também aumentam. Esse comportamento traz alguns benefÃcios como, por exemplo, mantermos a cor de fundo das colunas mesmo que a altura de uma delas mude. Veja o exemplo abaixo:
<html>
<head>
<title></title>
</head>
<body>
<table border=”0″ cellpadding=”2″ cellspacing=”1″ align=”center”>
<tr>
<td width=”120″ align=”center” bgcolor=”#cccccc”>coluna da esquerda</td>
<td width=”530″ align=”center”>coluna principal</td>
<td width=”120″ align=”center” bgcolor=”#fedc67″>coluna da direita</td>
</tr>
</table>
</body>
</html>
Para ver o resultado, cole o código em algum editor de textos como o notepad e salve o arquivo com a extensão .html. Depois basta abrir o arquivo no navegador. Agora o melhor a fazer para entender o que acontece com a tabela é abrir o html e colocar mais texto na coluna principal. Vocês irão notar que ambas colunas laterais irão aumentar junto com a principal e o mais importante, as cores de fundo se manterão independentemente da altura da coluna principal.
Nosso objetivo é montarmos uma estrutura sem tabelas que tenha exatamente o mesmo comportamento. Esse modelo é extremamente útil pois acaba servindo de alicerce para a construção de sites que tenham três colunas. Escolhi três colunas porque importantes sites brasileiros usam essa distribuição e, a partir dela, é possÃvel fazer inúmeras variações que acabam se encaixando praticamente em quase todos os sites existentes por aÃ.
Para começar, vamos escrever a estrutura sem o uso de tabelas e colocar algum estilo:
<html>
<head>
<title></title>
</head>
<style>
#col_esq, #col_dir {
width:120px;
}
#col_esq {
background:#cccccc;
}
#col_dir {
background:#fedc67;
}
#col_pri {
width:530px;
}
</style>
<body>
<div id=”moldura”>
<div id=”col_esq”>coluna da esquerda</div>
<div id=”col_pri”>coluna principal</div>
<div id=”col_dir”>coluna da direita</div>
</div>
</body>
</html>
Depois que você fizer um html com o código acima, verá que o que aparece está muito longe do layout feito com a tabela. Apenas para comentar sobre as medidas, a idéia é termos as colunas laterais com 120 pixels de largura e a principal com 530 pixels somando 770 pixels, que é uma boa medida para fazermos um site que se encaixe bem para os que usam a resolução da tela em 800×600. Além das medidas, também vamos querer que tudo fique alinhado ao centro exatamente como aconteceu com a tabela.
No próximo post começaremos a posicionar as colunas corretamente, mexendo também nas suas medidas para termos respiros internos, bordas e margens configuradas. Caso alguém já evolua deste ponto, pode me enviar por e-mail que compartilharei aqui com todos.
Até a próxima!
