Discussion :

[mrmaxpower]

Bonjour,

J'ai problème avec les background-image sur des div de largeur 100%.

Mon exemple se trouve ici :
http://boccolini.free.fr/css/index.html

J'ai une bannière très très longue (1600px) que j'ai placé en background-image d'une div de hauteur 80px et largeur 100%
En dessous, j'ai une div pour le menu de largeur 100% également.
Enfin, j'ai le contenu de ma page que je place dans une div centrée de largeur fixe 980px.

Le problème : lorsque l'utilisateur rétrécie sa fenetre à une largeur inférieure à 980px, le scrolling horizontal apparait. Et lorsque l'on utilise ce scrolling, mes div du haut (celle de largeur 100%) sont tronquées. Cela est valable quelque soit le browser (testé sur FF2,IE6,IE7).

Une petite photo pour mieux comprendre...
http://tof.canardplus.com/show/016a2...47e0c3beb.html

Je ne sais pas comment faire pour éviter ce problème d'affichage...

Une idée ?

Merci d'avance.

[Candygirl]

Hello,

Tu peux, par exemple, attribuer un min-width de 992px au body.

[mrmaxpower]

Bien vu !

J'ai ajouté au style du body le min-width (mis à jour sur l'adresse ci-dessus). Cependant, ce n'est compatible que IE7 et FF2.

Il faudrait encore trouver une compatibilité IE6, je vais chercher de mon coté...

Merci beaucoup.

[balu]

Quel est l'intérêt d'utiliser une aussi grande bannière?
Il me semble que très peu de visiteur verront cette bannière en entier.

[mrmaxpower]

Quel est l'intérêt d'utiliser une aussi grande bannière?
Il me semble que très peu de visiteur verront cette bannière en entier.

Le problème n'est pas la largeur de la bannière en réalité mais le div lui-même (j'aurais pu prendre l'exemple d'un div avec un background-image d'une image de 1px de largeur que l'on répète, ou encore un div avec un simple background-color).

Le problème est qu'en réduisant la fenetre, un div prend comme largeur celle de la fenetre et lorsque que l'on a du contenu à dimension fixée dans la page (une image, un bloc de texte), on a le scrolling horizontal qui fait permet de voir que le div est trop court (ma phrase est à lire plusieurs fois, car je suis pas sur d'être clair) !

[mrmaxpower]

Pour l'incompatibilité du min-width, j'ai utilisé le javascript minmax.js (petite recherche sur Google) dans un commentaire conditionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!--[if lt IE 7]><script type="text/javascript" src="minmax.js"></script><![endif]-->

Et maintenant c'est compatible IE6 IE7 FF2.