16 de agosto de 2007

Como criar layouts de duas colunas

Olá galera, tudo bem? No post de hoje vou explicar como criar um layout com duas colunas.



As características que o layout devera ter no final do tutorial:

  • Uma div #geral, que engloba todo o site, com 760px.

  • Uma div #topo com 43px de altura.

  • Uma div #conteudo com todos os textos, fotos e o conteúdo principal do site.

  • Uma div #menu onde você pode colocar os links do site.

  • Uma div #rodape, para colocar informações sobre copyright, e-mail, etc.


O XHTML



<div id="geral">
<div id="topo">
<h1>Titulo</h1>
<a href="#conteudo" title="Ir para o conteúdo" id="pular">Pular para o conteúdo</a>
</div>
<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque felis sem, pulvinar id, semper id, posuere tempor, nibh. Ut a arcu.Aenean velit enim, lacinia in, laoreet eget, feugiat venenatis, nulla. Sed non libero. Suspendisse fringilla magna nec pede. Quisque ut neque.Nulla nisl turpis, varius at, iaculis quis, aliquet vel, metus. Quisque faucibus scelerisque purus. Suspendisse pulvinar ante non urna. Vivamus pulvinar sapien vitae lectus. Duis quis mi. Mauris volutpat. In blandit, elit egestas eleifend volutpat, turpis diam commodo nulla, a tincidunt libero erat hendrerit urna. Ut sed odio id orci sagittis bibendum. Nulla a ante. Nulla sit amet magna eget leo semper suscipit. In quam tortor, interdum aliquam, placerat a, suscipit varius, eros.</p>
</div>
<div id="menu">
Aqui fica o menu
</div>
<div id="rodape">
<p>Criado por :) © 2007 - Todos os direitos reservados.</p>
</div>
</div>


Podemos observar nesse XHTML, a estrutura do site. Alguns detalhe importantes, o link no topo do site, leva o visitante direto ao conteúdo que ele quer; e a div #geral, serve basicamente para centralizar o site através do css.


CSS



* {
margin: 0;/* Deixa a margem 0*/
padding: 0;/* Deixa o padding 0*/
border: none;/* Tira a borda */
list-style: none;/* Tira os marcadores de lista */
text-decoration: none;/* Tira o sublinhado dos links*/
}
body {
font-size: 14px;
text-align: center;
}
#geral {
width: 760px;/* Tamanho do site (tem que ser menor que 800)*/
margin: 0 auto; /* deixar o site centralizado nos browsers standards */
background: blue; /*Cor de fundo azul*/
text-align: left;
}
#topo {
background: #cff; /* Cor de fundo para o topo */
}
#pular {
margin-left: 616px; /* Posiciona o link para o conteúdo próximo a margem da direita*/
}
#menu {
float: right; /* Faz flutuar à direita*/
width: 185px;
padding-left:7px;
background: #cecece; /*Cinza de plano de fundo, para diferenciar dos outros elementos*/
}
#conteudo {
background: #FFF;/*Cor de fundo branca*/
width: 568px;/* Largura do #conteudo*/
}
#rodape {
background: #cfc
}


No seletor * eu zerei todas as margens e paddings, tirei bordas, sublinhados de links e itens de lista (os pontos que ficam antes de cada li nas listas). Coloquei um background em cada div (para você poder visualizar melhor), e a "mágica" dos layouts de duas colunas estão no float:right no #menu, mas pra funcionar ele (o #menu) deve estar acima do que vai ficar a sua esquerda, que eh o #conteudo (se não iria dar mais trabalho :p).


Temos um problema com a coluna do #menu, como o conteúdo do menu não é grande o suficiente,ele libera um grande espaço em brancoembaixo dele. No nosso caso esse espaço foi preenchido pela div #geral (pai do #menu) e ficou na cor azul. Nesse caso podemos apenas modificar o background da #geral para o cinza (#cecece) e esta tudo resolvido,mas existe outras ténicas para resolver isso (faux columms, equal height).



#geral {
width: 760px;/* Tamanho do site (tem que ser menor que 800)*/
margin: 0 auto; /* deixar o site centralizado nos browsers standards */
background: #cecece;
}

E pronto, temos um layout 2 colunas apenas com css e html valido!
Veja o resultado final: Layout 2 colunas


Tags:

0 comentários: