:: Layout CSS passo a passo ::

Este tutorial foi atualizado em: 13/03/2011 para contemplar as modificaes feitas pelo autor.

Objetivo
Voc sabe construir um layout CSS completo? Existe um mtodo que possa ser utilizado para construo de qualquer layout CSS? Este artigo explica como construir um layout CSS a partir do zero. O mtodo de construo descrito se baseia no posicionamento de containers coloridos, foi testado em uma variedade considervel de navegadores e pode ser adaptado para construir layouts CSS em geral.

Introduo
Vamos comear com uma imagem do layout e ao longo do artigo iremos transform-la em uma pgina (X)HTML. A finalidade principal desse tutorial no ensinar a construo de um layout idntico ao apresentado mas sim aprender as tcnicas para construo de layout CSS em geral. Imagem do layout (NT: usarei as imagens do artigo original em ingls)

Vejamos algumas diretrizes importantes antes de iniciar.

Construa cada passo por etapas bem definidas e ao concluir a etapa teste em diferentes navegadores
No caia na armadilha de construir todo o layout e depois testar, pois voc poder constatar uma

quebra de layout difcil de detectar devido a grande quantidade de cdigo. Construa em passos pequenos e teste cada passo em diferentes navegadores. Assim fazendo voc ir detectar eventuais problemas com o layout to logo eles apaream, tornando a correo mais fcil.

Desenvolva para os navegadores modernos e depois adapte para os antigos

mais produtivo desenvolver para os navegadores complacentes com os Padres Web e depois usar artifcios, tal como esconder CSS (via @import), para servir os navegadores antigos.

Na fase de desenvolvimento e testes coloque a folha de estilos na seo HEAD da pgina

muito mais fcil construir seu layout com a folha de estilos incorporada na pgina em construo mais rpido e evita que a folha de estilos fique no cache da mquina. Ao terminar a construo do layout retire a folha de estilos da pgina e coloque-a em um arquivo externo linkando-a.

Valide seu cdigo HTML e CSS

Valide com freqncia seu HTML e CSS. Muitos problemas com layouts podem ser corrigidos com auxlio dos relatrios do validador.

1o. passo - Decidir a qual nvel de navegadores o layout ser servido

Antes de comear seu layout voc dever decidir a quais navegadores ele dever ser servido. Para ajud-lo nesta deciso importante saber quais os usurios do site (pblico-alvo) e se possvel examinar os relatrios e logs indicativos de navegadores mais usados. Existem 3 nveis de suporte s CSS pelos navegadores, que devem ser considerados: Nota do tradutor: Os nveis de suporte s CSS pelos navegadores, mostrado no artigo, data do ano de 2004. Para os padres atuais considere adaptaes e atualizao.

Navegadores antigos
Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x, etc

Navegadores recentes
Win/InternetExplore 5, Win/InternetExplore 5.5, Win/Netscape 6, Win/Mozilla1.x, Win/Opera6, Mac/Netscape6, Mac/Mozilla1.x, Mac/Opera5 etc

Navegadores modernos
Win/InternetExplore 6, Win/ Netscape7, Win/Mozilla1.5, Win/Firebird0.7, Win/Opera7, Mac/InternetExplore5.2, Mac/Safari1, Mac/ Netscape7, Mac/Mozilla1.5, Mac/Opera6 etc

Nveis de suporte
Suporte total s CSS - O navegador suporta todas as regras CSS e renderiza o layout de maneira totalmente consistente. Se voc pretende suporte total para navegadores antigos dever usar somente regras CSS bsicas e evitar posicionamentos CSS complexos.

Suporte parcial s CSS - Algumas regras CSS devem ser escondidas para determinado navegador. Isto implica em que aquele navegador no renderiza o layout de forma totalmente consistente, contudo razovel grau de apresentao obtido. Por exemplo: fontes e cores so renderizadas corretamente, mas certos aspectos do posicionamento no so. Contedos no estilizados - Todas as regras de estilos so escondidas para um determinado navegador. Opes para suporte s CSS Navegadores modernos Navegadores recentes Navegadores antigos Opo 1. Suporte total s CSS Suporte total s CSS Suporte total s CSS Opo 2. Suporte total s CSS Suporte total s CSS Suporte parcial s CSS Opo 3. Suporte total s CSS Suporte total s CSS Contedos no estilizados Opo 4. Suporte total s CSS Suporte parcial s CSS Contedos no estilizados Neste artigo escolhemos a Opo 2

2o. passo - Escolher os containers do layout

Para posicionar os elementos na pgina devemos criar os containers principais. Analise o design da pgina (que pode ser uma figura, um esboo em folha de papel ou um template existente) e defina os containers principais. Imagem do layout com containers definidos.

3o. passo - Nomear os containers

Estes containers sero os elementos DIV principais nas quais sero inseridos os contedos e eles devero ser designados com nomes ligados semanticamente s suas finalidades evitando-se nome-las de acordo com sua apresentao ou aparncia. No nosso exemplo adotaremos os seguintes nomes para as DIVs principais do layout: container header mainnav menu contents footer

Se o container for nico na pgina use IDs no lugar de classes. Isto importante para a aplicao de estilos na pgina. Caso ocorram regras CSS conflitantes, os seletores IDs tero prioridade sobre os seletores classes. Imagem do layout com containers nomeados

4o. passo - Criar a marcao

Comece a declarao de DOCTYPE no nosso caso vamos usar HTML 4.10 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">

Prossiga com a seo head do documento, incluindo a codificao de caracteres, link para folhas de estilo que no nosso exemplo foi chamada de styles.css:
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Page title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen">

</head>

Finalmente inclua as informaes para a seo body crie DIVs vazias para os containers do layout. Veja o exemplo a seguir.
<body> <div id="container"> <div id="header"></div> <div id="mainnav"></div> <div id="menu"></div> <div id="contents"></div> <div id="footer"></div> </div> </body> </html>

5o. passo - Inserir contedo

<body> <div id="container"> <div id="header" title="sitename"> <div id="skipmenu"><a href="#content">Skip to content</a></div> <h1>Sitename</h1> </div> <div id="mainnav"> <ul> <li><a href="#">Section 1</a></li> <li><a href="#">Section 2</a></li> <li><a href="#">Section 3</a></li> <li><a href="#">Section 4</a></li> </ul> </div> <div id="menu"> <h3>Archives</h3> <ul> <li><a href="#">December 2003</a></li> <li><a href="#">November 2003</a></li> <li><a href="#">October 2003</a></li> <li><a href="#">September 2003</a></li> <li><a href="#">August 2003</a></li> </ul> <h3>Last 10 Entries</h3> <ul> <li><a href="#">Entry 120 (4)</a></li> <li><a href="#">Entry 119 (0)</a></li> <li><a href="#">Entry 118 (9)</a></li> <li><a href="#">Entry 117 (3)</a></li> </ul> </div> <div id="contents"> <div class="blogentry"> <h2> <a href="#" title="Permanent link to this item">Heading here</a>

</h2> <h3>Wednesday, 3 December 2003</h3> <p><img class="imagefloat" src="flower.jpg" alt="" width="100" height="100" border="0"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Duis autem vel eum</a> iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <ul> <li><a href="#">Comments (4)</a></li> <li><a href="#">Pingbacks (1)</a></li> <li>Category: <a href="#" title="Category">CSS</a></li> </ul> </div> </div> <div id="footer"> Copyright Sitename 2004 </div> </div> </body> </html>

6o. passo - Posicionar os containers

Os containers do layout devem ser posicionados com uso dos mtodos CSS de posicionamento. Para isso vamos definir regras de estilo no arquivo style.css. Depois que os containers forem posicionados voltaremos ao arquivo da folha de estilo para acresentar mais regras CSS.
body { margin: 0; padding: 0; background: #ddd; } #container { margin: 1em auto; width: 650px; background: #fff; } #header {background: #CF3;} #mainnav {background: #9F3; } #menu { float: right; width: 165px; background: #6F9; } #contents { float: left; width: 440px; background: #9FC; margin: 0 0 0 20px; } #footer { clear: both;

background: #FF9; }

7o. passo - Algum problema?

O layout construido funciona bem em todos os navegadores, mas apresenta problema no Internet Explorer 6. Observe como ele renderizado naquele navegador.

A margem esquerda do container contents muito grande. Isso acontece porque o IE6 apresenta o bug da margem dobrada para elementos flutuados. Esse bug pode ser resolvido acresentando-se a declarao display: inline para o container flutuado, no caso #contents.
#contents { float: left; width: 440px; background: #9FC; margin: 0 0 0 20px; display: inline; }

Como essa declarao somente para o IE6 melhor mov-la para um arquivo de folha de estilo separada a ser servida somente para o IE6. Essa folha de estilo ser servida com uso de comentrio condicional especfico para o IE6, como mostrado a seguir.

<head>

</head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Page title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <!--[if IE 6]> <link rel="stylesheet" href="ie6.css" type="text/css" media="screen"> <![endif]-->

8o. passo - Completar a folha de estilos

Uma vez posicionado os containers e sendo o layout consistente para todos os navegadores podemos completar nossa folha de estilos, como mostrado a seguir.
/* -----------------------------global styles ------------------------------ */ body { margin: 0; padding: 0; font: 85% arial, hevetica, sans-serif; text-align: center; color: #333; background: #ddd url(img_39.gif) repeat 0 0; }

a:link { color: #B52C07; } a:visited { color: #b93411; } a:focus { color: #000; } a:hover { color: #7d8206; } a:active { color: red; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; } h2 { color: #B52C07; font: 140% georgia, times, "times new roman", serif; }

h2 a { text-decoration: none; } h3 { color: #7d8206; font: 110% georgia, times, "times new roman", serif; } /* -----------------------------container styles ------------------------------ */ #container { margin: 1em auto; width: 650px; text-align: left; background: #fff; border: 1px solid #676767; } /* -----------------------------header styles ------------------------------ */

#header { height: 45px; width: 100%; position: relative; background: url(header.jpg) no-repeat 0 0; border-bottom: 1px solid #fff; } #header h1 { position: absolute; left: -500em; } #skipmenu { position: absolute; left: 0; top: 5px; width: 645px; text-align: right; } #skipmenu a { color: #555; text-decoration: none; } /* -----------------------------mainnav styles ------------------------------ */ #mainnav { background: #9FA41D; color: #272900; padding: 2px 0; margin-bottom: 22px; } #mainnav ul { margin: 0 0 0 20px; padding: 0; list-style-type: none; border-left: 1px solid #C4C769; } #mainnav li { display: inline; padding: 0 10px; border-right: 1px solid #C4C769; } #mainnav li a { text-decoration: none; color: #272900; } #mainnav li a:hover { text-decoration: none; color: #fff; background-color: #272900; } /* -----------------------------menu styles ------------------------------ */

#menu { float: right; width: 165px; border-left: 1px solid #C5C877; padding-left: 15px; } #menu ul { margin: 1em 0; padding: 0; } #menu ul li { margin: 0 0 1em; padding: 0; list-style-type: none; } /* -----------------------------contents styles ------------------------------ */ #contents { float: left; width: 430px; margin: 0 0 0 20px; } #contents p { line-height: 165%; } .blogentry { border-bottom: 1px solid #C5C877; } .blogentry ul { text-align: right; margin: 1em 0; padding: 0; font-size: 95%; } .blogentry li { list-style-type: none; display: inline; margin: 0; padding: 0 0 0 7px; } .imagefloat { float: right; padding: 2px; border: 1px solid #9FA41D; margin: 0 0 10px 10px; } /* -----------------------------footer styles ------------------------------ */ #footer { clear: both; color: #272900; text-align: right; font-size: 90%; background: #9FA41D; padding: 5px;

9o. passo - Folha de estilo para impresso

Para terminar vamos preparar o layout para impresso. Se voc pretende que o layout seja impresso exatamente como aparece na tela basta definir os valores all ou print para o atributo media do elemento que linka para a folha de estilo conforme mostrado a seguir.
<link rel="stylesheet" href="style.css" type="text/css" media="screen print">

ou
<link rel="stylesheet" href="style.css" type="text/css" media="all">

Para criar uma folha de estilos destinada a impresso personalizada (sem os elementos da tela que no interessam, como por exemplo, logotipos, rodaps, figuras decorativas, etc) siga os seguintes passos. 1. Crie uma cpia da folha de estilo principal (styles.css) e grave a cpia com o nome de backup.css. Vamos trabalhar na folha style.css que estando linkada ao documento ir refletir no layout as alteraes feitas, permitindo que se visualize imediatamente a alterao sem necessidade de dar um "visualizar impresso" cada vez que se faz uma alterao. Quando terminarmos com as alteraes basta renomear o arquivo para print.css, renomear o arquivo backup.css para style.css e link-los ao documento. 2. Olhe para o layout e decida quais so os contedos que sero impressos. 3. No nosso exemplo ns descartaremos o grfico do topo (header), a navegao principal (mainnav), o menu da direita bem como as cores e sublinhados dos links. remova todos os containers no necessrios com uso da declarao display: none; Mude todas as cores para preto ou tons de cinza. Retire sublinhados de links com a declarao a { text decoration: none;} Remova os tamanhos de fonte e deixe tudo com o tamanho padro 100% (default).
body { margin: 0; padding: 0; font: 100% arial, hevetica, sans-serif; color: #000; background-color: #fff; } a { color: #000; text-decoration: none; } #header { border-bottom: 1px solid #999; } #header h1 { color: #000; } #mainnav, #menu, .imagefloat, #skipmenu { display: none; } #menu ul { margin-left: 0; padding-left: 0; list-style-type: none; line-height: 165%; } #contents p { line-height: 165%; } .blogentry { border-bottom: 1px solid #999; }

.blogentry ul { list-style-type: none; text-align: right; margin: 1em 0; padding: 0; font-size: 95%; } .blogentry li { display: inline; padding: 0 0 0 7px; } #footer { clear: both; color: #000; text-align: right; padding: 5px; font-size: 90%; border-top: 1px solid #999; margin-top: 2em; }