Publicado por: Paulo Fernandes | 4/set/2008

Faux Columns – Simulando Colunas

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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

Com a Técnica de Faux Columns

A imagem fundo.jpg é essa imagem aqui.

Filete do Fundo

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.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: