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

8 comentários:

  1. Você poderia usar tabelas para separar cada elemento, se não estou enganado

    Valews

    ResponderExcluir
  2. Oi, Anônimo, eu já estava pensando nisso, mas por favor, identifique-se!!! É feio se esconder assim... :o)

    ResponderExcluir
  3. Que belessa de dica cara !! muito boa !!

    mas aki...
    porque vc n coloka a forma de comentarios inbutidos na postagen e melhor sem ele me dismotiva a publicação dos coments, ai pensei que talvezs não gostase dele então eu encontrei uma forma de deixar o link para postar o comentario e o na forma imbutida, ou seja os dois ! :D kualker coisa me fala que eu mando o link


    cara esse tuto e perfeito obg graças a isso minha personalização do blogger vai ser ainda maior !

    Thank's!

    ResponderExcluir
  4. Gama: Não entendi muito bem o que você quis dizer, depois dou uma olhada.

    ResponderExcluir
  5. um... assim, e que vc não coloca o formulario de comentarios imbutido... que eu prefiro rsrsrs

    porque este da pop p e xatoo d+++

    ai eu axei em um blog uma forma de manter os dois (o modo inbutido e o link para janela pop up) o que talvez fosse interessante para voce sakou agura?

    ^~

    ResponderExcluir
  6. Gama: O problema do formulário embutido é que não tem a opção de receber as atualizações por e-mail. Quando o Blogger disponibilizar esse recurso(que vai ser logo, pelo que li no Blog do Blogger in Draft) ai eu colocarei.

    Um abraço!!!

    ResponderExcluir
  7. Mano maravilha cara, ta 100%. Testei varios mas só esse ficou perfeito. Bom post colega.

    ResponderExcluir
  8. @Mjkla


    Obrigado. Na época desse post eu estava com outro template. Mas pelo jeito, isso não impediu o entendimento.
    Valeu!!!

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Artigos recentes

Related Posts with Thumbnails
Google