\\Geek.Candy Bug do rodapé

Postador por: Pedro Costa Neves @ 10/09/2009

Categorias: All, How To

Depois que finalizei o projeto, coloquei no ar e não testei em todos navegadores possiveis porque me deu uma baita preguiça, recebi relatos de usuarios de Safari e Chrome de que o rodapé ocupava só parte do que era pra ele ocupar, e no Firefox, ele se extendia conforme fosse o tamanho da tela do cliente :P

Esse é um problema pra todo webdesigner que tenta ou já tentou usar dois ou três imagens de background em uma mesma página.

A ideia inicial era colocar um background alinhado ao bottom da pagina, no html, por CSS, e um segundo background, que seria o topo do site, as nuvens, no body, por CSS também, alinhado ao centro e topo. Não deu certo, CSS2 tem um bug de position quando se tenta usar background alinhado ao bottom, você tem que colocar ele como position fixed senão nao aparece, logo quando você rola a pagina pra cima, o background vai junto.

Segunda alternativa, uma div footer com o background. Tá essa parece a melhor das ideias. Mais nao rolou, sei lá porque no Firefox ficava lindo e maravilhoso e nos outros navegadores não.

Tá, foi ai que ontem(quarta feira, 9 de setembro) eu, louco de antibiotico e anti-inflamatório, navegando caçando coisas sobre jquery e tecnicas de css3 novas me deparo com isso:
http://www.cssstickyfooter.com
A TECNICA SUPREMA E DEFINITIVA pra solucionar todos meus problemas e consertar o bug cretino do rodapé.
Super simples de aplicar, super útil e tudo!
resultado:

\Geek.Candy Geeks Going Wild_1252606264318

Rodapé perfeito! :D

Apesar de que, daqui algumas semanas ou sipá um mês ou dois, entra um layout novo lá, mais eu precisava muito aprender isso senão não ia ficar sussegado!

Sobre Pedro Costa Neves

Webdesigner, Wordpress Ninja, fundador do http://persocon.org e do http://geek-candy.com. Web Developer em Projetual Comunicação. Você pode entrar em contato comigo através da página de contato neste site ou pelo email neo[at]persocon.org.

2 Comentários para “\\Geek.Candy Bug do rodapé”

  1. Laís disse:
    13/09/2009 as 8:02 pm

    queria manjaaar de edição q nem vc :~~ ooow

    parabens pelo blog!

    [Reply]

  2. @Persocon disse:
    24/09/2009 as 6:53 pm

    [...] Aproveitando que este agora é meu playground e não mais meu portfólio oficial, apliquei técnicas de CSS3 que funcionam apenas em browsers como Firefox, Chrome e Safari. Apliquei também a técnica do Footer Sticky demonstrada no post anterior. [...]

Deixe uma resposta.