background-image sur div largeur 100%

Version imprimable

12/04/2008, 19h15
mrmaxpower

background-image sur div largeur 100%

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.
12/04/2008, 22h04
Candygirl

Hello,

Tu peux, par exemple, attribuer un min-width de 992px au body.
13/04/2008, 02h29
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.
13/04/2008, 03h23
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.
13/04/2008, 03h44
mrmaxpower

Citation:

Envoyé par 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.

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) !
13/04/2008, 17h08
mrmaxpower

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

Code:



Et maintenant c'est compatible IE6 IE7 FF2. :)

:yaisse2: