Marcus VBP

A página inicial do layout é divididas em três colunas, sendo duas auxiliares (exibem a navegação e também banners) enquanto que a coluna central exibe o conteúdo mais relevante. As páginas internas possuem apenas duas colunas, sendo uma auxiliar, e uma coluna mais larga, exibindo o conteúdo relevante.

Através das folhas de estilo é possível ter o total controle de qualquer elemento HTML, seja em suas cores, dimensões, posicionamento, e comportamento. Neste caso, as folhas de estilo serão utilizadas para posicionar elementos HTML DIV da página em colunas paralelas, quando normalmente deveriam seguir o fluxo normal do documento.

Na página principal temos o seguinte código estrutural:

A formatação destes elementos em colunas é muito simples, e é feita através dos seletores de identificação (o valor da propriedade HTML "id"). O primeiro passo é definir a largura das colunas laterais (através da propriedade width). No caso deste layout, ambas as colunas 180 pixels de largura. Em seguida, define-se a largura da coluna principal central. Ao contrário das demais colunas, sua largura é definida aplicando-se uma margem esquerda e direita, com valores iguais à largura das colunas esquerda e direita, respectivamente. Usualmente, utiliza-se valores de margem esquerda e direita um pouco maiores que as larguras das colunas, por razões estéticas. No caso deste projeto, o valor das margens é de 184 pixels.

Para finalizar, determina-se que as colunas esquerda e direita devam "flutuar" à esquerda e direita respectivamente da coluna central. Isso é feito utilizando a propriedade CSS "float", com valor igual a left (no caso da coluna da esquerda) ou right (para a coluna da direita). A propriedade float define um determinado elemento HTML como sendo um elemento flutuante que deve-se posicionar à esquerda ou a direita dos demais elementos da página, deslocando elementos inline para a esquerda ou direita e sobrepondo elementos de bloco. Por isso foi aplicada margens à coluna central, para evitar que esta fosse sobreposta pelas duas colunas secundárias.

Em relação às páginas internas com apenas duas colunas, uma coluna esquerda e uma coluna principal com o conteúdo relevante, é necessário apenas realizar um pequeno ajuste, utilizando para isso o arquivo CSS pag-internas.css. Este arquivo é incluído apenas nas páginas internas, depois da inclusão dos arquivos CSS que formatam as colunas.

Graças ao efeito cascata, pode-se alterar o valor da margem direita da coluna "conteudo", aplicando a propriedade CSS margin-right com valor igual a zero. Isso faz com que a margem direita que daria espaço para a coluna desapareça, transformando o layout de três para duas colunas.