Ir para o conteúdo

Técnica "faux Columns" Para Layouts Css


Criado por Giovani, Out 26 2010 20:21

Não há respostas para este tópico
  • Por favor, faça o login para responder

#1 Giovani

Giovani
  • Giovani
  • Colaborador
  • 44 Revisões

Revisou 26 outubro 2010 - 20:21

Técnica "Faux Columns" para layouts CSS

Objetivo:
Vamos criar uma solução alternativa para que colunas com conteúdo menor acompanhem outras que tenham mais informações, evitando dessa forma que o layout fique "quebrado" em determinadas regiões.

Nível de dificuldade:
Intermediário

Conceitos necessários:
Para acompanhar este tutorial, foram utilizados os exemplos deste artigo: Layout fixo 3 colunas.

Iniciando:
A técnica "Faux Columns" foi "criada" por Dan Cederholm, e significa "Falsas Colunas". Consiste em simular a cor de fundo das colunas usando, ao invés da propriedade background-color, uma imagem de fundo.

Acompanhando o artigo Layout fixo 3 colunas, nos deparamos com a seguinte situação:

Imagem postada

Observe à direita que a div "menu" possui um fundo de cor verde (background-color: #cfc). Mas ela não acompanha a div "conteudo", nem a div "noticias", que "empurrou" a div "rodape" deixando esse branco abaixo do nosso menu.
Para exemplificar ainda mais, imagine que o contéudo da div "conteudo" fosse maior que o da div "noticias" e/ou da div "menu". Teríamos a seguinte situação:

Imagem postada

Veja este exemplo on-line.

Diante disso podemos concluir que as colunas crescem de maneira independente uma da outra, dependendo de seu conteúdo, e se as mesmas possuírem ainda uma cor de fundo específica, o layout poderá se "quebrar", conforme exemplos acima.

Então, para corrigirmos isto, vamos utilizar a técnica "Faux Columns". Primeiramente, vamos analisar a imagem que será utilizada:

Imagem postada

Observe que ela possui a mesma largura do nosso layout (700px), e possui duas áreas de 150px, uma em cada ponta da imagem. Essas áreas correspondem ao fundo das divs "menu" e "noticias". Vamos aplicá-la em nosso layout, adicionando a seguinte linha ao CSS:
#tudo {
	width: 700px;
	background: url(faux_columns.gif) repeat-y;
}
Informamos que a div "tudo" terá uma imagem de fundo chamada faux_columns.gif e que a mesma se repetirá no sentido vertical (repeat-y).

Pronto! Veja o exemplo final.

Considerações finais:
Podemos ainda eliminar as seguintes propriedades do nosso código:

#menu {
float: left;
width: 130px;
padding: 10px;
background-color: #cfc;
}

#noticias {
float: right;
width: 130px;
padding: 10px;
background-color: #ccc;
}

Como a imagem utilizada possui essas cores, não precisamos declará-las através da propriedade background-color. A própria imagem se encarregará de simulá-las.

Testado nos navegadores:
Internet Explorer 6
Firefox 2.0
Opera 9.20

Apoio:
Layout CSS de 2 colunas com faux column

-----
Autor: Paulo de Tarso F. M.




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)