quarta-feira, 24 de janeiro de 2007

Implementando um layout mais limpo e sem tabelas

Este assunto não é muito novo, mas acho que vale a pena falar algo aqui sobre este assunto. Há um tempo atrás era uma obrigação usar e abusar de tabelas para conseguir fazer um layout de várias colunas dentro do site.

Hoje em dia há uma nova forma de construir layout: tableless. Quem é/era acostumado a construir layouts com tabelas sabe como é chato e trabalhoso trabalhar com tabelas para layout. E ainda tem outro problema: quando temos que mexer no layout nós temos um sério problema se usamos tabelas. Principalmente na relação designer/programador (hehe).

Agora com divs e CSS nós conseguimos construir estes layouts de forma muito mais fácil e prática. Com um pequeno código html vou mostrar como fazer um layout padrão de site com 3 colunas somente usando div.

código 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>
<title>Layout de colunas sem tabelas</title>

<style type="text/css">
#cabecalho {
clear: both;
height: 50px;
background: #eaeaea;
margin-bottom: 5px;
}

#esquerda {
float: left;
width: 120px;
height: 300px;
background: #eaeaea;
}

#direita {
float: right;
width: 120px;
height: 300px;
background: #eaeaea;
}

#conteudo {
margin-left: 130px;
margin-right: 130px;
height: 300px;
}

#rodape {
clear: both;
height: 20px;
background: #eaeaea;
margin-top: 5px;
}

</style>

</head>


<body>

<div id="cabecalho">
Cabeçalho
</div>

<div id="esquerda">
Esquerda
</div>

<div id="direita">
Direita
</div>

<div id="conteudo">
Conteúdo
</div>

<div id="rodape">
rodapé
</div>

</body>

</html>


o resultado fica assim:



Cabeçalho


Esquerda


Direita


Conteúdo


Rodapé



Os tamanhos foram reduzidos para caber aqui mas as propriedades são as mesmas.

Agora vamos estudar os estilos css dos elementos acima:

float: indica onde a camada vai 'flutuar' de acordo com o próximo elemento - possui como opções left, right e none.

clear: indica que esta camada não vai permitir flutuações na posição especificada - possui como opções left, right e both.

A regra deste layout é que a ordem das colunas deve ser sempre esta: primeiro coluna da esquerda, depois coluna da direita e por último a coluna do meio.

Nas colunas da esquerda e da direita definimos uma largura de 120px, cada uma com seu respectivo float. Na div do conteúdo definimos as margens esquerda e direita como 130px. Isso é para fazer com que o texto do conteúdo sempre fique dentro destes limites, mesmo que as colunas laterais já tenham acabado.

O cabeçalho e o rodapé possuem a propriedade clear: both para não serem afetados pela flutuação das camadas. A margem inferior do cabeçalho e inferior do rodapé são apenas para manter um espaço entre os elementos.

Quem quiser aprender mais sobre tableless, há um ótimo site brasileiro sobre o assunto, inclusive com vídeo aulas: www.tableless.com.br.

Então é isso. Agora nós já podemos construir layouts de forma mais simples e que permita alteração mais facilmente. Tabelas agora serão somente para o que elas servem: dados tabulares. Até mais.

Um comentário:

  1. mto bom esse tutorial, melhor ainda o site sugerido! valeu

    ResponderExcluir

 
BlogBlogs.Com.Br