Aide - Recherche - Membres - Calendrier
Version complète : IE 6 et la propriété z-index
Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS
dropjazz
bonjour,

D'avance je précise que j'ai un niveau grand débutant dans si possible ne soyez pas trop court dans vos explication icon_wink.gif

Je réalise un site en XHTML/CSS.
Il se compose :
-D’un background (bleu à motif).
-D’un design (tout le design est contenu dans la même div STYLE).
-D’un cadre interne (div INTERNE).
-D’une div MENU (div MENU).

J’ai utiliser la propriété z-index pour gérer la superposition des différentes div.
Div style : z-index 0
Div interne : z-index 1

Sur Firefox cela fonctionne très bien le texte contenu dans la div menu passé au dessu de la div style. Mais dans IE 6.0 cela ne marche pas. Il ne m’affiche que le contenu de la div MENU et n’affiche pas du tout la div STYLE.

Vous pouvez vérifier par vous-même ici : http://boghzi.free.fr/

Est-ce parce qu’IE ne prend pas en charge la propriété z-index ?? Dans ce cas existe-t-il une parade ? (javascript, CSS ect…).
J’ai pu lire qu’il y avait peut être une histoire de positionnement relatif ou absolue. Dans un cas le z-index fonctionnerait mais pas dans l’autre ?

Ou alors il s’agit d’un problème dans mon codage que voici :
Le CSS:

PHP


body
{
width:960px;
height:655px;
margin:auto;
background-image:url(fondgrand.jpg);
background-repeat:repeat-x;
}

#style
{
background-repeat:no-repeat;
background-image:url(dessinGE.png)!important;
background-image:url(file:///C|/Documents and Settings/oUo/Bureau/shirinkam/site HTML-CSS/no-image);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='dessinGE.png');
width:960px;
height:655px;
z-index:0;
}

#interne {
position:relative;
left:161px;
top:164px;
width:675px;
height:365px;
z-index:1;
}



L'XTML:

PHP


<body>



<!--------------------------- div du style -->
<div id="style">
<!------------------------ div INTERNE pour mettre tout à l'intérieur -->
<div id="interne
<!-------------------------------------------------------------- div du menu -->
<div id="menu">
fvghfghfhfghfghfghfg
</div>
</div>
</div>

<!------------------------------------ div du titre -->
<div id="titre">
</div>



</body>
matt_murdock
juste au passage:

1) le filtre que tu utilise -> filter: progid:DXImageTransform c est un truc utilisé juste par IE.. ni Firefox, Safari, et autre Opera ne vont faire l effet souhaité...

2) il y a une erreur dans ton CSS -> background-image:url(file:///C|/Documents and Settings/oUo/Bureau/shirinkam/site HTML-CSS/no-image); la tu peointe sur une image sur ton PC local...

3) les png transparent sont pas supporter par les anciennes version de IE et en plus il est un peut lourd je trouve ( 290 Ko!)

a+
dropjazz
Matt murdock: je sais que le filtre ne se destine uniquement qu'à IE 6 c'est justement pour gérer la transparence des PNG et cela fonctionne très bien. Pour l'erreur sur le chemin de l'image c'est dû au fait que j'ai copier le CSS avec lequel je travail sans connexion donc ça pointe sur le bureau pas sur le serveur.

Mais tu sais peut être si IE supporte le z-index ???icon_wink.gif
Ou si c'est moi qui ai mal utiliser la fonction ?
développeur
Internet Explorer accepte normalement parfaitement la propriété z-index. Le souci vient peut-être du fait que tu as défini un z-index: 0, et je ne sais pas si cela est possible. Essaie de le remplacer par un z-index: 1, et ton deuxième calque par un z-index 2, cela résoudra peut-être ton problème...
Thefanatics
Bonjour, en effet, les Z-index doivent "commencer" de 1 et non de zéro. J'ai mis commencer entre guillemets pour rappeler que les Z-index fonctionnent dans l'ordre inverse, c'est à dire que 2 sera au dessus de 1 (mais ça je pense que tu sais).

Essaye ce bout de code (je n'ai pas IE 6, trop dépassé ! ) :

PHP


<style type="text/css">
body
{
width:960px;
height:655px;
margin:auto;
background-image:url(fondgrand.jpg);
background-repeat:repeat-x;
}
#style
{
background-repeat:no-repeat;
background-image:url(dessinGE.png);
background-image:url(fondgrand.jpg);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='dessinGE.png');
width:960px;
height:655px;
position:relative;
z-index:1;
}
#interne {
position:relative;
left:161px;
top:164px;
width:675px;
height:365px;
z-index:2;
}
</style>


PHP


<div id="style">
<div id="interne">
<div id="menu">
fvghfghfhfghfghfghfg
</div>
</div>
</div>
<div id="titre">
</div>


Ps : trop de DIV tue les DIV !
dropjazz
Bonjour

merci pour ton aide thefanatics !

Mais j'ai trouver la solution tout seul tout à l'heure. En faite pour que IE 6 intérprète corectement les z-index il faut que les DIV se contiennent les unes dans les autres et dans l'ordre Pas très claire n'est ce pas... donc exemple:

PHP


<div id="style">



<div id="menu">

<ul id="item">
<li class="lien1"><a href="http://www.google.fr">Acceuil</a></li>
<li class="lien2"><a href="http://fr.yahoo.com">Gâteaux</a></li>
<li class="lien3"><a href="http://www.mozbot.fr">Tarifs</a></li>
<li class="lien4"><a href="http://google.Fr/">Conditions</a></li>
<li class="lien5"><a href="http://google.Fr">Commande</a> </li>
<li class="lien6"><a href="http://google.Fr">Livre d'or</a> </li>
</ul>
</div>
</div>



PHP


#style
{
width:1100px;
height:756px;
z-index:0;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;
}

#menu
{
position:absolute;
left: 179px;
top: 164px;
width:500px;
height:43;
z-index:1;
}



Voilà si les DIV ne s'imbriquent pas cela ne fonctionnent pas sous IE 6. Le fait que z-index soit en position 0 n'affecte en rien la superposition.

J'éspère que ça aidera les gens parce que sur le net il n'y a rien à ce sujet !!!!
Thefanatics
Okay, c'est vrai que je n'y avais pas pensé. Bien.
Bonne soirée
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2008 Invision Power Services, Inc.