CSS – Criação de Layout

Aviso desde já que optei por colocar as propriedades listadas uma ao lado da outra e não uma embaixo da outra como de costume. Isso foi feito para facilitar a leitura e diminuir o tamanho dos arquivos. E segue uma lógica na declaração das propriedades

Resetando Os Valores.

As primeiras linhas do código servem para resetar os valores e anular algumas diferenças entre navegadores. Determino também que o tamanho das fontes será escrito utilizando a unidade em. Isso é uma opção minha e se você preferir pode utilizar o px.


body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; outline: none;}

ul, ol{list-style:none;}


Centralizando A Página Na Tela

A primeira div a tomar forma será a responsável por englobar todos os elementos e centralizar a página no meio da tela.


.global-div{position:absolute; display:block; width:940px; height:auto; margin:auto; left:50%; margin-left:-490px; margin-bottom:10px; background-color:#fff; padding:0 20px 10px 20px;}


Para centralizar a div global-div no meio da tela horizontalmente, definimos o position: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

Prosseguindo, vamos criar a div do topo e menu.


.topo-div{width:940px; height:135px; background-color:#6a6a6a;}
.menu-div{width:900px; height:auto; background:#383435; padding:12px 20px; margin-bottom:15px;}


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.


.dir-div{position:relative; float:left; width:283px; height:auto; background:#6a6a6a; padding:0 0 17px 17px;}
.esq-div{position:relative; float:left; width:620px; height:auto; margin-right:20px;}


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.


.destaques-div{position:relative; float:left; width:620px; height:auto; background:#6a6a6a; padding-bottom:17px; }
.chamadas-div{position:relative; float:left; width:301px; height:auto; background-color:#6a6a6a; margin-top:17px; padding-bottom:8px;}


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é.


.maislidos-div{width:265px; height:auto; background:#fff; padding-bottom:17px;}
.anuncios-div{position:relative; float:left; width:125px; height:125px; margin-top:17px; background:#fff;}
.rodape-div{position:relative; float:left; width:940px; height:30px; background-color:#6a6a6a; color:#fff; margin-top:17px;}


O css das divs fica assim:


.anuncios-div{width:125px; height:125px; margin-top:17px; background:#fff;}

.topo-div{width:940px; height:135px; background-color:#6a6a6a;}


O código html é este.

Algumas divs têm uma classe somada à classe principal uma left17. A idéia é economizar código e facilitar a customização.

Internet Explorer 6

Quando você flutua um elemento para a esquerda, por exemplo, e aplica uma margem à esquerda também, o IE6 duplica a margem. Para solucionar este problema basta adicionar display:inline juntamente com as outras declarações. Os outros navegadores não serão afetados.


.exemplo{float:left; margin-left:20px;} /*o resultado será para o IE6 margin-left :40px;*/
.exemplo{float:left; margin-left:20px; display:inline;} /* problema resolvido com o display:inline */


Existem outros bugs no IE6, mas um dos mais comuns e que se aplica ao escopo deste tutorial é esse.

Código Completo

Era isso. A parte da estruturação do layout foi vista. Abaixo os arquivos completos para você estudar um pouco mais.

DOWNLOAD: Descarregue o código utilizado neste tutorial: CSS – Criação De Layout, em formato .zip.

Tutorial Seguinte Da Série Aprende CSS Com Maicon Sobczak > CSS – Impressão