Apontaremos os últimos retoques no desenho da página com CSS para finalizar a seqüência de construção com CSS. Pode-se ver a primeira parte do artigo.

Rodapé da página

Não havíamos previsto este elemento na imagem original, criada previamente, mas decidimos colocá-lo porque o necessitamos, para que a parte onde está o corpo e a lateral, apareça o fundo de cor branca. No Explorer aparece o fundo branco sem nenhum, mas em Mozilla e outros navegadores, ao estar as duas camadas do corpo e da lateral "flutuando" à esquerda e à direita, não entende que deva manter o fundo branco definido no container.

Não sabemos se isto pode ser entendido bem, mas o melhor é fazer uma proba e ver o que definimos até o momento na tela de Firefox ou Mozilla. Veremos que o fundo branco não continua até embaixo.

<div id="pie">
Probas de construção CSS © 2005 CriarWeb.com
</div>

Esta camada tem o seguinte estilo definido:

#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}

Com "clear:both" indicamos que a camada deve se mostrar sem elementos flutuando à esquerda e à direita, de modo que a posição da camada será imediatamente abaixo da camada corpo e lateral.

Logo, define-se uma cor para o texto, um alinhamento de texto, umas margens e uma margem interna pela parte debaixo de 10 pixel.

A borda externa

O desenho original incluía uma borda de 2 pixel rodeando toda a camada principal. Podemos fazer a prova de incluir uma borda na camada container. Para isso, há que acrescentar no estilo para a camada container o atributo border, da seguinte forma:

#container{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}

Em Mozilla e em navegadores similares, está tudo correto. Mas em Internet Explorer a coisa tem seu problema. Isto é devido ao espaço das bordas que no Explorer toma-se o que tenha sido atribuído à própria camada, e em Mozilla e outros navegadores, toma-se como espaço adicional, a parte do que tenha sido atribuído à camada em si.

Nós resolvemos este problema tirando a borda na camada container e criando uma nova camada, na qual situaremos o container. Chamamos de borda a essa nova camada e é a que vai ter o estilo de borda definida.

<div id="borda">
<div id="container">
.... conteúdo de toda a página
</div>
</div>

Para conseguir a borda foi definido o seguinte estilo para camada borda:

#borde{
border: 2px solid #cccccc;
text-align: left;
width: 700px;
margin: auto;
}

Primeiro, definimos uma borda de 2 pixel. Logo, centralizamos à esquerda para contrabalançar o centrado ao centro que tem o body e que havíamos posto para que Explorer centralizasse a camada do conteúdo. Também, se inclui uma largura de 700 pixel e uma margem "auto" para que Mozilla e os outros navegadores centralizem a camada.

O resultado final do exercício pode ser visto em uma página a parte. Por suposto, convém ver o resultado final utilizando vários navegadores distintos.

Conclusão

Vimos como montar uma página utilizando CSS passo a passo. Esperamos que tenham podido seguir o exercício sem muita dificuldade. Realmente, o trabalho com CSS para a construção é uma tarefa fácil, mas também é muito simples encontrarmos com problemas misteriosos que parecem não ter resposta.

Sem ser um desenho complicado, levamos várias horas de trabalho para realizar esta construção, e é claro, também tivemos algum que outro aborrecimento que por sorte não chegou a ser um desespero. Sobretudo existem dificuldades na hora de conseguir que o desenho seja visto corretamente em todos os navegadores do mercado. Provamos com êxito em Mozilla, Firefox, Netscape, Opera e Explorer.

Para que a compatibilidade entre navegadores não signifique um problema muito pesado, nosso conselho e o de outros desenvolvedores, é desenhar com Mozilla ou navegadores similares. Logo, pode-se ver o resultado no Explorer e adaptar o que for necessário para terminar de enquadrar o desenho. Neste caso, haverá poucas coisas para mudar, enquanto que se desenhamos para Explorer e logo vemos o resultado em outros navegadores, certamente nada estará em seu lugar.

A experiência no trabalho com CSS nos diz que muitas vezes surgem os mesmos problemas ou similares. Uma vez que já os temos resolvido algumas vezes e já nos acostumamos com eles, assim como fizemos com os detalhes relativos ao HTML e à construção com tabelas, CSS se torna muito mais simples, potente e rápido de desenvolver.

Resultado final do exercício.