souci de z-index sur menu deroulant
Bonsoir,
Voilà j'ai un petit problème que je n'arrive pas à résoudre.
http://img192.imageshack.us/img192/7...nstitre1cx.jpg
Comme on peut le voir sur l'image j'ai un menu déroulant horizontal, un texte défilant et un bloc de news.
Le cadre violet (texte défilant) est une div qui se déplace (avec un plugin jQuery).
Le cadre vert (news) est une div principal composé de plusieurs div a l'intérieur contenant chacune une news et qui bouge également avec un plugin jQuery.
Mon problème est que le cadre violet, ainsi que toute les petites div contenant les news passent au dessus de mon menu déroulant.
Sauriez-vous d'où cela peut venir ?
Une partie de ma page :
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
| <div id="menuH">
<ul class="menu">
<li class="top"><a href="<?php echo $host; ?>" class="top_link"><span>Accueil</span></a></li>
<li class="top"><a href="#" class="top_link"><span class="down">???</span></a>
<ul class="sub">
<li><a href="#">Présentation</a></li>
<li><a href="#">Organigramme</a></li>
</ul>
</ul>
</div>
<div id="center">
<?php if(!empty($localisation)){ ?>
<div id="message">
<ul id="listMessage">
<li><span>12/05/2010</span> Venez nous voir au <a href="#">forum labo</a> qui se tiendra du 1 au 4 juin 2010</li>
</ul>
</div>
<div id="localisation">
<?php localisation($localisation,$host); ?>
</div>
<?php } ?>
<div id="vBar">
<div class="firstItemsVBar">
<div class="title">News</div>
<div id="news">
<div class="news">
<div>Date n°1</div>
<div><a href="#">Titre de la news avec plus de blablabla</a></div>
</div>
<div class="news">
<div>Date n°2</div>
<div><a href="#">Titre de la news</a></div>
</div>
<div class="news">
<div>Date n°3</div>
<div><a href="#">Titre de la news</a></div>
</div>
</div>
<div id="moreNews"><div><a href="#">Plus de news...</a></div></div>
</div>
</div>
</div> |
CSS du menu (très long et surement pas très propres) :
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
| #menuH{
width:899px;
padding:1px 1px 5px 1px;
background-color:#FFFFFF;
}
.menu{
padding:0;
margin:0;
list-style:none;
height:40px;
background:#fff url(../images/button1a.png) repeat-x;
position:relative;
}
.menu li.top{
display:block;
float:left;
position:relative;
}
.menu li a.top_link{
display:block;
float:left;
height:40px;
line-height:33px;
color:#FFFFFF;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span{
float:left;
font-weight:bold;
display:block;
padding:0 24px 0 0;
height:40px;
}
.menu li a.top_link span.down{
float:left;
display:block;
padding:0 24px 0 0;
height:40px;
background:url(../images/down.gif) no-repeat right top;
}
.menu li a.top_link:hover{
color:#12356E;
background:url(../images/button4.png) no-repeat;
}
.menu li a.top_link:hover span{
background:url(../images/button4.png) no-repeat right top;
}
.menu li a.top_link:hover span.down{
background:url(../images/button4a.png) no-repeat right top;
}
.menu li:hover > a.top_link{
color:#12356E;
background:url(../images/button4.png) no-repeat;
}
.menu li:hover > a.top_link span{
background:url(../images/button4.png) no-repeat right top;
}
/* surbrillance du menu "Chiffrage rapide" */
.menu #chiffrage a.top_link{
color:#12356E;
text-decoration:blink;
background:url(../images/button4.png) no-repeat;
}
.menu #chiffrage a.top_link span{
background:url(../images/button4.png) no-repeat right top;
}
/* ***** */
.menu li:hover > a.top_link span.down{
background:url(../images/button4a.png) no-repeat right top;
}
.menu a:hover{
visibility:visible;
}
.menu li:hover{
position:relative;
z-index:200;
}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul{
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}
.menu :hover ul.sub{
left:2px;
top:35px;
right:2px;
background:#FFFFFF;
padding:3px 0;
border:1px solid #FF6C00;
white-space:nowrap;
width:200px;
height:auto;
}
.menu :hover ul.sub li{
display:block;
height:20px;
position:relative;
float:left;
width:250px;
}
.menu :hover ul.sub li a{
display:block;
font-size:11px;
height:20px;
width:194px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
border:3px solid #fff;
border-width:0 0 0 3px;
}
.menu :hover ul.sub li a:hover{
background:#FF6C00;
color:#FFFFFF;
}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul{
left:90px;
top:-4px;
background:#fff;
padding:3px 0;
border:1px solid 95d2ee;
white-space:nowrap;
width:93px;
z-index:200;
height:auto;
} |
CSS du message défilant :
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
| /* liScroll styles */
/* the outer div with the black border */
.tickercontainer{
background-color:#FFE1CC;
border:dotted 1px #FF6C00;
width:879px;
margin:0;
padding:10px 0;
overflow:hidden;
}
/* that serves as a mask. so you get a sort of padding both left and right */
.tickercontainer .mask{
position:relative;
overflow:hidden;
}
/* that's your list */
ul.newsticker{
position:relative;
left:750px;
font:bold 10px Verdana;
margin:0;
padding:0;
}
/* important: display inline gives incorrect results when you check for elem's width */
ul.newsticker li{
float:left;
margin:0;
}
ul.newsticker a{
color:#FF0000;
text-decoration:none;
}
ul.newsticker a:hover{
text-decoration:underline;
}
ul.newsticker span{
color:#FF0000;
} |
Pour la news pas trop de code CSS, mais avec firebug j'ai ça d'affiché :
http://img514.imageshack.us/img514/3279/firebug.jpg
Voilà. Désolé pour le message un peu long et par avance merci.
EDIT : petite précision, le problème est sous IE. Avec FF aucun problème.
