HTML+CSS MANUAL PARA O LAYOUT

HTM

L

CSS

Centrar a Página A primeira div a tomar forma será a responsável por englobar todos os elementos

e centralizar a página no meio da tela.

Para centralizar a div global-div no meio da tela horizontalmente, definimos

oposition:absolute, como não terá nenhum elemento acima dela, ela vai pegar como

referência o body. A técnica para centralizar a div horizontalmente consiste em definir a

posição absoluta, o display:block, uma largura fixa (width:940px), uma margem negativa

(margin-left:-490px) resultado da soma da metade da largura (470px) mais o padding

(20px + 20px) e a propriedade left:50%.

Topo e Menu

Por que em nenhuma delas declaramos a propriedade position? Porque além

de ocuparem toda a extensão da div recipiente elas não precisam sair do

fluxo normal do documento, uma embaixo da outra. Isso não significa que não

tenha um position, que por padrão é static.

Preste atenção em como apesar de ter uma extensão de 100%, a menu-div

tem declarado o width apenas com 900px. Os outros 40px vêm da soma dos

padding-left e padding-right que recebem 20px cada. Lembre que a largura

e altura sempre levam em consideração o padding.

Dividindo O Conteúdo

Em seguida dividimos o conteúdo principal em dois blocos para organizar melhor o layout.

Estes sim precisam ter declarada a posição. Mas só isso não basta, é necessário colocar

uma do lado da outra. Para isso que serve a propriedade float. Podemos “flutuar” as divs

para a esquerda (left) e direita (right).

Muitos encontram problema nessa hora. Partem do raciocínio de que cada uma esta de

um lado então uma flutua para a esquerda e outra para a direita. Mas não é

necessariamente assim. Neste layout as duas divs ocupam toda a largura disponível então

não sobra espaço e a da direita pode ser flutuada para a esquerda sem problemas.

Vamos agora trabalhar um pouco nosso código html para ter uma idéia de como vai ficar.

Um código bastante simples não? E com a vantagem de nem precisar de

comentários, pois as classes tranquilamente identificam o propósito da div. Imagine

fazer isso com tabelas. Aposto que o código teria o dobro de linhas e seria um tanto

confuso.

Destaques e Chamadas

Voltando ao nosso arquivo css vamos criar o código das divs destaque e chamadas.

Você precisa declarar a position para a destaques-div apesar dela ocupar toda a

extensão do recipiente (esq-div). Pois caso contrário os elementos que você

precisar flutuar e posicionar dentro dela não vão se comportar como o esperado.

Lateral Direita e Rodapé

Vamos fazer agora as divs que conterão a lista dos mais lidos, a publicidade e o rodapé.

O css das divs fica assim:

O HTML