Já vimos no artigo anterior uma maneira de realizar uma construção com CSS com três colunas. Agora vamos realizar algumas mudanças simples para melhorar algo no código do anterior artigo.

Antes de mais nada, teríamos que explicar porquê estimamos que pode ser melhorado o exercício da construção com três colunas, tal como foi planejado anteriormente. Trata-se simplesmente de melhorar a organização do conteúdo da página de uma forma mais inteligente.

Eu gosto sempre de ver o aspecto que tem uma página web sem a folha de estilo em cascata, para ver se a informação tem sentido e ordem tal como foi colocado no código HTML. Ou seja, se está apresentada de uma forma adequada, embora não se visualize os estilos definidos no CSS.

Qualquer navegador que não tenha suporte a CSS mostrará a página sem nenhum estilo e todos os elementos aparecerão um atrás do outro segundo tenham sido colocados. Não é habitual que uma pessoa que tenha um navegador incompatível com folhas de estilo em cascata nos visite, porém para melhorar a acessibilidade das páginas, também convém que se leia bem, embora não se tenha acesso a CSS.

Assim se veria a construção CSS com três colunas sem a declaração de estilos que havíamos apresentado no anterior exemplo. Se clicamos no link, poderemos comprovar que aparece o banner vertical na parte superior da página, quando o interessante seria que aparecesse abaixo do conteúdo, pelo menos na minha opinião.

Variação do exercício anterior para construir com três colunas

Basicamente, vamos fazer uma construção com duas colunas, a esquerda, coma barra de navegação e a da direita, com o outro conteúdo. Na parte da direita, por sua vez, faremos duas colunas mais, uma à esquerda que terá o texto da página e outra à direita, com a barra lateral direita.

Na verdade, o exercício fica muito parecido. Vejamos o código HTML:

<div id="container">
    <div id="cabecalho">
       Cabecalho 01
    </div>
    <div id="corpo">
       <div id="lateral">
          <ul>
             <li><a href="#">Link 1</a>
             <li><a href="#">Vínculo 2</a>
             <li><a href="#">Outro link</a>
             <li><a href="#">Link maneiro</a>
             <li><a href="#">Mais links</a>
             <li><a href="#">Outro último</a>
          </ul>
       </div>
       <div id="derecha">
          <div id="principal">
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
             ……
          </div>
          <div id="otrolado">
             <img src="bannerlateral.gif" width="120" height="600" alt="">
          </div>
       </div>
    </div>
    <div id="pie">
       © 2006 CriarWeb.com
    </div>
</div>

A camada "direita" é a nova que criamos, onde colocamos tanto o texto principal como a camada do banner vertical.

O código CSS que variamos só afeta à camada "direita", que não estava criada anteriormente e à camada "principal", que é onde está o texto central.

#direita{
    margin: 0 0 0 170px;
}

#principal{
    background-color: #ffffff;
    padding: 4 4 4 4px;
    width: 460px;
    float: left;
}

A camada "direita" tem uma margem de 170 pixels, para deixar espaço à barra de links da esquerda. A camada "principal", que antes tinha essa margem de 170 pixels, já não a necessita, porém, em troca colocamos o atributo float: left, para que flutue na parte da esquerda.

Definitivamente, é uma construção com duas colunas, na qual uma delas tem por sua vez outra construção com duas colunas.

Pode-se ver o exemplo em funcionamento em uma página a parte. Não vamos escrever o código fonte do exemplo inteiro. Porém, pode-se analisar tanto o HTML como o CSS através da opção "ver código fonte" do navegador.

Pode-se ver como ficaria esta construção com três colunas se o nosso navegador não for compatível com CSS.