Opa galera!
Hoje falarei sobre uma técnica legal, ela se chama Faux Columns(Colunas Falsas), muito legal quando queremos trabalhar com layout de duas colunas.
A técnica Faux Columns é muito utilizada. Consiste em simular a reprodução do fundo no layout da página mesmo que o espaço nem esteja sendo utilizado, dando a idéia de colunas falsas.
Vejam o código do layout sem a técnica.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Faux Columns – by aprendacss.wordpress.com</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#tudo {
width: 800px;
margin: 0 auto;
text-align: left;
}
#topo {
background-color: #AAC;
height: 200px;
}
#esq, #dir {
height: auto;
}
#esq {
float: left;
width: 200px;
background-color: #555;
}
#dir {
float: right;
width: 580px;
background-color: #F00;
}
#rodape {
clear: both;
background-color: #AAF;
height: 50px;
}
</style>
</head><body>
<div id=”tudo”>
<div id=”topo”> Topo </div>
<div id=”esq”>Esquerda<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id=”dir”>Direita</div>
<div id=”rodape”>Rodape</div>
</div>
</body>
</html>
Sem a Técnica
Para aplicar a técnica basta inserir esta parte aqui no código.
#tudo {
background: transparent url(fundo.jpg) repeat-y left center;
}
Olha como fica o código completo, agora aplicando a técnica.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Faux Columns – by aprendacss.wordpress.com</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#tudo {
width: 800px;
margin: 0 auto;
text-align: left;
background: transparent url(fundo.jpg) repeat-y left center;
}
#topo {
background-color: #AAC;
height: 200px;
}
#esq, #dir {
height: auto;
}
#esq {
float: left;
width: 200px;
background-color: #555;
}
#dir {
float: right;
width: 580px;
background-color: #F00;
}
#rodape {
clear: both;
background-color: #AAF;
height: 50px;
}
</style>
</head><body>
<div id=”tudo”>
<div id=”topo”> Topo </div>
<div id=”esq”>Esquerda<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id=”dir”>Direita</div>
<div id=”rodape”>Rodape</div>
</div>
</body>
</html>
Com a Técnica de Faux Columns
A imagem fundo.jpg é essa imagem aqui.
Filete do Fundo
Essa imagem é um filete que deve conter 800px de largura, tem esse valor pois é o valor que defini para o meu layout, e pode ser 1px de altura, para ficar mais leve, aqui coloquei maior apenas para vocês verem.
Pronto aqui foi aplicada e técnica de Faux Collumns, espero que gostem.
Até o próximo.
