Vou partir de um layout de colunas típico para o nosso projeto prático. Antes de apresentar este projeto ao vivo e a cores, gostaria de vos mostrar concretamente como podem implementar layouts de colunas. O foco aqui serão os layouts de duas e três colunas, afinal, estes continuam a ser a base da maioria dos websites.
O clássico absoluto do design web deve ser o layout de duas colunas. Na área à esquerda é normalmente apresentada a navegação, enquanto na coluna à direita é possível ver o conteúdo real. No contexto dos blogs, este comportamento tem mudado um pouco. Na verdade, em muitos blogs, à direita é exibida a navegação ou publicidade, enquanto à esquerda é apresentado o conteúdo real.
Essas aplicações podem ser implementadas de forma relativamente simples em CSS. De fato, as de duas colunas são a forma de layout mais simples.
No seguinte exemplo, vou mostrar uma de duas colunas que usa valores absolutos percentuais.
Aqui está o exemplo completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Layout com posicionamento absoluto</div>
<div id="nav">Navegação</div>
<div id="main">Esta é a área de conteúdo</div>
<div id="footer">Aqui estão as informações de direitos autorais</div>
</body>
</html>E assim é como aparece no navegador:
Vocês podem facilmente deslocar a coluna da esquerda para a direita. Para isso, ajustem as seguintes instruções:
• Em #nav, alterem o valor de left: 0 para right: 0.
• Em #main, simplesmente mudem margin-left para margin-right.
Após as alterações serem salvas, o resultado desejado é visível.
O layout mostrado com base na posição absoluta tem um problema: se o conteúdo da coluna da esquerda se tornar mais extenso, ele ultrapassará a área do rodapé.
Isto acontece simplesmente porque para elementos posicionados absolutamente, não é reservado espaço. É possível contornar o problema inserindo conteúdo correspondente à largura do elemento principal na seção principal, mais longo do que na coluna da esquerda.
Deveriam utilizar este tipo de layout apenas se estiverem certos de que a área principal é realmente mais alta do que a coluna esquerda (ou direita).
Um layout de duas colunas com float
O problema anterior com a sobreposição na área do rodapé pode ser resolvido através do uso da propriedade float. A sintaxe alterada é a seguinte:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Layout com posicionamento absoluto</div>
<div id="nav">A área de navegação</div>
<div id="main">Esta é a área de conteúdo</div>
<div id="footer">Aqui estão as informações de direitos autorais</div>
</body>
</html>Ambas as colunas foram equipadas com a propriedade float. Com isso, as colunas agora estão dispostas lado a lado.
A coluna da esquerda foi atribuída uma largura de 20 por cento. Prestem especial atenção ao facto de que um elemento posicionado com float realmente espera sempre uma especificação de largura.
A área de conteúdo real recebe uma largura de 80 por cento. Esta área também é posicionada com float: left, fazendo com que seja exibida ao lado da coluna da esquerda.
Para que a área do rodapé seja sempre visível na parte inferior da janela -- ou seja, abaixo das colunas -- é utilizada a seguinte sintaxe:
#footer {
clear: both;
}
Já tinha mencionado a possibilidade de definir uma classe própria para esta variante.
Um layout de três colunas com float
Também o layout de três colunas é uma variante popular no design web. Uma divisão típica seria a seguinte:
• A coluna da esquerda contém a navegação.
• Na coluna do meio está o conteúdo real.
• À direita, são exibidas informações adicionais ou publicidade.
A seguir, têm um exemplo de um layout de três colunas flexível. A sintaxe é semelhante à do layout de duas colunas mostrado anteriormente, mas agora com um div adicional chamado right, que representa a coluna da janela à direita.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout com posicionamento absoluto</div>
<div id="nav">A área de navegação</div>
<div id="main">Esta é a área de conteúdo</div>
<div id="right">Esta é a coluna direita</div>
<div id="footer">Aqui estão as informações de direitos autorais</div>
</body>
</html>
O novo espaço recebeu uma largura de 20 por cento. Dessa forma, a distribuição é a seguinte:
• As colunas esquerda e direita ocupam 20 por cento cada do espaço de visualização disponível.
• A coluna central tem uma largura de 60 por cento.
Pela sintaxe mostrada, a coluna right é realmente exibida à direita.
A sintaxe é flexível neste ponto. Vocês podem ajustar a coluna main da seguinte maneira:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Aqui o float foi definido como right. Isso faz com que a coluna right se mova para a esquerda.
Neste tutorial, vocês viram como é fácil definir layouts básicos com base no float. Este conhecimento agora serve como base para a construção de um site. Nos próximos tutoriais, um site será desenvolvido passo a passo, começando com a estrutura básica.
