Discussion :

[alex1982]

Bonjour à tous,
Je rencontre un probleme lors de la création d'un menu déroulant. Il s'affiche parfaitement bien sous Firefox, mais il y'a un décalage qui se produit sur IE. Une image étant plus causante, regardez ci-dessous:


code CSS:

Code :

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
 
#head1 {
	display: block;
	width: 562px;
	height: 138px;
	float: left;
}
#head2 {
	display: block;
	width: 214px;
	height: 138px;
	float: left;	
	background:  url('../img/header-flash.gif');
}
/*Menu deroulant*/
#menu {
	position:relative;
	margin-top: 0px;
	margin-left: 0px;
	top: 0;
	left: 0;
	z-index:200;
	width: 100%;
	overflow: hidden;
	display: block;
}
#menu dl {
	float:left;
	width: 187px;
	display: block;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	width: 184px;
	height: 28px;
	line-height: 31px;
	margin-left: 3px;
	background:  url('../img/menubut.gif');
	overflow: hidden;
	display: block;
}
#menu dt.on {
	background-position: 0 20px;
	color: white;
}
#menu dd {
	border: 1px solid gray;
	margin-left: 2px;
}
#menu li {
	text-align: center;
	background: #fff;
	list-style-type: none;
}
#menu li a, #menu dt a {
	text-decoration: none;
	color: #000;
	height: 100%;
	border: 0 none;
	display: block;
}
#menu li a:hover, #menu dt a:hover {
	background: #eee;
}
 
a {
	text-decoration: none;
	color: black;
	color: #222;
}
/*barre de sous menu*/
#submenu {
 
	clear:left;
	background:  url('../img/submenu.gif');
	height: 35px;
	overflow:hidden;
	z-index:100;
}
#submenu ul {
	list-style: none;
	display: block;
}
#submenu li {
	display: inline;
	font-size: 80%;
}
#submenu a {
	color: #fff;
	text-decoration: none;
	font-size: 95%;
	display: block;
	float: left;
	height: 35px;
	line-height: 38px;
	font-weight: bold;
	padding-left: 28px;
	padding-right: 5px;
}
#submenu a:hover {
	text-decoration: underline;
}

Code html:

Code :

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
 
<div id=head1>
		<div id=header>
			<h1><a title=Estima>Estima</a></h1>
		</div>
		<div id="menu">
			<dl>			
				<dt onMouseOver="javascript:montre('smenu1');" id="on" border="0">Menu 1</dt>
					<dd id="smenu1">
						<ul>
							<li><a href="#">Sous-Menu 1.1</a></li>
							<li><a href="#">Sous-Menu 1.2</a></li>
							<li><a href="#">Sous-Menu 1.3</a></li>
 
						</ul>
					</dd>
			</dl>	
			<dl>	
				<dt onMouseOver="javascript:montre('smenu2');">Menu 2</dt>
					<dd id="smenu2">
						<ul>
							<li><a href="#">Sous-Menu 2.1</a></li>
							<li><a href="#">Sous-Menu 2.2</a></li>
							<li><a href="#">Sous-Menu 2.3</a></li>
 
						</ul>
					</dd>
			</dl>
 
			<dl>	
				<dt onMouseOver="javascript:montre('smenu3');">Menu 3</dt>
					<dd id="smenu3">
 
						<ul>
							<li><a href="#">Sous-Menu 3.1</a></li>
							<li><a href="#">Sous-Menu 3.2</a></li>
							<li><a href="#">Sous-Menu 3.3</a></li>
 
						</ul>
					</dd>
			</dl>
		</div>
	</div>
	<div id=head2>&nbsp;</div>
<div id=submenu>
	<ul>
	  <li><a class=sub1 title="" href="#">vous decrivez 
	  votre besoin</A> 
	  <li><a class=sub2 title="" href="#">rub1</a> 
	  <li><a class=sub3 title="" href="#">rub2</a> 
	  <li><a class=sub4 title="" href="#">rub3</a> </li>
	</ul>
</div>

J'ai essayer de jouer sur z-index, mais rien n'y fait.
Merci d'avance.

[tyx]

Plop,

l'image qu'on voit descendre c'est laquelle dans ton css ?

[alex1982]

En fait, l'image Firefox, c'est ce qui doit se produire, le menu se déroule par dessus l'image(situe sous les boutons).
Sous IE, lorsque le menu se déroule, l'image(situe sous les boutons) est décalée en dessous du menu déroulant et non pas derrière le menu déroulant comme sur Firefox.

[alex1982]

menubut.gif: image bouton
submenu.gif:image sous les boutons (turquoise,trait noir,vert)
c'est submenu qui se décalle en dessous

[alex1982]

j'ai mis en ligne, ça sera plus parlant :ici.

[noOneIsInnocent]

salut

e pense que tu devrais faire un tour sur le site de microsoft et recherché si la propriété z-index est correctement interpretée ...

[noOneIsInnocent]

ou sinon voilà ce que j'ai trouvé sur z-index et le code fonctionne avec ie et firefox

http://www.w3schools.com/css/css_positioning.asp

[alex1982]

bon, j'ai fait le tour du net cette aprème et j'ai règlé mon problème en partie (y'en a de nouveau, mais j'ai pas trop cherché ceux là), donc voilà ce que 'obtient maintenant : Version 2.
Donc en fait, z-index sert a instaurer une hiérarchie, par exemple un bloc a z-index=1 un autre a z-index=2. En cas de superposition, celui qui a le plus gros z-index sera "au dessus" (donc visible) D'autre part il semblerait que z-index ne marche que si position est sur absolute (à vérifier).

[j14z]

Alex, ça te dérangerai de partager ton code source final? :p

Merci d'avance,

Youl 8)

[alex1982]

Bah grosso modo, j'ai utiliser uniquement position:absolute dans mon css, ce qui permet de donner une position à chaque "calque" via z-index.

Code :

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
 
#page {
	position:absolute;
	padding-top: 3px;
	left:100px;
	z-index:10;
	width: 776px;
	padding:0;
	margin: 0 auto;
	background:  url('../img/bgcentru.gif');
}
#menu {
	position:absolute;
	width: 562px;
	top: 110px;
	right: 0px;
	left: 2px;
	z-index: 30;
	overflow:hidden;
	margin:0;
	padding:0;
}
#submenu {
	position:absolute;
	top: 138px;
	left: 10px;
	height: 35px;
	width: 776px;
	z-index: 20;
	background:  url('../img/submenu.gif');
	clear:both;
	margin: 0;
	padding: 0;
}

En position relative ca fonctionne pas(sous IE6), donc apparement z-index fonctionne qu'en position absolute.