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: