por Gabriel Lau - 23/06/2008
Depois de brigar muito com o css, me extressar com os navegadores, arrancar os cabelos e quase chutar o computador e jogá-lo no chão, eu descobri um jeito de fazer com que a parte do site que agente destina a por o conteúdo fique redimensionável, isto é, a div irá se ajustar ao conteúdo a medida que ele aumente.
Esse layout consiste em uma div que engloba todas as outras(que eu chamei de “corpo”), um div para o topo, algumas colunas e o rodapé. O número e tamanho dessas colunas é você quem escolhe como vai ser.
Toda essa estrutura pode ser modificada e ajustada ao seu gosto, basta ter um pouco de conhecimento de CSS e HTML.
O segredo desse layout está em definir todos esses elementos primarios que definem a estrutura do seu site com a propriedade “float:left”, e em manter os seus width’s(largura) com um tamanho fixo.
Mas vamos ao que enteressa:
- Crie um novo documento .html e insira nele 5 div’s com os seguintes ID’s: #corpo, #topo, #esq, #dir, #rodape. Esses ID’s são apenas um exemplo, vc pode modificá-los da maneira que quiser.
- Essas div’s têm a seguinte ordem:
<div id=”corpo”>
<div id="topo"> conteudo do topo </div><!-- fim de topo --><div id="esq"> conteudo de esq </div><!-- fim de esq --> <div id="dir"> conteudo de dir </div><!-- fim de dir --> <div id="rodape"> conteudo do rodape </div><!-- fim de rodape --> <br clear="all" /></div> <!– fim de corpo –>
3. Agora crie um arquivo .css que conterá o visual do seu site e que você irá linkar para esta página. Nele, inclua o seguinte texto:
body {
margin: 10px;
background: #ccc;
text-align: center;
}
#corpo{
width: 760px;
padding: 10px;
border: solid 3px #000;
margin: 0 auto 0 auto;
text-align: center;
background: #996600;
}
#corpo #topo, #corpo #esq, #corpo #dir, #corpo #rodape{
float: left;
}
#topo {
width: 760px;
height: 150px;
background: #999;
}
#esq {
width: 600px;
height: 400px;
background: #009900;
}
#dir {
width: 160px;
height: 450px;
background: #FF9900;
}
#rodape{
width: 760px;
height: 30px;
background: #0066FF;
margin: 0 auto;
text-align: center;
}
4. Para linkar basta incluir está tag no HEAD de sua página:
<link rel=”stylesheet” type=”text/css” href=”nome_do_arquivo.css” />
Substitua o “nome_do_arquivo” pelo nome do arquivo que você acabou de criar.
Como vocês viram, não tem nada de complicado nessa estrutura. É simples e objetiva.
Agora, ATENÇÂO!!!
É muito importante que você preste bastante atenção na largura(width) de suas div’s, para que elas não excedam o tamanho da div “corpo” que abranje todas as outras. Se isso acontecer, o seu layout todo “bunitin” que vc acabou de fazer vai pro beleléu !!!
Lembre-se tbm que a adição de PADDING a uma div aumenta o tamnho total dela tbm… então se vc adicionar “10px” de padding-left a uma div… diminua “10px” em seu width.
Tá dado o recado…. 
Veja um exemplo do nosso layout aqui.
— Considerações —
Este modelo de layout foi feito por Roberto Tavares, um amigo de trabalho meu, e ainda está em desenvolvimento.
Qualquer dúvida, entre em contato….
Abraço a todos….
