[Résolu] Scroll horizontal d'une div en position fixe

Bonjour à tous,

Je me tourne vers vous car après avoir pas mal googlé et réfléchi je ne trouve pas de moyen d'obtenir ce que je veux. Je suis en train de faire un design en largeur fixe de 1024px, avec un header et un footer en position fixe (toujours collés en haut et en bas de l'écran). Ca passe très bien sur mon écran 1280x1024, mais dès que je teste en 1024x768, j'ai des soucis de défilement horizontal.

Voici le design en conditions réelles : http://beta.domaineducoudray.com/le-domaine.php

Si vous essayez de réduire la taille de la fenêtre, une scrollbar horizontale va apparaitre, et le "contenu central" va bien défiler. Le header et le footer, quant à eux, ne vont pas bouger. Normal, me direz-vous, car ils sont en position fixe (à gauche aussi). Mais si je les mets en position relative au contenu central, par exemple, ils ne resteront plus scotchés en haut et en bas de l'écran...

Est-ce que vous auriez une solution pour remédier à ce problème : pouvoir faire défiler mes header/footer ?

Merci d'avance pour vos suggestions.
Modifié par Nebelmann (26 Feb 2011 - 18:48)

Hey,
Essaie

position:absolute;

top:0; /*pour le header*/
bottom:0; /*pour le footer*/

Oui, mais en fait non
J'aimerais que les header et le footer soient toujours en haut et bas de page, même si on défile verticalement. Hors si je ne me trompe pas en position absolute ils vont défiler aussi en même temps que le contenu central...

Bonjour, c'est le propre de la position fixe de fixer l'élément au chargement de la page dans la fenêtre du navigateur. Donc, en cas de défilement, il ne bougera pas.

Tu as mis une largeur de 1032px pour ton contenu global, il est donc normal que tu obtiennes une barre de défilement horizontale. Ta largeur doit plus de rapprocher de 960-980px pour que tu ne l'aie pas. Tes soucis sont donc dus à cette largeur et non à ton positionnement fixe.

Oui, c'est ce que j'avais compris aussi. Il faudrait que j'aie une position fixe mais uniquement verticale, pas horizontale. Mais à ma connaissance, ce n'est pas possible...

Nebelmann a écrit :
Oui, c'est ce que j'avais compris aussi. Il faudrait que j'aie une position fixe mais uniquement verticale, pas horizontale. Mais à ma connaissance, ce n'est pas possible...

Ce n'est effectivement pas possible.

Quelques remarques:
- Le line-height:1 est une erreur. Le texte est très peu lisible. Une hauteur de ligne entre 1.2 et 1.8 serait plus appropriée. J'ai testé rapidement un 1.4 et ça rend plutôt bien.
- La justification du texte ne marche pas. C'est très bien d'avoir conservé du texte en grande taille (16px, par défaut), mais ça veut dire qu'on peut faire tenir assez peu de mots sur une ligne, ce qui augmente les risques de trous énormes entre deux mots dus à la justification et l'absence de césure. À l'heure actuelle le texte justifié est le plus souvent une erreur sur le Web.
- J'ai une sainte horreur des designs avec des éléments fixes à l'écran (en-tête et pied de page le plus souvent), qui ont pour seul effet de perturber la lecture et de voler de l'espace au contenu. Mais ce n'est que mon avis.

Merci pour les conseils de mise en page du texte

A vrai dire je ne suis pas fan non plus des éléments fixes, mais je n'ai pas encore réussi à convaincre les clients que c'est mal... Ca va peut-être venir grâce à ce genre de problèmes.

Bon, finalement j'ai opté pour la solution de supprimer les parties en positions fixes, mais j'ai laissé la justification du texte, avec la taille de police actuelle les espacements entre les mots ne sont pas si importants.

Ceux que ça intéresse peuvent voir un exemple ici : http://www.domaineducoudray.com/les-vignes.php

J'en ai profité pour faire de jolies tooltips en CSS