[RÉGLÉ] z-index

[raph_egg]

Bonjour,

qqn peut-il me dire pourquoi j'obtiens ce phénomène de superposition erroné (second niveau) uniquement sur safari ?

Le code :

#menu_musee{
/*border: 3px solid blue;*/
width:250px;
height:55%;
margin-left:-60px;
margin-top:0px;
background:none;
line-height:2px;
float:left;

}
#menu_musee ul li a{

font-size : 26px;
background:black;
padding-left: 30px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
box-shadow: 4px 4px 12px black;
line-height: 1px;
z-index:inherit;

}

#menu_musee ul li li a{
font-size : 16px;
background:none;
box-shadow: none;
color: white;
padding-top : 5px;
padding-bottom: 0px;
line-height:2px;
}
#menu_musee ul li {

text-align: left;
color:white;
background:none;
font-size : 22px;
margin-top:40px;
margin-bottom:10px;
z-index:20;

}
#menu_musee ul li li {
width:300px;
text-indent:40px;
padding-top:15px;
text-align: left;
color:black;
margin-top:15px;
margin-bottom:15px;
line-height: 15px;
z-index:2;
font-size : 16px;
line-height:2px;
}

#picture ul {
margin-left:100px;
}

#picture ul li li {
text-indent:0px;
text-align: left;
color:white;
background:#E9982E;
}

#picture_1 {
/*border: 1px solid red;*/
width:200px;
height:720px;
background:url(../images/picture_1.jpg) no-repeat;
float:left;
z-index:inherit;
}

#picture_2 {
border: 1px solid red;
width:200px;
height:720px;
background:url(../images/picture_2.jpg) no-repeat black;
}

[Grand Schtroumpf]

Re : z-index

Bonjour,
j'essayerais de remplacer les z-index:inherit; par des valeurs numériques.

[raph_egg]

Re : z-index

Bonjour,
j'essayerais de remplacer les z-index:inherit; par des valeurs numériques.

Malheureusement toujours le même résultat même en enlevant les inherit...

#menu_musee{
/*border: 3px solid blue;*/
width:250px;
height:55%;
margin-left:-60px;
margin-top:0px;
background:none;
line-height:2px;
float:left;

}
#menu_musee ul li a{

font-size : 26px;
background:black;
padding-left: 30px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
box-shadow: 4px 4px 12px black;
line-height: 1px;
z-index: 100;
border-radius: 5px 0 0 0;

}

#menu_musee ul li li a{
font-size : 16px;
background:none;
box-shadow: none;
color: white;
padding-top : 5px;
padding-bottom: 0px;
line-height:2px;
}
#menu_musee ul li {

text-align: left;
color:white;
background:none;
font-size : 22px;
margin-top:40px;
margin-bottom:10px;
z-index:100;

}
#menu_musee ul li li {
width:300px;
text-indent:40px;
padding-top:15px;
text-align: left;
color:black;
margin-top:15px;
margin-bottom:15px;
line-height: 15px;
z-index:2;
font-size : 16px;
line-height:2px;
}

#picture ul {
margin-left:100px;
}

#picture ul li li {
text-indent:0px;
text-align: left;
color:white;
background:#E9982E;
}

#picture_1 {
/*border: 1px solid red;*/
width:200px;
height:720px;
background:url(../images/picture_2.jpg) no-repeat;
float:left;
z-index:-10;
box-shadow: 4px 4px 12px grey;
border-radius: 5px 0 0 0;
}

#picture_2 {
border: 1px solid red;
width:200px;
height:720px;
z-index:-10;
background:url(../images/picture_2.jpg) no-repeat black;
}

[ghazal]

Re : z-index

Salut,
une envie de faire joujou avec les nouvelles extensions de Safari 5 et le doute persistant que Webkit gérait plus rigoureusement les z-index et les positions relative/absolute que FF m'a permis de régler ton pb.
Avec cette correction, tu devrais t'en sortir :
#conteneur_centre {
background: black;
width: 100%;
height: 400px;
position: relative
}

[jisse03]

Re : z-index

le doute persistant que Webkit gérait plus rigoureusement les z-index et les positions relative/absolute que FF

Webkit/Khtml est effectivement extrêmenent strict..
L"époque du XHTML bancale ou à peu près correct est révolue. FF 6 également est vraiment strict.

[raph_egg]

Re : z-index

Salut,
une envie de faire joujou avec les nouvelles extensions de Safari 5 et le doute persistant que Webkit gérait plus rigoureusement les z-index et les positions relative/absolute que FF m'a permis de régler ton pb.
Avec cette correction, tu devrais t'en sortir :
#conteneur_centre {
background: black;
width: 100%;
height: 400px;
position: relative
}

Franchement, 1000 merci, ça fonctionne. Tu as réglé un problème qui me dérangeait vraiment.