Une div centrale qui glisse sous un le footer...?

Bonjour à tous et déjà bravo pour ce forum et ce site sympa et clair!!
Voilà mon problème: je suis en train de refaire un site et la page se compose de trois div: un header, un contenu et un footer. Je voudrais qui le header et le footer restent fixes, visible tout le temps sur l'écran, tandis que le contenu défile et "glisse" entre eux.
J'y suis presque arrivé avec ça: (code CSS)

#haut {
background-image: url(composants/haut800.png);
background-position: center;
background-repeat: no-repeat;
height: 206px;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
z-index: 2;
}

#contenu {
width: 800px;
height: 301px;
margin-left: auto;
margin-right: auto;
text-indent: 50px;
font-family: trebuchet ms, verdana, georgia;
text-align: left;
z-index: 1;
overflow: auto;
}

#bas {
background-image: url(composants/bas800.png);
background-position: center;
background-repeat: no-repeat;
height: 93px;
width: 800px;
margin-left: auto;
margin-right: auto;
z-index: 2;
}

Les z-index ne servent à rien. Par contre, ce qui sert c'est le overflow, mais il enlaidit beaucoup ma page (qui n'est déjà pas terrible terrible...) car une vilaine scrollbar en plein milieu de collines verdoyantes, ça fait tâche...
Je voudrais savoir s'il est possible de rendre le défilement de la div de contenu "esclave" de la scrollbar de la page, c'est-à-dire qu'il n'y aurait plus de scrollbar autour de la div mais seulement sur la page globalement...?
Ou alors est-ce qu'il y a carrément un autre moyen que "overflow"? J'ai essayé "posiion: fixed" pour le footer mais ça n'a rien donné...
Merci d'avance, là je vais me coucher parce que j'en ai marre!!!
Modifié par zanzan (23 Feb 2008 - 23:50)

Bonjour,

La bonne solution est effectivement position: fixed, du moins si ton en-tête et ton pied de page sont bien des blocs porteurs d'un contenu. Si c'est juste de la déco, il y a moyen de faire ça un peu plus simplement sans doute avec une image de fond en background-attachement: fixed.

Les mises en page avec éléments fixes sont souvent casse-gueule niveau intégration. Est-ce qu'on pourrait avoir un aperçu du rendu à obtenir? Ça évitera de donner des pistes ne correspondant pas à ton besoin.
Mais dans l'ensemble, il y a de bonnes chances qu'il faille travailler avec position: fixed (et imaginer un mode de rendu dégradé pour Internet Explorer 6). Ou bien ne pas utiliser ce type de mécanisme (éléments fixes) et adapter le design vers quelque chose de plus classique, si ça entraine trop d'inconvénients.

Bonjour Florent et merci de m'aider!!
voilà ce que ça donne avec le "position: fixed" (uniquement pour le footer)

(tu peux aggrandir en cliquant dessus)
Chaque bloc est encadré en bleu.
J'ai laissé ici l'overflow et le footer est en position fixed, ce qui me pose 2-3 problèmes:
1) Je n'arrive pas à centrer le footer
2) le bas du footer n'apparaît pas et risque d'apparaître encore moins sur les basses résolutions
3) le z-index de mon css ne fonctionne pas si j'enlève l'overflow: le texte passe au dessus du footer.
Est-ce que tu crois que ça serait mieux en intégrant mon footer et mon header dans la div de contenu...?
Modifié par zanzan (24 Feb 2008 - 13:33)

Bon. Au vu du design, mon conseil est le suivant: ne pas faire de mise en page avec éléments fixes. Le design ne le justifie pas, et ça gêne les utilisateurs plus qu'autre chose (en réduisant la hauteur du contenu lisible à l'écran).

Si tu tiens à le faire malgré tout, je te laisse regarder du côté du positionnement fixe:
- Positionnement fixe (W3C): http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning
- Positionnement fixe (Openweb): http://openweb.eu.org/articles/initiation_absolue/
- Commentaires conditionnels: http://forum.alsacreations.com/faq/faq-53-.html

Et côté bidouille:
- http://forum.alsacreations.com/faq/faq-67-.html
- http://forum.alsacreations.com/faq/faq-31-.html

Merci beaucoup à toi!!
Tu ne penses pas que sans position fixe la page risque de sembler un peu vide quand tu es au milieu?
Modifié par zanzan (24 Feb 2008 - 17:37)

zanzan a écrit :
Tu ne penses pas que sans position fixe la page risque de sembler un peu vide quand tu es au milieu?

Ben pas s'il y a un vrai contenu, non.

Oui c'est sur je ne pense pas que je vais laisser comme ça...
Merci en tout cas.