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:
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.
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®
Ir para a página de entrada nos sites dos livros.