Desenvolvimento

Teste 14 - Layout Básico de 3 Colunas

Este exemplo utiliza uma declaração DOCTYPE no topo da página para tornar o código XHTML standards-compliant. Portanto, se você estiver visualizando esta página no Internet Explorer 6, é bem provável que você esteja vendo uma barra de rolagem horizontal. Isso é efeito colateral do uso de frames, e sinto muito em dizer que ainda não descobri como burlar esse efeito irritante. 21-MAI-2007: O site não tem mais frames, então a observação anterior é inválida.
Os códigos CSS descritos no exemplo omitem todos os estilos de cor e borda, para uma entendimento mais claro dos métodos de posicionamento das camadas.
Estes são exemplos de layouts fluidos, ou seja, que se adaptam a qualquer formato de tela. Eles estão envoltos numa camada externa, que só existe para separá-los dentro do código desta página.

Observações sobre o layout 1 -> Como explicado dentro do próprio rodapé, este layout não pode ser usado com o rodapé. Apesar disso, as colunas do meio fornecem uma área excelente se o rodapé não fizer falta. A camada central pode ser colocada antes das camadas laterais no código (mas depois do cabeçalho), o que força o seu download a ser realizado primeiro e favorece os algoritmos de máquinas de busca.

Observações sobre o layout 2 -> Embora seja um layout perfeito de três colunas, cabeçalho e rodapé, a coluna central DEVE necessariamente estar por último no código, o que com certeza não favorece o trabalho das máquinas de busca, que farão a varredura dos itens menos importantes primeiro.

Observações sobre o layout 3 -> Esta é uma extensão do layout 1, que se encarrega de posicionar o cabeçalho também absolutamente. Aqui, a primeira camada a aparecer, antes de qualquer outra, é a camada central (a do conteúdo). O método utiliza uma pequena gambiarra no posicionamento do cabeçalho (por causa da merda do Internet Explorer), mas funciona direitinho se o designer puder abrir mão do rodapé.

#top {margin: 5px; padding: 10px; height: 90px}

Em standards-compliant mode, a altura desta camada é 90 + 2 × 10 pixels (height + 2 × padding). Em quirks mode, o Internet Explorer não contabiliza o estilo padding nesta soma, o que acaba deslocando as camadas left e right 20 pixels para baixo e destruindo o layout.
Logo, percebe-se que este layout é projetado para uma página que seja standards-compliant.

#left {position: absolute;
       left: 5px;
       top: 120px;
       width: 190px}

#center {margin-left: 202px;
margin-right: 202px;
margin-bottom: 5px}

O estilo margin-bottom: 5px foi acrescentado devido a um bug do Internet Explorer. Independente se o browser está em standards-compliant mode ou não, a margem do ID footer é simplesmente ignorada pelo IE, o que faz com que sua borda superior toque a borda inferior da camada do centro.

Por que 202 pixels e não 200 pixels para as margens esquerda e direita? Em standards-compliant mode, o estilo width refere-se ao conteúdo interno de um elemento, sendo tanto padding quando border acrescentados adicionalmente a width. Assim, o espaçamento do lado esquerdo corresponde à soma de left: 5px + width: 190px + 2 pixels das bordas e 5 pixels de espaço entre as camadas esquerda e central, o que resulta em 202 pixels!

#right {position: absolute;
        right: 5px;
        top: 120px;
        width: 190px}

Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...
Blá-blá-blááá...

#top {margin: 5px; padding: 10px; height: 90px}

#left {position: relative;
       left: 5px;
       float: left;
       width: 190px}

Esta é a primeira camada a aparecer no código.

#right {position: relative;
        right: 5px;
        float: right;
        width: 190px}

Esta é a segunda camada a aparecer no código.

#center {margin-left: 202px;
margin-right: 202px}

Esta é a terceira camada a aparecer no código.

As camadas #left, #center e #right estão incluídas dentro de uma camada externa denominada #wrapper. À camada #wrapper é atribuído o estilo padding-bottom: 5px, para garantir o espaçamento uniforme das três camadas internas em relação ao rodapé, que por sua vez possui margem superior igual a zero. Isso é necessário porque o uso do estilo margin é problemático, devido principalmente a alguns bugs do Internet Explorer.

Além das três camadas principais, a camada #wrapper possui uma última camada vazia denominada #clear. À camada #clear é atribuído o estilo clear: both, que insere uma 'quebra de linha' e elimina os efeitos de qualquer float das camadas superiores.

#footer1 {margin: 0 5px 5px 5px; height: 70px}

#center {margin: 160px 202px 5px 202px}

O estilo margin-bottom: 5px foi acrescentado devido a um bug do Internet Explorer. Independente se o browser está em standards-compliant mode ou não, a margem do ID footer é simplesmente ignorada pelo IE, o que faz com que sua borda superior toque a borda inferior da camada do centro.

Por que 202 pixels e não 200 pixels para as marges esquerda e direita? Em standards-compliant mode, o estilo width refere-se ao conteúdo interno de um elemento, sendo tanto padding quando border acrescentados adicionalmente a width. Assim, o espaçamento do lado esquerdo corresponde à soma de left: 5px + width: 190px + 2 pixels das bordas e 5 pixels de espaço entre as camadas esquerda e central, o que resulta em 202 pixels!

#top {position: absolute; left: 5px; top: 5px; right: 5px;
height: 130px; padding: 10px; overflow: hidden; text-align: justify}

Ao posicionar essa camada absolutamente, as mudanças acima (com exceção da última) são suficientes para conservar o layout do primeiro exemplo no Netscape e no Firefox. O Internet Explorer (versão 6), como sempre, quer ser mais bonito que os outros e tem um bug. Não é possível fixar o espaçamento para o lado direito, não importa o que se faça!
Eu observei que a largura da camada parece acompanhar o fluxo do texto. Por isso existe um estilo text-align: justify, que força as linhas de texto a se esticarem até o final. Não é lá uma solução elegante, mas funciona... Para um melhor efeito, basta digitar uma linha suficientemente grande para ocupar todo o espaço horizontal e colorí-la do mesmo modo que a cor de fundo.
O estilo overflow: hidden é necessário porque o Internet Explorer (de novo) estica a camada verticalmente quando o texto avança demais neste sentido.

#left {position: absolute;
       left: 5px;
       top: 160px;
       width: 190px}

#right {position: absolute;
        right: 5px;
        top: 160px;
        width: 190px}

#footer {margin: 5px; height: 70px}

Este rodapé foi colocado para mostrar que este layout não possibilita o seu uso.
Quando o conteúdo das colunas da direita e da esquerda se expandem além da coluna central,
as colunas passam por cima do rodapé!