Templates com Layout de 3 colunas

Vimos no artigo anterior como fazer um layout de 2 colunas de forma fácil e simples. Agora vamos fazer um Templates de 3 colunas usando o código anterior.
Você precisará adicionar apenas dois elementos dentro da div conteudo.

<div id="conteudo">
<div id="conteudo_principal">
.....
</div>
<div id="segundo_menu">
.....
</div>
</div>

A CSS fica assim agora:

#conteudo {
width: 520px;
float: right;
}

#conteudo_principal {
width: 320px;
float: left;
}

#segundo_menu {
width: 180px;
float: right;
}

#navmenu {
width: 180px;
float: left;
}

#rodapé {
clear: both;
}

O que fizemos foi:
Pegamos o layout de 2 colunas e dividimos o elemento DIV conteudo em duas partes, DIV conteudo principal e DIV segundo_menu. Com isso o conteúdo principal do site ficou em primeiro lugar no fluxo do documento XHTML e os buscadores indexarão melhor seu site.
Existem outras forma de se fazer isso usando margens negativas, mas este assunto será abordado em artigo futuro.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Templates com Layout de 2 colunas sem complicações

Layouts de 2 colunas são fáceis e simples de se fazer. Mas, uma coisa que todos deve prestar atenção ao fazer layouts em CSS, é no conteúdo principal. O conteúdo principal deve estar sempre em primeiro lugar no fluxo do documento XHTML.
Fazendo isso, o Google sempre encontrará seu conteúdo principal e não seus menus em primeiro lugar.
A partir de um layout de 2 colunas será possível criar um de 3 colunas apenas mudando poucas coisa no código. Vamos então por a mão na massa:
Você vai precisar deste código XHTML:

<div id="moldura">
<div id="conteudo">
.....
</div>
<div id="navmenu">
.....
</div>
<div id="rodape">
.....
</div>
</div>

Veja que o conteúdo principal vem primeiro no documento, depois o menu e no final o rodapé.

A CSS para o layout vem a seguir:

#conteudo {
width: 520px;
float: right;
}

#navmenu {
width: 180px;
float: left;
}

#rodapé {
clear: both;
}

Veja como ficará na figura acima.
Lembre-se das dimensões dos elementos para não forçar a moldura.
Para se criar um template de 3 colunas usaremos este mesmo código e verá que criação de templates de 3 colunas são simples, mas isso fica para o próximo artigo.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Propriedade Clear resolve problemas de flutuação

Como vimos no post anterior, elementos flutuantes são removidos do fluxo do documento e não exercem nenhum efeito sobre os elementos adjacentes. Mas aplicar a propriedade clear a um elemento abre um espaço vertical para todos os elementos flutuantes anteriores.
Está propriedade ajuda e muito em layouts e resolve problemas de layouts que foram criados com a propriedade position:absolute que trataremos em artigos futuros.
Suponhamos que você deseje criar um layout de 3 colunas. Você usaria um DIV Contêiner (para abrigar suas DIVs), um DIV menu esquerda, DIV conteúdo e DIV menu direita.
Vamos ao exemplo:

Código XHTML
<div id=”moldura”> -- este é o DIV contêiner
<div id=”menuesquerda”></div>
<div id=”conteudo”></div>
<div id=”menudireita”></div>
</div> -- fim da moldura

Código CSS
#moldura {
width:800px;
margin: 0 auto;
padding::0;
}

#menuesquerda {
width:200px;
float:left;
padding: 5px;
margin:0;
}

#conteudo {
width: 400px;
float:left;
padding:0;
margin:0;
}

#menudireita {
width:200px;
float: right;
padding:5px;
margin:0;



Veja o que acontece em tempo realmente quando você flutua um elemento na imagem abaixo.
O elemento moldura está vazio pelas flutuações dos divs. Se você colocar uma cor de fundo no DIV moldura verá que não surtirá efeito algum, pois ele está sem conteúdo pelos floats dados aos elementos dentro dele.
E como fazemos para a DIV moldura inclua os elementos flutuantes? Existem duas maneiras de se fazer isso. Particularmente não vou entrar em detalhes das duas, mas sim da que eu acho mais limpa e segura para todos os navegadores. Iremos utilizar a propriedade CLEAR. Infelizmente, não temos um elemento para aplicarmos a propriedade CLEAR neste documento. Então criaremos um elemento vazio para termos o resultado que queremos. Uma DIV vazia CLEAR.

Código XHTML
<div id=”moldura”> -- este é o DIV contêiner
<div id=”menuesquerda”></div>
<div id=”conteudo”></div>
<div id=”menudireita”></div>
<div class=”clear”></div>
</div> -- fim da moldura

Código CSS
#moldura {
width:800px;
margin: 0 auto;
padding::0;
}

#menuesquerda {
width:200px;
float:left;
padding: 5px;
margin:0;
}

#conteudo {
width: 400px;
float:left;
padding:0;
margin:0;
}

#menudireita {
width:200px;
float: right;
padding:5px;
margin:0;

.clear {
clear: both;}




Temos o resultado que queremos mas a custa de marcação e código estranho. Se no caso existisse um rodapé no documento aplicaríamos clear:both; nele mas quando não houver haverá a necessidade de adicionar marcação não semântica no código. Use uma classe para CLEAR que poderá usala em várias partes do documento. Leia sobre Ids e Classe.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Flutuação - Entenda tudo e como acontece

Antes de entender como são feitas as flutuações, você precisa entender como é o fluxo normal do documento, quando você inseri um elemento em uma página XHTM. Caixas flutuantes não existem no fluxo normal de documento. Se você entender isso, antes de flutuar qualquer DIV, evitará várias dores de cabeça com seu código CSS no futuro.



Na figura acima, quando você flutua a Caixa 1 à esquerda, ela é removida do fluxo do documento e se move para esquerda até sua borda esquerda tocar a borda esquerda do bloco que a contém (DIV contêiner). Como não está mais no fluxo, ela não ocupa mais espaço no documento e fica em cima da Caixa 2.



Se fizer as três flutuarem à esquerda a Caixa 1 será deslocada para esquerda até tocar a caixa que a contém, e as outras até tocarem as caixas flutuantes anteriores.



Tome cuidado com as medidas das caixas (Contêiner). Caso não haja espaço horizontal suficiente, a caixa flutuante não se alinhar ao lodo da caixa anterior e ficar embaixo da caixa 1 ou pode ficar presa.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email