Discussion :

[laurentSc]

Bonsoir,

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

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<nav>
<?php include("../menu2.php"); ?>
</nav>

En outre, je mets ce style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <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 ?

[rodolphebrd]

Bonjour,

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

Z-index tout seul ne fonctionne pas...

[laurentSc]

J'y connais pas grand-chose, mais j'ai quand-même tenté un truc :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
nav {
z-index : 10;
position:relative;
top:0;
left:0;
}

et ça ne marche toujours pas...

[rodolphebrd]

Et un lien vers la page ou plus de code.

[laurentSc]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[rodolphebrd]

Je ne vois pas le problème mentionné :

[laurentSc]

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

[rodolphebrd]

Non :


Testé sur Safari, FF et Chrome.
Même résultat avec et sans le positionnement et le Z-index.

[laurentSc]

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

[rodolphebrd]

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

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

Oui, définitivement.

[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.