W3C

Esta é a tradução do tutorial "Tableless layout HOWTO" de autoria de Dominique Hazaël-Massieux publicado no site do W3C.

1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://www.w3.org/2002/03/csslayout-howto e os seus direitos são conforme:

Copyright ©2002 W3C® (MIT, INRIA, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidade, marcas, uso de documentos e licença de software

2. A única versão oficial deste documento é a versão em língua inglesa que se encontra no sítio do W3C.

3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.

Este documento foi traduzido em 14 de dezembro de 2004 e atualizado em 27 de dezembro de 2004 por: Maurício Samy Silva e encontra-se hospedado no seu sítio "CSS para WebDesign" em http://www.maujor.com/
A traduçao foi feita somente para este documento, vale dizer, as páginas remetidas pelos links aqui indicados, estão em sua versão original em língua inglesa.

Construindo um layout sem tabelas

Sumário e status

Muito já se tem dito e repetido que tabelas não devem ser usadas com a finalidade de construir o layout de uma página web. Este documento mostra uma maneira de se construir um layout de 3 colunas sem tabelas, usando-se somente CSS.

Sugestões e comentários serão muito bem-vindos e sinta-se à vontade para enviá-los a Dominique Hazaël-Massieux. Este documento foi traduzido para as línguas espanhola , francesa e português brasileiro

Introdução

HTML é uma linguagem estrutural, ou seja, é - ou deveria ser - usada para estruturar textos através de tags. A tag table deveria ser usada tão somente com a finalidade de apresentar dados dentro de uma tabela com linhas e colunas.

Mas desde que as tabelas foram implementadas no HTML elas tem sido amplamente usadas para montagem de layouts e muito comumente para compartimentar uma página web em colunas. Ao fato de que este uso das tabelas contraria sua finalidade (seu propósito semântico) soma-se ainda várias outras desvantagens, entre elas notadamente a dificuldade de um parseamento adequado na renderização das tabelas em determinados contextos (usuários com necessidades especiais, agentes de usuários com restrições,....).

Este documento descreve uma maneira de criar um layout de 3 colunas e oferece links para outras páginas que mostram técnicas de criação de layout.

Descrição do layout

A técnica descrita a seguir foi usada para construir a página para novos usuários do W3C ( page for new W3C users ) e permite criar um layout de 3 colunas com as seguintes características:

Isto é ideal para Home Pages já que dispõe o texto no centro e as listas de links (menus de navegação) nas laterais.

Uma restrição para este tipo de layout é que ele não funciona bem em agentes de usuário com suporte precário para CSS, contudo a página permanece perfeitamente legível em um tradicional layout vertical.

Esta página que você está lendo usa este tipo de layout e assim você pode ter uma idéia de como é o layout.

Implementação

the layout is split in 3 parts:
on the left, a HTML division with list1 as id, in the center, a HTML
division with main as id and on the right, a HTML division with list2
as idEste layout usa posicionamento CSS absoluto (CSS absolute positionning). Definimos 3 divisões (DIVs) no HTML da página <div id="main">, <div id="list1" class="link-list">, <div id="list2" class="link-list">, e aplicamos as seguintes regras CSS a elas:

/* Propriedades comuns ās duas colunas laterais de links  */
div.link-list {
        width:10.2em;
        position:absolute;
        top:0;
        font-size:80%;
        padding-left:1%;
        padding-right:1%;
        margin-left:0;
        margin-right:0;
}
/* usamos a propriedade margin para abrir espaços para as colunas laterais */
#main {
        margin-left:10.2em;
        margin-right:10.2em;
        padding-left:1em;
        padding-right:1em;
}
/* e aqui colocamos as colunas laterais no lugar */
#list1 {
        left:0;
}
#list2 {
        right:0;
}

O fundamento básico consiste em "abrir" espaços nas duas laterais da coluna central div#main usando as propriedades margin-left e margin-right e a seguir posicionar cada uma das colunas laterais usando position:absolute, uma no canto superior esquerdo e a outra no canto superior direito através da definição das suas coordenadas (0,0).

Com a finalidade de "esconder" a folha de estilos de browsers com suporte precário ou mesmo sem suporte para CSS usamos a diretiva <style type="text/css">@import url('your-stylesheet-url');</style> para nossa folha de estilos.


Dominique Hazaël-Massieux, $Id: csslayout-howto.html.en,v 1.3 2004/12/15 05:51:34 dom Exp $