Problème de pied de page

06 déc. 2007, 12:01

Bonjour,

Cela fait des heures que je cherche à placer mon pied de page à la suite de mon DIV parent.
J'ai un div parent qui contient tout le contenu de ma page + un div footer qui se trouve en dehors du div parent.
J'ai pourtant essayé plusieurs solutions trouvé dans des tutoriaux.
Voici la structure...

Code : Tout sélectionner

<html>
<head></head>
<body>
<div>
"Contenu du div PARENT"
</div>
<div id="footer">
"Pied de page"
</div>
</body>
</html>

css

div {
width: 100%;
margin: 0 auto;
position: relative;
float: left;
}

div#footer {
position: absolute;
clear: both;
bottom: 0;
}

J'utilise des blocs séparés dans mon div parent, ce qui fait que celui-ci n'a pas une hauteur
clairement défini. C'est sans doute pour cela que je ne parviens pas a placer le div footer a la suite du div parent. J'ai essayé avec la propriété float et sans float.

N'y a t'il aucun moyen tres simple de faire en sorte que le div footer
viennent se placer automatiquement derriere le div parent quelque soit la hauteur
de ce dernier ? Merci pour votre aide.

06 déc. 2007, 12:53

Correction et amélioration :

Code : Tout sélectionner

<html>
<head></head>
<body>
<div id="main">
<!-- Contenu du div #main -->
</div>
<div id="footer">
"Pied de page"
</div>
</body>
</html>

Code : Tout sélectionner

#main {
float: left;
}
#footer {
clear: both;
}

Soit dit en passant, vu la structure HTML, je ne vois pas l'utilité d'un positionnement flottant pour le premier div.

De plus, vu la structure HTML, le div qui précède div #footer n'est pas son parent, mais un frère.

06 déc. 2007, 13:42

Correction et amélioration :
Code : Tout sélectionner
<html> <head></head> <body> <div id="main">  </div> <div id="footer"> "Pied de page" </div> </body> </html>

Code : Tout sélectionner
#main { float: left; } #footer { clear: both; }
Soit dit en passant, vu la structure HTML, je ne vois pas l'utilité d'un positionnement flottant pour le premier div. De plus, vu la structure HTML, le div qui précède div #footer n'est pas son parent, mais un frère.

Oui je savais que float ne servait à rien, mais comme je trouve pas la solution
j'ai tenté de le placer dans le code.
Alors en prenant tes améliorations ça ne change strictement rien au probleme.
Alors j'ai procédé ainsi...

Code : Tout sélectionner

<html>
<head></head>
<body>
<div id="main">
<!-- Contenu du div #main -->
</div>
<div id="footer">
"Pied de page"
</div>
</body>
</html>

Code : Tout sélectionner

#main {
width: 900px;
margin: 0 auto;
position: relative;
}
#footer {
height: 40px;
}

Précision, mon bloc #main à une largeur définie de 900px, il est donc centré sur l'écran,
du coup avec ce code le contenu du footer vient s'afficher en haut à gauche de l'écran
en dehors donc du div # main, qui lui reste bien au centre de l'écran.
Pourquoi le footer ne s'est-il pas affiché au bas de la page à la suite du div # main ?
La solution est pas loin, mais quelque chose m'échappe.

06 déc. 2007, 15:06

Bonjour bravegars,

As-tu un exemple en ligne pour que l'on puisse voir ?
S'il y a un problème, il doit se jouer autour du code que tu nous proposes.

07 déc. 2007, 11:12

Non je travaille avec easyphp, je prendrais un hébergement que lorsque le site sera fini.
Ce qui n'est pas prêt d'arriver vu les problèmes que je rencontre.
Moi qui croyais que c'était tres simple le xhtml/css, c'est surtout le gros bordel.
C'était bien plus simple avec les tableaux. ;o)

Apres plusieurs tests, je me suis aperçu qu'il était impossible de placer un div
à la suite d'un autre div, si le premier contient des positions absolues.
En effet, le second div vient se superposer au premier,
son contenu se place en haut a gauche au dessus du premier.

Je continue de chercher une solution, mais je crains qu'il n'en existe aucune.

07 déc. 2007, 13:39

Définir certains éléments en position absolue, cela signifie vouloir les faire sortir du flux normal de manière à ce qu'il n'aient aucune influence sur la mise en forme des autres éléments de même parenté.

Donc dans ton cas, s'ils chevauchent d'autres éléments, ou "prennent leur place", c'est sans doute parce que ces autres éléments sont de même parenté et définis dans le flux normal.

- As-tu réellement besoin de définir des positionnements absolus ?
- Peux-tu modifier la hiérarchie de tes blocs ?

Il y a certainement de nombreuses solutions, mais comme je te le disais précédement, sans un code plus complet sous les yeux, ça reviendrait presque pour l'instant à (te) conduire les yeux fermés...

07 déc. 2007, 17:01

C'était bien plus simple avec les tableaux. ;o)

En revanche, pour la maintenance et la mise à jour, c'est nettement plus compliqué avec les tableaux.

Même si tu travailles en local (soit dit en passant, je te conseille Wampserver, qui est plus réactif qu'EasyPHP lors des mises à jour de PHP, de MySQL ou de PhpMyAdmin

), tu peux toujours copier-coller la structure entière de ton code HTML si tu veux une aide efficace.

09 déc. 2007, 18:49

Résolu définitivement. Merci à vous tous.

Problème de pied de page

Qui est en ligne