Postado por Micox - Náiron J. C. G..

11 Setembro, 2006

Olá pessoal,

Hoje vou postar sobre uma técnica que desenvolvi para a resolução do problema de colunas com alturas iguais com CSS usando "display: table".

Diferente das técnicas mais comuns, faux columns e equals height, esta é uma técnica bastante simples e fácil de ser customizada.

Como no Brasil este assunto foi pouco abordado, eu achei que seria o primeiro a falar sobre isso. Porém, muitos sites gringos já abordaram o assunto: Roger Johansson, Position Everything, SnipSnap e lista com testes em navegadores (comigo não aconteceram alguns erros aí citados).

Bom, mas aqui no Brasil, acho que sou o primeiro a falar sobre isto e postar exemplos.

Antes, algumas prévias desta técnica de colunas com alturas iguais:

Estas 3 páginas foram testadas com sucesso no Firefox 1.5, Internet Explorer 6.0 e Opera 8.5.
Nível do tutorial: apenas para já iniciados nas Web Standards.

Agora vamos começar.

//Obs.: Misteriosamente, às vezes, um bug no Firefox faz com que a 3a coluna apareça na linha de baixo a primeira vez que a página é carregada. Se alguém puder me explicar, eu agradeço.

1. Os poderes do display: table, e display: cell

Poucos conhecem a declaração "display: table". Com ela (e suas variações "display: table-cell" e "display: table-row") o desenvolvedor pode simular características de tabelas. Não explicarei muito: desenvolvedores de qualidade já escreveram sobre isso.

E daí? E daí que você poderá usá-la para resolver alguns possíveis "problemas" no seu desenvolvimento CSS como: colocar o vertical align pra funcionar, dar altura a pai de elementos float, resolver problemas em menus horizontais, e agora servirá para fazer colunas com alturas iguais.

2. O código (X)HTML

2.1. Englobe com um div pai, as divs que deverão ter alturas iguais .
2.2. Neste div pai, coloque o id="cols"
2.3. Exemplo:

<div id="cols">
   <div>
      <p>Coluna 1 coluna 1 Coluna 1 coluna 1</p>
      <p><a href="http://elmicox.blogspot.com">El micox</a> El micox El micox</p>
   </div>
   <div>
      <p>Coluna 2 coluna 2 Coluna 2 coluna 2 </p>
      <p><a href="http://elmicox.blogspot.com">El micox 2 </a> El micox 2 El micox 2 </p>
   </div>
   <div>
      <p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
      <p><a href="http://elmicox.blogspot.com">El micox</a> El micox El micox</p>
   </div>
</div>

3. O código CSS

3.1. No div pai (id=cols), coloque um "display: table" nele.
3.2. Nas divs colunas filhas, coloque um "display: table-cell" e um "vertical-align: top".
3.3. Obs.: Alguns colocariam "display: table-row" no pai dos "display: table-cell" por considerarem que é mais correto (eu por exemplo), porém se colocarmos o table-row irá ocorrer um espaçamentozinho no Opera.
3.4. Exemplo (coloquei uma bordinha vermelha pra ficar mais fácil de visualizar):

#cols { display: table; width: 100%; }
#cols div { display:table-cell; vertical-align:top; border: 1px solid #F00;}

3.6. Tudo muito bonito, muito legal, menos no nosso velho amigo IE que não entende o "display: table". Para ele, teremos que usar algumas declarações dentro de comentários condicionais (use o hack estrela para IE se preferir).

3.7. Você acha que agora está tudo certo né? Errado. Se você declara corretamente o DOCTYPE você deve ter visto que estas regras para o IE não deixaram as alturas das colunas iguais. A solução? Faça os bugs do IE trabalharem pra você.
Se você colocar ele pra trabalhar em quirks mode, ele fará com que as alturas das divs filhas float fiquem iguais e fica tudo funcionando.
Como? Simples, adicione o prólogo XML no início do seu documento. Como o IE não entende o prólogo XML (que burrico hehe) ele irá começar a trabalhar em quirks mode e dará a nossas colunas, alguras iguais!!!

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3.8. Posteriormente, adicione declarações definindo a largura de cada div sua da forma que desejar.

4. O código completo.

Pra quem gosta de control C, control V, é só customizar o código abaixo:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#cols { display: table; width: 100%;}
#cols div { display:table-cell; vertical-align:top; border: 1px solid #F00;}
</style>

</head>
<body>
<div id="topo">Sou o topo blablabla</div>
<div id="cols">
<div>
<p>Coluna 1 coluna 1 Coluna 1 coluna 1</p>
<p><a href="http://elmicox.blogspot.com">El micox</a> El micox El micox</p>
</div>
<div>
<p>Coluna 2 coluna 2 Coluna 2 coluna 2 </p>
<p><a href="http://elmicox.blogspot.com">El micox 2 </a> El micox 2 El micox 2 </p>
</div>
<div>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
<p>Coluna 3 coluna 3 Coluna 3 coluna 3 </p>
<p><a href="http://elmicox.blogspot.com">El micox</a> <br /> El micox <br /> El micox</p>
</div>
</div>
<div id="rodape">Sou o rodape blablabla</div>
</body>

5. Finalizando

Eu não tive como testar esta técnica em vários navegadores. Se vc tiver testado, por favor, comente aqui.
Se tiver encontrado algum bug ou problema, me informe (pode ser nos comentários) para que possamos resolver :) .

Caso o conteúdo tenha quebrado para baixo no firefox, (o famoso bug do display table no firefox), veja as possíveis soluções aqui. Eu recomendo a solução do Chessman (mais sobre aqui).

Esta técnica de display table não está restrita à construção de layout inteiro da página. Você pode usar em outras coisas também, como citei no começo deste post.
Se algum site brazuca já falou sobre o assunto, poste aqui pra eu saber também.
Dúvidas? Jogue elas no iEvolution, não aqui.

Marcadores: menus, webstandards

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (17 comentários)

2 dicas rápidas - Bordas arredondadas e RSS no seu site

Postado por Micox - Náiron J. C. G..

04 Setembro, 2006

Duas dicas rápidas pessoal:

Um gerador de código de bordas arredondadas online
e um gerador de leitor de RSS no seu site.

Pra quem tem pressa é uma mão na roda.

Bordas arredondadas

Quem desejar implementar bordas arredondadas em seu site de forma rápida já tem um novo auxílio. É o spiffybox.

Com ele, voce especifica as características da sua caixa arredondada e depois segue as instruções.

Rápido e fácil.

Leitor de RSS

Que tal colocar notícias RSS de qualquer fonte em seu site/blog de forma fácil e sem perder dias programando?

Quem permite isso é o RSSinclude.

O script é customizável. Só não gostei que não é possível deixar só o título da notícia e excluir o conteúdo (com CSS deve ser possível, não testei).

Marcadores: dicas

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (6 comentários)