Banner propaganda da DevMedia - Cursos de desenvolvimento web

Layout CSS de 2 colunas - 2a. Parte

Publicado em: 12/08/2005

[ « anterior ] [ próximo » ]

Layout fixo e centrado

Como você deve ter observado, nossa página base tem uma largura fixa e está centrada na tela independente da resolução. A técnica para obter este posicionamento com CSS está descrita com detalhes neste tutorial

Para centrar a página vamos criar uma DIV que chamaremos de #tudo e que englobe toda a marcação, vale dizer, que englobe o elemento body e a seguir adicionar as regras de estilo para centrar nossa página sem estilos.

Veja a seguir os acréscimos na marcação.

...............
<title>Meu blog Standard</title>
<style type="text/css">
body {
text-align:center;
}

#tudo {
width:720px; 
margin: 0 auto; 
text-align:left;
border:2px solid #000; 
/* coloquei uma borda provisória para 
facilitar a visualização */
} 
</style>
</head>
<body>
<div id="tudo">
...Conteúdo da página ...
</div>
</body>
</html>

Veja o efeito destas regras na página base.

Margens e fontes

Nosso próximo passo será definir a cor e o tamanho da fonte para a página em geral bem como zerar as margens e padding de body igualando as margens padrão para todos os navegadores.

Veja a seguir os acréscimos destas regras

...............
<title>Meu blog Standard</title>
<style type="text/css">
body {
text-align:center;
margin:0; 
padding:0; 
font: 80% Arial, Helvetica, sans-serif; 
color:#800000;
}
...
</style>

Veja o efeito destas regras na página base.

As áreas do layout

Nosso próximo passo será definir as DIVs para cada uma das áreas do layout a saber:

topo - #topo;
coluna secundária de links - #secundaria;
coluna do conteúdo principal - #principal;
rodapé - #rodape.

Veja a seguir os acréscimos na marcação e na folha de estilos.

...............
<title>Meu blog Standard</title>
<style type="text/css">
.........
#topo {
height:150px; 
background:#2a7d00; 
color:#fff; 
}
#secundaria {background:#d1c9ab;}
#principal {background:#fff6d1;}
#rodape {background:#2a7d00; color:#fff;}
</style>
</head>
<body>
<div id="tudo">

<div id="topo">
Título do site  e busca
</div>

<div id="secundária">
Perfil,Recente,Arquivo,Blogroll,Parceiros
</div>

<div id="principal">
Comentários
</div>

<div id="rodape">
Rights e Selos
</div>

</div>
</body>
</html>

Veja o efeito destas regras na página base.

Posicionando as colunas

Vamos a seguir posicionar as colunas, uma ao lado da outra.
Adotaremos para a coluna secundária uma largura de 220px e para a principal 500px que somados resultam em 720px que foi a largura estabelecida para a página.

Usaremos a propriedade float com o valor left.
Declarar float para para várias DIVs em sequência faz com elas "flutuem" como se fossem balões de gás até atingir o 'teto' que é demarcado pelo fundo do(s) elemento(s) que as antecede. As DIVs flutuadas vão se posicionando uma ao lado da outra até que a soma de suas larguras não ultrapasse a largura total disponível no "teto". A partir daí, começa outra camada abaixo da anterior e assim sucessivamente.

Imagem mostrando a regra CSS float left

Para a nossa página base "flutuaremos" apenas duas DIVs; #secundária e #principal e elas iram tocar o elemento que as antecede no código e que é a DIV #topo, exatamente o que pretendemos. Como adotamos uma largura total para a página de 720px vamos estabelecer a larguras das duas DIVs em #secundaria = 220px e principal = 500px.
A soma 220px + 500px = 720px e elas ficarão uma ao lado da outra ocupando toda a largura página.

Alerta: Navegadores não complacentes com as Web Standards costumar adotar comportamento estranho com relação a eventuais margens em elementos flutuados e uma série de outros "bugs" mais complexos em floats.

Vamos também nesta fase, retirar a borda provisória de 2px que havíamos colocado anteriormente para fins de facilitar a visualização. Se você não tirar a borda, a largura para "flutuar" será de 720px - 2px - 2px = 716px e a segunda DIV flutuada irá para baixo da primeira, por não haver largura suficiente para as duas.

Para fazer com que o rodapé permaneça abaixo da coluna mais comprida, seja ela a #secundária ou a #principal, devemos declarar float:both para o rodapé.

Veja a seguir os acréscimos na folha de estilos.

...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
#tudo {
width:720px; 
margin: 0 auto; 
text-align:left;
/* border:2px solid #000; */
/* coloquei uma borda provisória para 
faciliatar a visualização */
} 
#secundaria {
width:220px;
float:left;
background:#d1c9ab;
}

#principal {
width:500px;
float:left;
background:#fff6d1;
}

#rodape {
background:#2a7d00; 
color:#fff; 
clear:both;
}
..............

Veja o efeito destas regras na página base.

Estudos adicionais

Sugiro que você copie para seu HD o código fonte da página base que acabou de visualizar e faça algumas experiências para entender o funcionamento das regras float:left; - clear:both; e outras a sua escolha.
Altere as regras de estilos e veja o resultado no navegador.
A seguir sugestões para você alterar. Mas, atenção, altere os itens sugeridos na cópia original, um de cada vez, ou seja, altere, salve o original com outro nome e vizualize. Repita para cada alteração sugerida.

  • aumente width das colunas, uma de cada vez;
  • diminua width das colunas, uma de cada vez;
  • retire clear:both do rodapé;
  • tire conteúdo da coluna principal fazendo com que ela fique menor que a secundária e repita as três alterações acima;
  • e outras a sua escolha.

Nota: As vizualizações diferem conforme o navegador usado. Os mozillas, e outros navegadores standards, interpretam corretamente as regras, mas o IE interpreta à sua maneira. No final faremos as visualizações idênticas, com uso de alguns poucos "hacks" simples.

[ « anterior ] [ próximo » ]

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo