28172 sujets

CSS et mise en forme, CSS3

[résolu] Images flottantes sous IE...

Bonsoir,
Un petit souci avec deux images flottantes sous IE, celles ci passent irrémédiablement sous le background-color, alors que sous FF, Opéra et Safari ces mêmes images sont bien dessus...!!!???

Mon bout de css concernant les 2 images flottantes :


#hautgauche, 
#hautdroit,
#basgauche, 
#basdroit
{
height: 36px; width: 35px;
background-repeat: no-repeat;
}

#hautgauche 
{
background:url(images/top_left.png);
margin-top:-27px;
margin-left:-27px;
background-repeat:no-repeat;
z-index:20;
}
#hautdroit 
{
float: right;
background:url(images/top_right.png);
margin-top:-27px;
margin-right:-23px;
background-repeat:no-repeat;
z-index:21;
}
#basgauche 
{
background:url(images/down_left.png);
margin-bottom:-25px;
margin-left:-26px;
background-repeat:no-repeat;
z-index:22;
}
#basdroit 
{
float: right;
background:url(images/down_right.png);
margin-bottom:-0px;
margin-right:-23px;
background-repeat:no-repeat;
z-index:23;
}

.corps_left02
{
margin-top:10px;
background-color:#333333;
padding:20px;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
color:#ffffff;
z-index:30;
}


html :

<div class="corps_left02">
      <div id="hautdroit"></div>
      <div id="hautgauche"></div>
      <div id="marge_text"></div>

<div id="basdroit"></div>
      <div id="basgauche"></div>
    </div>


Bon je ne suis qu'un débutant en css Smiley confused

Merci pour votre aide...
Modifié par ThyBarth (08 Jan 2009 - 18:41)
Enfait, le corps a un z-index supérieur aux autres éléments. Or le z-index le plus important est au premier plan.
Essaye comme ça et donne-nous le résultat !
Noix de Coco a écrit :
Enfait, le corps a un z-index supérieur aux autres éléments. Or le z-index le plus important est au premier plan.
Essaye comme ça et donne-nous le résultat !


Je viens de changer la valeur de mes z-index et ça ne change rien...
Si tu es sous Firefox, essaye un :
opacity: 0.5;

sur .corps_left02 pour mieux voir ce qui se passe dessous.
Si tu peux également nous faire parvenir un screenshot du résultat après cette opération Smiley cligne !
Mince je me suis trompé dans la formulation de ma question, désolé. Enfait ton problème est sous IE, et donc il faudrait mettre l'opacité à 50% et nous faire un screen sous IE. La propriété CSS de l'opacité change pour IE :
filter: alpha(opacity=50);


Désolé pour le dérangement Smiley cligne !
Peut-être avec des espaces ?
filter: alpha(opacity = 50);

Mais je ne t'embête pas plus, ce screenshot montre très bien le problème !
Cependant je ne vois toujours pas où est le problème dans ton code CSS Smiley decu ...
Je ne peux que te dire de bien vérifier les z-index, essaye 0 pour le corps et 30 pour tous les autres (enfait, tu peux mettre tous les coins au même niveau).
Modifié par Noix de Coco (07 Jan 2009 - 23:29)
Essaie de rajouter un attribut position à toutes tes id dans la css, car le z-index ne fonctionne qu'associé à la présence de ce paramètre. Pour ton cas, a priori c'est position:relative; et il faudrait comme l'a dit précédemment noix de coco changer tes z-index car pour le moment tu mets le corps devant

Si ca marche tiens nous au courant !
Bon ça fonctionne nickel grâce à vous Noix de coco et fetnat... Smiley ravi
Ces petits changements font que les images flottantes sont bien à leurs places.
Merci... Smiley cligne
Modifié par ThyBarth (08 Jan 2009 - 18:41)
Sujet clos
Aller à