Tenho verificado em comentários de outros blogs que muitos perguntam como dividir um texto em duas colunas. O processo não é difícil, é só usar comandos div, como eu já tinha mencionado antes, quando estava dividindo o rodapé. Esse hack eu tinha visto primeiramente no Bloggerbuster tempos atrás, e desde então venho usando-o em vários widgets do meu blog.
Apesar de muitos já conhecerem essa técnica, sempre vai haver alguém perguntando sobre isso, e portanto, aqui vai a minha simples contribuição. Abaixo está um exemplo de um post dividido em duas colunas:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac augue. Quisque quis turpis. Donec risus elit, lacinia a, viverra porta, adipiscing non, lorem. Donec placerat tristique felis. Aenean vulputate eros eget augue. Suspendisse pellentesque pretium eros. Quisque fringilla. Integer nisl elit, blandit vitae, lacinia ac, molestie ac, lectus. Etiam sodales tincidunt sapien. Sed convallis nunc sed elit. Sed ac lacus vitae ligula faucibus tempor. Pellentesque dignissim commodo lectus. Curabitur varius urna in lectus. Maecenas ac dui ut velit bibendum dapibus. Maecenas eu nisi. Cras elementum. Donec congue quam et dolor. Aliquam ipsum sapien, viverra quis, cursus ut, mollis vitae, tortor. Phasellus posuere laoreet est.
Duis sollicitudin varius nisl. Pellentesque vel elit quis leo elementum aliquet. Proin cursus sapien eget diam. Sed velit. Quisque ac nunc eu neque pharetra tempor. Fusce condimentum dignissim dolor. In turpis purus, imperdiet ut, lobortis bibendum, porttitor sit amet, quam. Aenean sed neque sit amet leo iaculis faucibus. Suspendisse feugiat. Suspendisse auctor tortor sollicitudin urna. Integer bibendum turpis id ipsum. Pellentesque sed libero. Nunc fringilla, nisi in pulvinar adipiscing, eros lacus lacinia lorem, ac sollicitudin lectus magna in arcu. Praesent pulvinar, sem nec scelerisque vestibulum, nunc tortor tincidunt massa, at ultrices lorem nisl non metus. Mauris feugiat odio in diam.
O código a ser usado é esse:
Vocês podem ver o uso desse hack no meu header, abaixo do banner, em duas situações: na primeira, fiz quatro colunas para conter a citações, data, hora e as bandeirinhas de tradução; na segunda com o adsense e o search do Google.
Abaixo das postagens, vem o posts recentes por categorias, que também foi dividido da mesma maneira. E no rodapé, onde há duas colunas. Como podem ver, é muito prático!
Como o template foi alterado (e muito!) não tenho mais esse hack, mas sempre que quero fazer colunas eu o uso, até mesmo com imagens no lugar do texto, desde que elas sejam do mesmo tamanho.
Um outro método é usar tabelas com o comando table, mas não recomendo. Atualmente deixa o carregamento da página muito lento, e muitos preferem aboli-lo, o uso das tabelas teve o seu tempo e foi muito útil, hoje em dia devemos seguir os Padrões Web, já ouviu falar do movimento Tableless na internet? Esteticamente o uso de CSS é muito mais padronizado e a maioria dos navegadores se entendem com essa linguagem(menos o IE em alguns casos... Ahhhh maldito IE!), creio eu!
Espero que essa dica tenha sido de grande ajuda!
<div style="width: 45%; float: left;">COLOQUE AQUI O TEXTO
DA COLUNA À ESQUERDA</div>
<div style="width: 45%; float: right;">COLOQUE AQUI O TEXTO
DA COLUNA À DIREITA</div>
<div style="clear: both;"></div>
Como o template foi alterado (e muito!) não tenho mais esse hack, mas sempre que quero fazer colunas eu o uso, até mesmo com imagens no lugar do texto, desde que elas sejam do mesmo tamanho.
Um outro método é usar tabelas com o comando table, mas não recomendo. Atualmente deixa o carregamento da página muito lento, e muitos preferem aboli-lo, o uso das tabelas teve o seu tempo e foi muito útil, hoje em dia devemos seguir os Padrões Web, já ouviu falar do movimento Tableless na internet? Esteticamente o uso de CSS é muito mais padronizado e a maioria dos navegadores se entendem com essa linguagem(menos o IE em alguns casos... Ahhhh maldito IE!), creio eu!
Espero que essa dica tenha sido de grande ajuda!
