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.
mto bom esse tutorial, melhor ainda o site sugerido! valeu
ResponderExcluir