Z-index non pris en compte

Version imprimable

27/04/2014, 22h13
laurentSc

Z-index non pris en compte
Bonsoir,

sur les différentes pages de mon site, j'inclue le menu
Code:

1 2 3 <nav> <?php include("../menu2.php"); ?> </nav>
En outre, je mets ce style :
Code:

1 2 3 4 5 6 7 8 <link href="../css/style-menu2.css" rel="stylesheet"/> et style-menu2.css : ... nav { z-index : 10; } ...
Sur la plupart des pages, le menu est bien placé devant le reste, sauf sur une qui contient ce code :

Code:

<iframe src="http://www.youtube.com/embed/Zo9Hr0avfkE" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>

Est-ce du au fait qu'il s'agit d'une iframe d'un code qui vient de Youtube ? Et si oui, comment faire ?
27/04/2014, 23h06
rodolphebrd

Bonjour,

est-ce que les éléments sont positionnés ?

Z-index tout seul ne fonctionne pas...
28/04/2014, 07h10
laurentSc
J'y connais pas grand-chose, mais j'ai quand-même tenté un truc :
Code:

1 2 3 4 5 6 nav { z-index : 10; position:relative; top:0; left:0; }
et ça ne marche toujours pas...
28/04/2014, 09h52
rodolphebrd

Et un lien vers la page ou plus de code.

je ne peux répondre que de retour chez moi, car sur le réseau informatique de mon entreprise, depuis quelques semaines, je ne peux plus écrire (seulement lire) (et je viens de mettre sur le coup le support informatique). Donc le lien de la page à problème : http://vercorshandisport.org/html5/v...ideo_ambel.php. L'extension est php car j'include le menu, et comme il y a peut-être des effets de bord indésirables, voici le css complet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;font-size:2;background: #ebebeb;width: 900px;margin: 100px auto;color: #666;}
a {color: #333;}
 
#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(../images/gradient.png) repeat-x 0 -110px;line-height: 100%;
	border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
}
#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}
 
/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding:  8px 20px;margin: 0;
	-webkit-border-radius: 1.6em;
	-moz-border-radius: 1.6em;
}
#nav a:hover {background: #000;color: #fff;}
 
/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 0px #f8f8f8;
}
 
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: non;border: none;color: #666;
}
#nav ul a:hover {background: #0078ff url(../images/gradient.png) repeat-x 0 -100px !important;
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}
 
/* dropdown */
#nav li:hover > ul {display: block;}
 
/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;
	background: #ddd url(../images/gradient.png) repeat-x 0 0;
	border: solid 1px #b4b4b4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#nav ul li {float: none;margin: 0;padding: 0;}
 
/*#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}*/
 
/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}
 
/* rounded corners of first and last link */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
 
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
 
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}
 
/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;} 
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}
 
/*************************************************/
/* jusque là, css du menu, et après css du reste */
/*************************************************/
 
#idsize {
height:90%;
font-size:80%;
}
 
#credit {
background-color:black;
color:white;
width:111.1%;
}
 
nav {
z-index : 10;
position:relative;
top:0;
left:0;
}
 
#aside_width {
float:right;
text-align : center;
}
 
#section {
float:left;
}
 
#pres,article {
font-family : Arial;
}
 
#visite {
background-color: rgb(204, 255, 255);
width:20%;
}
 
#liens {
font-size : 5;
}
 
.white {
color:white;
text-decoration:underline;
}

28/04/2014, 19h35
rodolphebrd

1 pièce(s) jointe(s)

Je ne vois pas le problème mentionné : Pièce jointe 144321
28/04/2014, 21h09
laurentSc

1 pièce(s) jointe(s)

C'est quand on affiche les sous-rubriques (on survole et on voit qu'une partie est masquée) :

Pièce jointe 144331
28/04/2014, 21h18
rodolphebrd

1 pièce(s) jointe(s)

Non : Pièce jointe 144333

Testé sur Safari, FF et Chrome.
Même résultat avec et sans le positionnement et le Z-index. ;)
28/04/2014, 21h45
laurentSc

OK, mais alors que dire aux utilisateurs de IE : changer de navigateur ?
28/04/2014, 21h50
rodolphebrd

Désolé je ne peux pas tester sur IE...

Citation:

Envoyé par laurentS

OK, mais alors que dire aux utilisateurs de IE : changer de navigateur ?

Oui, définitivement. :mrgreen:
28/04/2014, 23h48
predalpha

Mais non faut pas s'abandonner aux pros Mac ;)

changes le code de ton iframe par celui-ci : <iframe width="560" height="315" src="http://www.youtube.com/embed/Zo9Hr0a...de=transparent" frameborder="0" allowfullscreen="" abp="51" wmode="opaque"></iframe>

Fonctionne sous IE11

Toutefois le mérite ne me revient pas. Il s'agit d'un problème connu depuis fort longtemps et beaucoup de versions de IE

L'astuce est de rajouter dans l'url de l'iframe ?wmode=transparent
Il faut également rajouter l'attribut wmode="opaque" dans l'iframe.