Montar uma página com CSS V

helldanger1 · Mai 19, 2009

Para terminar, vamos criar um rodapé da página e uma borda que encaixe a página. Ofereceremos também umas conclusões do exercício.
Por Miguel Angel Alvarez - Tradução de JML

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.

helldanger1 · Mai 19, 2009

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.

Montar uma página com CSS V

helldanger1

GForum VIP

helldanger1

GForum VIP