Pied de page toujours en bas avec Javascript et CSS

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Pied de page toujours en bas avec Javascript et CSS

footer.png C’est possible ? Parce qu’avec les tableaux… Tôt ou tard, ça ne rate jamais, la question revient sur le tapis de souris. Et là, de vous lancer dans une diatribe comme quoi ça ne sert absolument à rien de vouloir ce footer toujours en bas, que si on manque de contenu, on n’a qu’à en créer, etc. Certes, vous y croyez, et votre interlocuteur commence même à trouver que ce pauvre footer tout seul en bas a l’air de s’ennuyer ferme. Seulement, vous êtes un professionnel, et même si ça ne sert à rien, vous aimeriez bien trouver la solution ;)

Parmi les nombreuses manières permettant d’obtenir un pied de page qui se cale systématiquement en bas de page lorsque le contenu n’est pas suffisant, j’ai retenu deux méthodes intéressantes. C’est-à-dire n’utilisant pas trop de hacks afin d’optimiser la lisibilité et la maintenabilité du code.

  • La première, propose d’utiliser uniquement CSS : la propriété min-height appliquée au contenu, un padding-bottom pour l’élément avant le footer, et pour ce dernier, un margin-top de la même valeur, un commentaire conditionnel pour Internet Explorer, et c’est parti ! Sauf, qu’après des tests intensifs sur MacOSX et Windows, il s’avère que cette solution ne donne pas entièrement satisfaction sur tout les navigateurs (Opera Window et MacOSX et Safari), ce que je trouve gênant.
  • La deuxième, est une solution Javascript utilisant le DOM de façon particulièrement élégante. Le footer se trouve bien en bas de page, mais si l’on veut que la couleur de fond du contenu se propage jusqu’au pied de page, il nous faut trouver autre chose…

Après quelques hésitations, j’ai trouvé la voie en associant les deux méthodes : la fonction Javascript pour le placement du footer, et la propriété min-height ainsi que le commentaire conditionnel pour IE afin de gérer la couleur de fond.En prime, ce mix rend inutile l’ajout de #lastelement que je ne trouvais pas particulièrement élégant. Dans Opera et Firefox, le footer ne se cale pas en temps réel contrairement à Internet Explorer et Safari, ce qui n’est pas particulièrement gênant.

Je vous laisse avec la démo du pied de page toujours en bas.

Télécharger le fichier .html ou .php et les images

http://web.covertprestige.info/test/08-pied-de-page-en-bas-ecran-1.html
http://www.covertprestige.info/ressources
L’exemple de la première méthode utilisant uniquement les CSS, ainsi que d’autres astuces concernant la conception de site à l’aide des feuilles de style.
http://pompage.net/pompe/pieds/
Cet article propose d’étudier les méthodes pour positionner des pieds de page en respectant les standards.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “Pied de page toujours en bas avec Javascript et CSS”

  1. Cap° dit :

    J’irais presque jusqu’à dire que c’est LA fonctionnalité pertinante pour pour les CSS. Il ne manquait plus que ces exemples pour abandonner les tableaux définitivement !!!

  2. jno dit :

    Salut, j’ai pas trop compris à quoi servait le hack pour IE (je parle pour la 1ère méthode), je vois pas trop où l’intégrer en fait…

  3. burningHat dit :

    Tiens, y en a qui n’utiliserait pas encore Akismet par hasard ?!?!

  4. Bruno Bichet dit :

    Si si, j’utilise Akismet, mais il apparemment, il laisse passer pas mal de truc :(

  5. burningHat dit :

    Ah bon ? Chez moi il fait des merveilles ce plugin… étonnant !

  6. Bruno Bichet dit :

    Tu as de la chance ;) Mais apparemment, je ne suis pas le seul dans ce cas, et il s’agirait d’un spammeur plus malin que les autres.

  7. Alvin M dit :

    Ya de l’espoir, le script est pas encore au point.. quand la fenêtre n’est pas en plein écran le footer est décalé un peu vers le bas ce qui affiche une barre de défilement alors qu’il y a largement la place pour mettre le footer en entier… Et sur android quand on défile en bas le footer redescend encore

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site