Construção CSS com duas colunas

helldanger1 · Mai 19, 2009

Mostramos como fazer uma página web construída utilizando unicamente CSS, sem tabelas, com uma distribuição de 2 colunas, uma cabeçalho e um rodapé de página. Com desenho de largura fixa ou fluída.
Por Miguel Angel Alvarez - Tradução de JML

Veremos como realizar uma construção com duas colunas utilizando CSS, sem usar tabelas. Além das duas colunas, para completar a estrutura típica de uma web, colocaremos um cabeçalho e um rodapé de página.

O exemplo pretende ser o início de uma série de artigos para mostrar como realizar diferentes tipos de planilhas, construindo com CSS ao invés de tabelas. Iremos publicando estes artigos em nosso Workshop de CSS.

Começamos mostrando os dois exemplos de construção que veremos neste artigo, sempre com duas colunas, deixando a coluna com os links da barra de navegação à esquerda ou à direita.

•Construção com duas colunas e links à esquerda
•Construção com duas colunas e links à direita

helldanger1 · Mai 19, 2009

O código HTML

O código HTML dos dois exemplos que adiantamos é o mesmo. Basicamente este:

<div id="container">
<div id="cabecalho">
Cabecalho 01
</div>
<div id="corpo">
<div id="lateral">
<ul>
<li><a href="#">Link 1</a>
<li><a href="#">Vínculo 2</a>
<li><a href="#">Outro link</a>
<li><a href="#">Link maneiro</a>
<li><a href="#">Mais links</a>
<li><a href="#">Outro último</a>
</ul>
</div>
<div id="principal">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......
</div>
</div>
<div id="rodape">
© 2006 CriarWeb.com
</div>
</div>

Pode-se ver que temos uma camada container, que engloba todo o código. Logo, dentro do container temos três blocos. O cabeçalho, o corpo e o rodapé de página. O cabeçalho e o rodapé são duas camadas tal qual, que ocupam todo o espaço do container. O lugar onde teremos as duas colunas é o corpo.

Dentro do corpo temos duas partes, para codificar cada uma das duas colunas. Uma parte, que chamamos de "lateral", com uma lista de links (seria a barra de navegação) e outra parte com o texto da página, que chamamos de "principal".

helldanger1 · Mai 19, 2009

O código CSS

Como havíamos adiantado, veremos duas variantes de codificação com duas colunas, com os links à esquerda e à direita. Não obstante, a maior parte do código CSS de ambos exemplos é a mesma, pois só varia a declaração de estilos da camada "lateral" e da camada "principal".

Construir com os links à esquerda

Vejamos a codificação CSS para a página com os links à esquerda.

<style type="text/css">
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#container{
text-align: left;
width: 770px;
margin: auto;
}
#cabecalho{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #999999;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffcc;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}
#principal{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
}
#rodape{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
}

helldanger1 · Mai 19, 2009

A parte que vamos remarcar é onde se define o estilo da lateral e a camada principal. Fazemos com que a lateral tenha um tamanho fixo de 160 píxel, mas o mais importante é que fazemos que "flutue" à esquerda com float:left;. Isto faz com que a lateral fique à esquerda e permite que o conteúdo inserido depois da lateral fique na mesma altura, porém à direita.

Por sua parte, para a camada principal, simplesmente se indica que tem uma margem à esquerda de 170 píxels. Isto faz com que se coloque ao lado da camada lateral, deixando um espaço em branco de 10 píxels. Tem uma margem de 170, dos que 160 são para o espaço que vai ocupar a camada dos links e 10 píxels de espaço entre a camada principal e a lateral.

Como a camada principal não tem definida sua largura, se fará tão grande quanto o container permitir.

Nota: Estas explicações não são completas de todo o exercício. Supomos que o leitor já tem assimilados alguns conceptos que foram explicados no Manual de CSS ou no Workshop de CSS.

helldanger1 · Mai 19, 2009

Construir com os links à direita

Continuamos mostrando as mudanças que teríamos que fazer para construir a página com a coluna de links à direita. Simplesmente vamos mudar o código CSS das camadas lateral e principal.

#lateral{
width: 160px;
background-color: #999999;
float:right;
}
#principal{
background-color: #ffffff;
padding: 4 4 4 4px;
margin-right: 170px;
}

Agora estamos indicando que a camada lateral flutue à direita. Por sua parte, na camada principal mudamos a margem que havia antes à esquerda para coloca-la à direita

helldanger1 · Mai 19, 2009

Desenho fluído

Até aqui neste artigo vimos como fazer um desenho com uma largura fixa. Se quisermos um desenho fluído (que se ajusta à largura da janela do navegador), bastaria tirar do container o atributo width: 770px;. Se não tiver definida uma largura, a camada container se ajustará ao tamanho da janela do navegador que tenha o visitante.

Ademais, temos que dar uma margem ao BODY, para que o container não se acople por completo à borda da janela. Por exemplo, podemos dar uma margem de 10 píxels a cada lado.

Teríamos agora esta declaração de estilos para o BODY e a camada "container":

BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 10 10 10px;
text-align: center;
background-color: #ebebeb;
}
#container{
text-align: left;
margin: auto;
}

Construção CSS com duas colunas

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP