18073 sujets

Questions générales et questions de débutants

RESOLU - Image de fond décalée largement sous IE

Bonjour,

Un petit souci d'affichage (pour changer) entre IE7 et Firefox.

J'ai trois boîtes les unes dans les autres : "conteneur", "contenu" et "contenu2".
Le problème vient de l'image de fond de la boîte "contenu" qui est réduite en taille (!), complètement décalée vers la gauche et sortie de sa boîte. Tout ça sous IE7.

Sous Firefox, pas de problème, le site marche bien. Et ça me laisse d'autant plus perplexe... J'ai cherché un peu partout... Pas trouvé de solution.

Ah oui, truc drôle, le problème n'apparait pas sous IE6 !

Le site (Les css et l'index sont valides w3c)

Le css :
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 1px;
padding: 0;
}
#conteneur {
position : absolute;
width: 750px;
background-color:#330205;
left : 50%;
margin-left: -360px;
top : 58%;
margin-top  : -325px;
}
#haut {
height: 20px;
background-color:#330205;
text-align:center;
word-spacing: 1px;
margin: 25px 0px 0 -15px;/*influence les deux navigateurs */
}
#contenu {
height : 425px;
background-color:#330205;
background-image : url(http://jeanquichante.free.fr/images/ombre.jpg);
background-repeat:no-repeat;
background-attachment:scroll !important;/* pour que le fond reste fixe sous IE */
background-attachment: fixed;
padding : 15px 15px 0 30px;
overflow: auto;
margin : 22px 0px 30px 10px;/*   */
border-width : 5px;
border-style : solid;
border-color : black;

}
#contenu2 {
background-color:transparent;
width:51%;
overflow: auto;
border-spacing: 60px;
}

a img {
border: none;
}
#contenu2 img {
border : 0px;
}
#img1 {
float : left;
margin : 4px 20px 6px 4px;
border : 0;
}
#img2 {
float : left;
margin :4px 4px 4px 4px;
border : 0;
}
#img3 {
float : left;
margin : 10px 0px 4px 0px;
border : none;
}


Et le html :
<body style="background-color: #330205" >
<div id="conteneur"> 
<div id="haut"> <ul class="menuhaut">

<li><br><a href="index.htm">Accueil</a></li>
<li><a href="./musique.htm">Musique</a></li>
<li><a href="./livre.htm">Livre d'or</a></li>
<li><a href="./photos.htm">Photos</a></li>
<li><a href="./onsenfout.htm">On s'en fout !</a></li>
<li><a href="./liens.htm">Liens</a></li>
<li><a href="./contacts.htm">Contacts</a></li>

</ul> </div>

 <div id="contenu" align="justify">
   <div id="contenu2">

    Blablablablablablablabla
   Blablablablablablablabla

   </div>
 </div>
</div>
</body></html>


Merci d'avance pour vos lumières, moi je suis dans l'ombre...
Modifié par Djano (04 Sep 2008 - 04:11)
Bonsoir,

Je pense que si tu corrigeais le lien mentionné, les réponses afflueraient plus rapidement.
Car avec une adresse introuvable, nous aussi sommes dans l'ombre... Smiley cligne
Bon j'ai cherché un peu et fait quelques tests... en fait, IE7 ne tollère background-attachment que pour <body>, du coup lorsque tu as mis cette ligne, il te déplace incompréhensiblement ton background sur <body>.
Peut-être qu'en faisant quelques recherches sur google avec background-attachment fixed IE7 tu trouveras une solution Smiley cligne

-- Edit --

Bon j'avais un peu de temps donc je t'ai concocté ta solution Smiley cligne
Je t'explique l'idée : comme on ne peut pas mettre d'attribut background-attachment vu qu'il n'est pas compatible IE7, et que si on le met pas ça la fout mal, il faut identifier le problème sous un autre angle : Ce qui va pas, c'est qu'il y a un scroll sur ta div, qui fait défiler le background quand tu fais défiler ton texte.
Solution : On supprimme le scroll Smiley lol
Mais pour qu'il y ait toujours un scroll sur le texte, sans pour autant que le scroll vienne directement se coller au texte (c'est d'ailleurs pour ça que tu as fait deux div), on va créer une troisième div spécialement pour le background. Smiley rolleyes

Je te mets ici uniquement la portion de CSS à modifier dans forme-je.css.
#bgdiv {
background-color:#330205;
background:url('ombre000.jpg') no-repeat;
margin :22px 0px 30px 10px;/*   */
}

#contenu {
height:425px;
background-color: transparent;
padding:15px 15px 0 30px;
overflow:auto;
scrollbar-face-color:#952133;
scrollbar-arrow-color:#C9C9C9;
scrollbar-track-color:#ECEAE9;
scrollbar-shadow-color:#6C6C6C;
scrollbar-highlight-color:#C9C9C9;
scrollbar-3dlight-color:#C9C9C9;
scrollbar-darkshadow-Color:black;
border-width : 5px;
border-style : solid;
border-color : black;
}


J'ai dû déplacer les margin dans la div nouvellement créée, sinon il y avait un gros effet pas très esthétique Smiley biggol
Le scroll ne devient plus nécessaire, puisque la div contenant le background ne scroll pas; c'est celle qui est à l'intérieur Smiley smile

Maintenant dans ta page accueil.htm, il faut ajouter une div #bgdiv directement avant le bloc #contenu

<div id="bgdiv">
 <div id="contenu" align="justify">
   <div id="contenu2">

(et pas oublier de la refermer plus bas)

Et voilà, le tour est joué Smiley cligne

Petite remarque d'ordre générale :
Evite de modifier la couleur des barres de défilement, y a que IE qui prend en compte ce paramètre CSS d'ailleurs autrement invalide Smiley ohwell
Modifié par superjun (04 Sep 2008 - 03:51)
Merci superjun.

Je me débat avec tout ça, mais effectivement, quand j'enlève cette ligne, l'image est bien placée, par contre... elle n'est plus fixée !! Smiley confus
Sujet du dessus édité pendant ta réponse Smiley cligne
PS : Il faut ajouter la 3e div à toutes tes pages, et pas seulement à accueil.htm Smiley sweatdrop
Modifié par superjun (04 Sep 2008 - 03:51)
Putain, superjun, ça marche ! Smiley biggrin

Merci beaucoup, tu as dû passer du temps la dessus !

Pour te remercier, je te promet que... je vais essayer de comprendre la manip !

Merci encore
Modifié par Djano (04 Sep 2008 - 04:16)
Non pas trop de temps... le plus long a encore été la rédaction Smiley cligne
La manipulation est toute simple, mais je pense que le ton de la rédaction est un peu sujet à embrouilles Smiley rolleyes

J'ai mis le div avec scroll et background que tu avais au début dans une autre div, #bgdiv, qui du coup n'a pas de scroll (puisqu'elle a la même taille que la div à l'intérieur, elle ne va pas scroller).
J'ai ensuite déplacé le background dans la div sans scroll, fait quelques adaptations (déplacement du margin) and that's all folks! Smiley smile

Tu peux refaire les manips dans cet ordre à partir de l'ancienne CSS, en vérifiant les changements à chaque étape, pour t'aider à comprendre Smiley cligne

[scroll + background [ texte ]] -> [background [scroll [ texte ]]]
Modifié par superjun (04 Sep 2008 - 04:59)
Oui, oui, ça y est, à tête reposée, c'est assez clair. Seulement je n'aurais jamais pensé à cette pirouette magnifique...

Maintenant qu'on m'explique une chose : les mecs de Windows trouvent-ils ça normal que je sois content d'avoir fait une pirouette magnifique pour que mon site s'affiche pareil sur la version 6 et 7 de leur navigateur ?


-EDIT- de leur navigateur de merde !
Modifié par Djano (05 Sep 2008 - 01:16)
Sujet clos
Aller à