quarta-feira, 3 de setembro de 2008

Colunas no rodapé usando comando divs

Vocês já notaram que eu estava fazendo um teste colocando 2 colunas no rodapé do blog de acordo com esse tutorial do Compulsivo, mas ele estava me causando muitos problemas, por causa da imagem de fundo, que no rodapé original tem cantos arredondados e eu não conseguia colocar uma imagem semelhante. tentei até pegar a imagem original e deixar do tamanho de cada coluna mas ela ficava com uns cortes totalmente estranhos, e muitas vezes não se ajustava aos elementos que eu tinha colocado. Ou seja, abandonei a idéia de colocar um rodapé diferente.
Navegando por vários blogs, especialmente o Bloggerbuster, encontrei uma maneira meio que parece uma gambiarra, mas que a princípio está funcionando, conforme vocês podem ver lá em baixo, no rodapé.
Nesse artigo, a Amanda ensina como fazer um arquivo de páginas em um post para deixar como um link na barra de menu horizontal acima no blog. Um detalhe que me interessou: na postagem ela dividiu o texto em duas colunas!

Minha cabeça começou a divagar... Bem, usando as divs eu poderia criar 3 ou 4 colunas manualmente. Então comecei a trabalhar: As divs são essas:
<div style="width: 45%; float: left;">Colocar aqui o conteúdo da coluna esquerda</div>

<div style="width: 45%; float: right;">Colocar aqui o conteúdo da coluna direita</div>

<div style="clear: both;"></div>
Como eu queria colocar três colunas, o código ficou assim:
<div style="width: 33%; float: left;">Colocar aqui o conteúdo da coluna esquerda</div>

<div style="width: 33%; float: right;">Colocar aqui o conteúdo da coluna central</div>

<div style="width: 33%; float: right;">Colocar aqui o conteúdo da coluna direita</div>

<div style="clear: both;"></div>
Não ficava legal uma porcentagem menor no tamanho. As colunas ficavam desajustadas, então percebi que o melhor seria mesmo dividir por três o tamanho total(100%). Outra coisa, não existe um float: center, pesquisei pela internet e realmente esse comando não existe, logo a solução é repetir o left(esquerda) ou o right(direita).
Eu queria colocar os posts recentes, comentários recentes, o comentaristas e informações do blog, e decidi então usar 4 colunas, cada uma com porcentagem de 25%, além disso, acrescentei os títulos para cada coluna usando a tag h2 e ajustei o código dessa maneira:
<div style="width: 25%; float: left;"><h2 class="Posts Recentes-title">Postagens Recentes</h2>Colocar aqui o conteúdo da coluna esquerda</div>

<div style="width: 25%; float: left;"><h2 class="Posts Recentes-title">Comentários Recentes</h2>Colocar aqui o conteúdo da coluna centro-esquerda</div>

<div style="width: 25%; float: right;"><h2 class="Informações-title">Informações</h2>Colocar aqui o conteúdo da coluna centro-direita</div>

<div style="width: 25%; float: right;"><h2 class="Top10 - Comentaristas-title">Top 10 - Comentaristas</h2>Colocar aqui o conteúdo da coluna direita</div>

<div style="clear: both;"></div>
O resultado pode ser visto abaixo no rodapé do blog. Não é algo estético mas dá para o gasto até eu conseguir fazer um template do meu gosto. O importante é que meu aprendizado em CSS continua bombando. Percebi que a coisa não é um bicho de sete cabeças. Como tudo na vida, o negócio é querer aprender e se concentrar. Como eu sou um auto didata, amo muito tudo isso... Ops, me deu vontade de ir ao McDonalds... Amanhã irei com toda certeza. Photobucket

Um detalhe importante: Esse post foi feito totalmente no novo editor de textos do Blogger in Draft, que eu ainda não tinha usado porque não tinha principalmente  o justify e eu me sentia totalmente perdido, eu acabava sempre usando o editor antigo. Photobucket

Até mais pessoal!!! Photobucket

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google