[Résolu] Mettre mon footer à menus tout en bas de la page

Bonjour, je suis toute nouvelle ici, mais ça fait longtemps que je connais ce site puisque je suis déjà venue à plusieurs reprises pour me documenter sur XHTML et CSS pour mes projets.

J'ai commencé à apprendre le XHTML/CSS vers la fin de 2006 et je fais du graphisme avec GIMP depuis le printemps 2006. Ça ne fait qu'à peine un an que je fais plus activement des webdesigns partis d'une plaques puis découpés et codés.

Mainenant, voici ma situation : J'ai présentement une commande de charte graphique pour un projet de site pro de quelqu'un que je connais. J'ai fait l'essentiel de la charte graphique sous GIMP en partant d'un style que le copain m'a montré, puis j'en suis au codage qui est presque terminé.

Le seul hic, c'est que quand la page est courte, le footer ne se rend pas en bas, et le copain en question le veut en bas. J'ai bien fait une recherche, mais les astuces que j'ai trouvées comme celle du positionnement absolu fonctionne très mal pour un footer composé de deux éléments <div> gérant le graphisme (l'un faisant le haut, et l'autre faisant le bas qui se répète) et qui, en plus, est un footer de type Web 2.0 avec des menus côte à côte

Voici donc la démo, à visionner avec Firefox de préférence puisque je n'ai pas encore testé sous IE : http://ishimaru-design.servhome.org/tests/webopresto/index.html
Et le CSS : http://ishimaru-design.servhome.org/tests/webopresto/style/style.css
Ceci, c'est avant de tenter toute méthode pour coller le footer en bas de la page.


Voici ensuite une capture de ce que ça fait quand j'essaie la méthode du positionnement absolu :

Donc si quelqu'un a une solution pour que le "collage du footer en bas" fonctionne correctement sans bug graphique, je suis preneuse, et si vous avez Firebug pour tester directement, ce sera encore mieux.

Merci d'avance.

Ishimaru, directement de la Côte-Nord, au Québec

PS : Et désolée pour les tailles de texte fixes, mais vu qu'il s'agit d'un design à largeur fixe (ça m'était demandé), ça devient très délicat de permettre l'agrandissement pour certaines parties comme la connexion rapide, et la seule solution que je verrais, c'est un système de sélecteur de styles géré par cookie et qui ne dépend pas du JS pour fonctionner, et de cette façon, ça me permettrait d'ajuster la charte en fonction des tailles des textes dans les styles alternatifs. C'est ce que je lui proposerais pour pallier à cette problématique. Il se débrouille très bien en PHP, c'est seulement le CSS qui est sa grosse bête noire malgré les tutos.
Modifié par IshimaruChiaki (30 Jan 2010 - 19:45)

Bonjour,
peut-être qu'en définissant votre footer en css:
{
display: block;
width:_px;
height:_px
}
ce serait une bonne solution pour le contraindre à ne plus être aléatoire. Non?

Je ne me souvenais pas de ça mais visiblement, la position absolue "wrap" ton container à son plus petit possible, d'où le problème graphique. Donc je n'ai qu'ajouté une dimension fixe à ton footer et ça fonctionnait. Il faut que tu mettes un padding sur ton conteneur si tu ne veux pas que ton footer chevauche le contenu. Suffit d'ajuster le padding selon la hauteur que tu souhaites avoir pour ton footer.

J'ai testé en ajoutant ceci aux CSS actuel.

#conteneur { position:relative; padding-bottom:100px; }
#footer { 
   position:absolute;
   bottom:0;
   left:0;
   width:1010px;
}

J'espère que ça règle ton problème.

Merci, mais le footer ne veut toujours pas se coller en bas. De plus, même si j'ajuste pour aller avec ma résolution (1280*1024), qu'en est-il des résolutions plus grosses comme 1600*1200 ou bien d'un visiteur ayant la même résolution que moi, mais que la fenêtre d'affichage de son navigateur est plus grande (haut de la fenêtre plus épuré que le mien) ?

Ce grand espace vide gris en bas de la notice de copyright, c'est en fait le bloc #height-fix que j'avais mis pour prolonger la répétition de l'image de fond du footer jusqu'en bas. le footer s'arrête en réalité tout juste après la notice de copyright.

Pour que vous puissiez mieux voir de quoi je parle, je mets ce div #height-fix et son CSS entre commentaires pour désactiver ce prolongement : http://ishimaru-design.servhome.org/tests/webopresto/index.html

Personnellement je trouve votre page de démo satisfaisante ...

Et si vous fixiez le footer à 0px du bas de la page, va-t-il quand même s'élargir vers le haut? En créant un id="footer1" spécialement pour cette page "trop courte":

#footer1 
{
display:inline;
position:fixed;
bottom:0;
background:transparent url("footer-repeat.png") repeat-y top center;
}

Et pour les autres pages plus longues, revenez à id="footer".

Sinon, il y a le sticky footer qui marche bien :

http://ryanfait.com/sticky-footer/
Modifié par loicbcn (30 Jan 2010 - 11:14)

En effet, la solution du stycky footer est lumineuse: rallonger la page vers le bas d'autant de px de la hauteur du footer pour le refouler de sa propre hauteur vers le haut!

...

Pas idiot la solution du sticky footer, je ne connaissais pas. Je ne pensais pas qu'utiliser un margin-bottom négatif sur un élément en min-height: 100% aurait cet effet.

Une technique presque similaire, mais qui utilise le positionnement absolu:
http://covertprestige.info/css/page-hauteur-100/

Bonjour,

A propos du sticky footer (génialement simple) une chose m'intrigue :

min-height: 100%;
height: auto !important;
height: 100%;

La mention en rouge n'est-elle pas anulée par la suivante ? Est-ce un genre de hack pour un navigateur ou un autre ?

Aureance a écrit :
La mention en rouge n'est-elle pas anulée par la suivante ?

Non, à cause du mot-clé !important.

Aureance a écrit :
Est-ce un genre de hack pour un navigateur ou un autre ?

Un hack pour IE6 qui exploite le bug suivant:
http://covertprestige.info/css/ie6-important/

Le but est d'adresser à IE6 uniquement un height:100%, en partant du principe que:
- IE6 ne comprend pas min-height;
- par contre il interprète plus ou moins height comme une hauteur minimale (avec des différences liées à l'utilisation d'overflow).

Je pensais n'avoir pas le temps pour tester, mais finalement, mes parents attendaient que le lavage de leur édredon finisse avant qu'on parte.

Là je viens de tester, et après quelques ajustement, ça marche nickel et j'ai même testé en redimensionnant la fenêtre du navigateur pour avoir un aperçu en 1024*768 !

Pour les besoin du footer à menus, j'ai eu à passer à 9em.

Résultat : http://ishimaru-design.servhome.org/tests/webopresto

Problème donc résolu ! Merci beaucoup pour l'aide, je vais pouvoir continuer la suite du codage et de la création des objets graphiques pour les différentes pages !

Ishimaru

Ainsi, le min-height [+IE] et le sticky footer sont solutions géniales ...

('suis ravi d'avoir appris qqch d'aussi générique et précieux!)

Ben moi, je viens de refaire tout l'exemple de Florent V parce que j'avais déjà utilisé une méthode similaire mais sans la div "finale" en visibility: hidden. Ca va mieux que mon truc ou je mettais un padding dans la div "centre". Demain si j'ai un peu de temps, je m'attaque au sticky footer.

P.S. à FV : j'aime bien ton site…