Voltar para o site

Layout CSS de 3 colunas - 1a. Parte

Publicado em: 28/06/2005

[ 2 a. Parte » ]

Objetivo

Neste tutorial mostro uma técnica para construção de um layout CSS constituido por um topo, três colunas e um rodapé.

Ao contrário do layout construido com tabelas, as CSS nos oferecem variadas opções de construção de um mesmo layout, com o uso das propriedades de posicionamento.

Neste tutorial, nosso layout será construido com a técnica de "flutuar" as três colunas usando a declaração float: left

A filosofia de construção

Ótimo, você já decidiu exatamente como será sua página, tendo definido a estrutura básica de cada um dos módulos componentes do layout e até mesmo já produziu no seu editor gráfico uma imagem, mostrando como será o template do site.

Vamos supor que você decidiu por uma apresentação contemplando os seguintes itens:

  • As páginas terão uma largura fixa de 720px e centralizadas;
  • O topo terá uma altura de 90px;
  • Uma coluna de navegação principal à esquerda;
  • Uma coluna de navegação secundária à direita, para parceiros, propagandas, links relacionados, etc
  • Uma coluna central para o conteúdo da página;
  • Um rodapé com altura de 50px.

Até aqui, nenhuma novidade em relação a um fluxograma clássico de montagem de layout. Mas, a partir daqui as coisas mudam quando se trata de um layout sem tabelas.

Para um projeto com tabelas o próximo passo seria o de fatiar a imagem de layout e exportar o HTML cheio de tabelas aninhadas e GIFs espaçadoras ou gerar uma "trace image" e em cima dela ir construindo tabelas e mais tabelas.

Aqui, vamos seguir por um caminho diferente. Vamos começar esta nova etapa escrevendo o código de marcação - HTML ou mais conveniente ainda, XHTML.
Isto mesmo, o código primeiro.

E, o que torna isto perfeitamente possível e intuitivo é o próprio fundamento básico de um projeto CSS:

marcação totalmente independente da apresentação.

A estrutura do documento

A marcação do código esta diretamente relacionada com a estrutura do documento, isto é, vamos escrever um código semântico e hierarquizado.

Com semântico me refiro ao uso adequado dos elementos HTML. Por exemplo; títulos e sub-títulos marcados com tag hn, parágrafos com tag p, listas numeradas com ol e assim por diante.

Com hierarquizado refiro-me ao posicionamento lógico e sequencial dos elementos HTML ao longo do fluxo e das seções do documento. Por exemplo; blocos de conteúdo com seus respectivos títulos e sub-títulos quando for o caso.

Para exemplificar nosso layout vamos vamos adotar a marcação mostrada nesta página. Dê uma olhada no código fonte da página e lembre-se das seis DIV's adotadas:

  • #tudo
  • #topo
  • #principal
  • #nav-sec
  • #navegação
  • #rodape

A página que você acabou de ver, mostra como o layout final será visualizado em um dispositivo sem suporte para folhas de estilo ou com o suporte desabilitado.

Mas, repito e é isto mesmo, a marcação deve ser definida antes da apresentação.
Já temos uma idéia bem próxima dos conteúdos das páginas, tal como textos e navegação então podemos usar basicamente títulos, parágrafos e listas para marcar navegação tal como acabamos de fazer. Imagens, mídia, banners etc, podem ser acresentados mais tarde ou até mesmo já deixados os "placeholders" nesta fase.

Centrando a página

Vamos dar uma melhorada no que você acabou de visualizar na página mostrada, acresentando as primeiras regras de estilização.

Inicialmente iremos centrar a página com 720px (adotei este valor para uma melhor visualização em resolução de 800 x 600).
Na prática você usuaria algo em torno de 770px.

A #tudo engloba toda a seção BODY do documento, ou seja todas as cinco DIV's ou ainda, toda a página. 

#tudo {
	width:720px;
	margin:0 auto;
	}

Esta regra é suficiente para definir a largura total da página e centralizá-la em navegadores complacentes com as Web Standards. Contudo, o Internet Explorer versões abaixo do IE6.0 não entendem margin: 0 auto; e não centralizam a página.

Se você quiser centralizar no IE5.0 e IE5.5 terá que utilizar um artifício ou um "hack" declarando para body text-align: center; e o IE erroneamente centra a página mas também os conteúdos dentro dela.

Isto causa um problema adicional que deverá ser corrigido, declarando-se text-align: left para a #tudo

E finalmente:

body {
	text-align:center;
	}

#tudo {
	width:740px;
	margin:0 auto;
	text-align:left
	border:1px solid #c30;
	}

A declaração de uma borda sólida de 1px em tom vermelho para a #tudo foi acresentada para fins de uma melhor visualização.

Veja os efeitos destas primeiras regras nesta página.

Dimensionando as DIV's

Vamos caminhar com nossa estilização definindo dimensões para as cinco DIV's.
Iremos declarar uma cor de fundo para as DIV's bem como um altura fixa de 90px para o topo e de 50px para o rodapé.

As três colunas terão as seguintes larguras:

2 x navegação = 150 px cada uma
principal = 408 px
margem entre as três DIV's = 6 px;

300px + 408px + 12px = 720px 

#topo {
	height:90px;
	background:#ddd;
	}
#principal {
	width: 408px;
	background:#fafafa;
	}
#nav-sec {
	width: 150px;
	background:#eee;
	}
#navegacao {
	width: 150px;
	background:#eee;
	}
#rodape {
	height:50px;
	background:#ddd;
	}

Veja os efeitos destas regras nesta página.

Equalizando para os diferentes navegadores

Já existem diferenças no layout dependendo do navegador que você está usando para visualizar as páginas.

Em navegadores que seguem as Web Standards:
a) existe um margem separando as DIV's;
b) o rodapé está com exatos 50px com o texto do parágrafo fora dele.

Em navegadores ruins:
a) as DIV's estão coladas umas nas outras;
b) o rodapé estendeu em altura para conter o texto do parágrafo.

Existe para todos eles uma margem superior e uma inferior na #tudo

Vamos equalizar isto tudo, zerando margens e paddings para todos os elementos HTML da página. Usaremos o seletor universal - * (estrela) 

* {
	margin:0;
	padding:0;
	}

Veja o efeito desta regra nesta página.

Observe que não só as DIV's "colaram" como também títulos e parágrafos tiveram seus espaçamentos zerados.
Agora, em navegadores Standards os marcadores de listas dos menus sairam para fora da DIV e em navegadores ruins sumiram.
Mais adiante acertaremos isto tudo.

[ 2 a. Parte » ]

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo