28173 sujets

CSS et mise en forme, CSS3

[résolu]Backgound-attachement:fixed dans une div avec une scroll bar

Bonjour,

J'ai un petit problème j'essaie de faire une div avec une image de fond fixe et une scrollbar pour faire defiler.
Sur ie7 pas de problème. Par contre sur Firefox 2.0 j'ai un problème de positionnement de mon image. J'aurais voulu qu'elle commence dans le coin superieur gauche de ma div et ce n'est pas le cas. Elle est a moitié rognée.

j'ai tout simplement utilisé overflow:auto et background-attachement:fixed pour ma div.

Si vous avez une idée merci.
Modifié par Agent J (07 May 2007 - 11:06)
Bonjour et bienvenue sur ce forum,

Agent J a écrit :
j'essaie de faire une div avec une image de fond fixe et une scrollbar pour faire defiler

<mode humour> Houlà, deux erreurs de conception à la fois, c'est très fort ! Smiley lol </mode humour>

Agent J a écrit :
J'aurais voulu qu'elle commence dans le coin superieur gauche de ma div

Tu as pensé à utiliser background-position ?
Ensuite, il me semble que background-attachement: fixed fait que l'image de fond est positionnée par rapport à la page, et plus par rapport aux limites du bloc. Je n'en suis plus sûr, mais si background-position ne permet pas de régler le problème il faudra probablement chercher dans cette direction.

Agent J a écrit :
j'ai tout simplement utilisé overflow:auto et background-attachement:fixed pour ma div.

Ce qui ne nous dit pas grand chose sur ta page. Un lien vers la page en ligne serait un plus, ou au pire le code HTML et CSS pertinent.
Salut,

Oui le background-attachment:fixed; est particulièrement difficile à utiliser sur un élément autre que <body> ou <html> car le positionnement du background ne se fait pas, dans ce cas, par rapport à l'élément lui même mais par rapport à la fenêtre du navigateur (le viewport).

He oui, la vie c'est dur parfois Smiley cligne
Modifié par Christian Le Bouler (05 May 2007 - 15:13)
Merci pour les réponses.

a écrit :
Houlà, deux erreurs de conception à la fois, c'est très fort !


C'est vraiment des erreurs de conception ? Comment faire alors ?
Le site est conçu comme un bloc de taille fixe ( pour fonctionner sur toute les résolutions ) et le graphisme impose de passer par des images (dégradés en diagonale,...)

... bah j'ai oublié de poster ce message et entre temps j'ai trouvé une solution. Certains vont probablement s'insurger mais je passe par une superposition de div une non scrollable avec le fond et une transparente scrollable par dessus.
Agent J a écrit :
C'est vraiment des erreurs de conception ?

Pour le background-attachment: fixed, tout dépend de l'utilisation que l'on en fait. Si c'est une utilisation raisonnable et qui ne diminue pas sensiblement la lisibilité du contenu (comme souvent quand on utilise mal cette propriété, ou les images de fond en général...), pourquoi pas.

Pour la mise en page en hauteur fixe avec barre de défilement interne, c'est clairement une erreur de conception. Ça pose d'importants problèmes d'adaptation aux différentes résolutions (un même site occupera l'essentiel de la fenêtre, voire débordera, en 800x600, mais sera ridiculement petit et peu lisible en 1280x1024...), d'ergonomie (problèmes pour l'utilisation de la molette de la souris, par exemple), ou encore d'accessibilité (problèmes pour la navigation au clavier, par exemple). C'est clairement à éviter.

Agent J a écrit :
Le site est conçu comme un bloc de taille fixe ( pour fonctionner sur toute les résolutions ) et le graphisme impose de passer par des images (dégradés en diagonale,...)

Ben voilà, l'erreur est à la conception. Il faudrait revoir la maquette, modifier (au moins légèrement) la charte graphique pour permettre une adaptabilité en hauteur, etc.

Au passage, un site qui fonctionner sur toutes les résolutions ça n'est pas un site aux dimensions fixes (et surtout pas un site en hauteur fixe !), mais un site au design fluide (avec de préférence une largeur minimale, et si besoin une largeur maximale).

Voir le tutoriel «Faire un site pour toutes les résolutions» sur Alsacréations.

Agent J a écrit :
... bah j'ai oublié de poster ce message et entre temps j'ai trouvé une solution. Certains vont probablement s'insurger mais je passe par une superposition de div une non scrollable avec le fond et une transparente scrollable par dessus.

Pas d'insurrection, au contraire. Si on veut vraiment réaliser cette mise en page c'est la solution la plus efficace.
Modifié par Florent V. (07 May 2007 - 11:58)
Sujet clos
Aller à