28172 sujets

CSS et mise en forme, CSS3

{ position: absolute; bottom: 0; } Marche PAS !!!

Bonjour,
J'ai un probleme de pied de page (footer). j'ai lu des articles à ce propos etc...

Objectif : la div "footer" doit etre collée tout en bas (collée à la barre de status).
Problème : la div "footer" se place au milieu de la div "wrapper".

Voici mon code xhtml :



...
<body>
      <div id="wrapper">
             <div id="header"></div>
             <div id="content-wrapper">Trop de blabla avec des div dedans</div>
             <div id="footer">copyright et validations etc ...</div>
      </div>
</body>
...


Et voilà mon code css :


...
#footer {
     position: absolute;
     bottom: 0;
}

Modifié par M3hdi (10 Nov 2008 - 17:54)
Administrateur
Hello,

Oui en effet, c'est normal.

La FAQ a écrit :

Le média Web n'est pas paginé comme le média Print. Les concepts de page, de pied de page, etc., n'existent pas vraiment : sur un document web il n'y a pas de limite verticale ; on utilise l'ascenseur (barre de défilement vertical). Cette spécificité du média explique qu'il soit relativement difficile de créer un «pied de page» équivalent à ce que l'on trouve sur papier. Une solution simple pour régler ces histoires de pied de page est donc de s'adapter au média, et de laisser les informations et liens secondaires se placer naturellement à la suite du contenu de la page.

De plus, positionner un contenu tout en bas de page lorsque le reste du contenu de la page est court peut poser des problèmes d'accessibilité. Dans le cas où cela génère un espace vide entre la fin du contenu et le pied de page, un utilisateur de loupe d'écran ne verra probablement pas le pied de page, et pensera que ce vide correspond à la fin du contenu.

Modifié par Raphael (10 Nov 2008 - 17:58)
Pour positionner en absolute il faut que le div conteneur soit lui même position.
Par exemple pour ton wrapper:
position:relative;
left:auto;
top:auto;

Modifié par ThePatatoes (10 Nov 2008 - 18:26)
J'ai suivi cette FAQ avant que tu la postes ... c'est en effet une bonne FAQ, je l'ai appliqué,
et regardes le resultat :

upload/17977-Screenshot.png

comme remarqué, j'ai appliqué un border black au content-wrapper, le footer se place bien comme je le souhaite, MAIS reste en dessus de la div "content-wrapper" !!!
Sujet clos
Aller à