z-index superposition delement menu deroulant

**keub51** · 10/05/2007, 17h43

J'ai un menu déroulant en javascript / css qui bug légérement :

Lorsque qu'un menu deroulant apparait et se deroule les bloc du menu statique sur le coté et le contenu a la droite du menu change leur position de facon a ne pas se faire ecraser par le menu deroulant.

Je voudrais que ce menu se superpose aux autres autres elements. j'ai utilisé la propriété z-index mais ... ca ne marche pas ...

voici ma css et mon 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
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
<html>
<head>
<title>Contacter Nordtech grossiste informatique</title>
<link rel="stylesheet" media="screen" type="text/css" title="style_nordtech" href="style.css" />
<meta name="description" content="nordtech sarl comment nous contacter. Contact. Formulaire client.">
<meta name="keywords" content="nordtech,nortech,grossiste,informatique,contact,contacts,client,clients,professionels">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="author" content="Nordtech sarl">
<meta http-equiv="reply-to" content="philippe.depreter@nordtech.info">
<meta name="language" content="FR,EN,NL">
<meta name="copyright" content="nordtech sarl">
<meta name="revisit-after" content="15 days">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=7; i++) 
	{
		if (document.getElementById('smenu_deroulant'+i)) {document.getElementById('smenu_deroulant'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body onclick="javascript:montre();">
<div id="ban">
</div>
<div id="bar">
	<div id="menu_deroulant">
	<dl>			
		<dt  onmouseover="javascript:montre('smenu_deroulant1');">Nordtech</dt>
			<dd id="smenu_deroulant1">
				<ul >
					<li><a href="#" title="Nordtech Activitées">Activitées</a></li>
					<li><a href="#" title="Nordtech Produits">Produits</a></li>
					<li><a href="#" title="Nordtech Adresse">Adresse</a></li>
					<li><a href="#" title="Nordtech Juridique">F. Juridique</a></li>
				</ul>
 
			</dd>
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant2');">Fournisseurs</dt>
			<dd id="smenu_deroulant2">
				<ul>
					<li><a href="#" title="Nordtech Selection">Sélection</a></li>
					<li><a href="#" title="Nordtech Marque">Marque</a></li>
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant3');">Clients</dt>
 
			<dd id="smenu_deroulant3">
 
				<ul>
					<li><a href="#" title="Nordtech Qui">Qui?</a></li>
					<li><a href="#" title="Nordtech Contact">Contact</a></li>
					<li><a href="#" title="Nordtech Client">Formulaire Client</a></li>
					<li><a href="#" title="Nordtech Entreprise">Pack créateur d'entreprise</a></li>
					<li><a href="#" title="Nordtech Délai">Délai</a></li>					
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant4');">Ce site</dt>
			<dd id="smenu_deroulant4">
				<ul>
					<li><a href="#" title="Nordtech Pourquoi">Pourquoi ?</a></li>
					<li><a href="#" title="Nordtech Newsletter">Newsletter</a></li>
				</ul>
			</dd>
	</dl>	
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant5');">Opportunité</dt>
			<dd id="smenu_deroulant5">
				<ul>
 
					<li><a href="#" title="Nordtech Profil">Profil</a></li>
					<li><a href="#" title="Nordtech Candidature">Candidature</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant6');">Webmaster</dt>
			<dd id="smenu_deroulant6">
				<ul>
					<li><a href="#" title="Nordtech Partenariat">Partenariat</a></li>
				</ul>
			</dd>
	</dl>	
	<dl>	
		<dt onmouseover="javascript:montre('smenu_deroulant7');">Autres</dt>
			<dd id="smenu_deroulant7">
				<ul>
					<li><a href="#" title="Nordtech Presse">La presse</a></li>
					<li><a href="#" title="Nordtech Liens constructeurs">Liens constructeurs</a></li>
				</ul>
			</dd>
	</dl>
 
 
	</div>
</div>
<div id="menu">
<h1>Produits Nordtech</h1>
	<ul>
    <li>UPS UNITEK</li>
    <li>RESEAU LINKSYS</li>
    <li>ANTIVIRUS / ANTISPYWARE</li>
    <li>ALIMENTATION et BOITIER EXTERNE</li>
    <li>KIT GPS</li>
    <li>TNT</li>
    <li>SPECIAL</li>
    <li>MEMOIRE MDT</li>
	<li>CLAVIERS - SOURIS</li>
	</ul>
	<ul>
	    <li><dd>MICROSOFT</dd></li>
        <li><dd>LOGITECH</dd></li>
        <li><dd>NORTEK</dd></li>
	</ul>
	<ul>
    <li>BAREBONES ASUS</li>
    <li>PORTABLES ASUS</li>
    <li><a href="Nordtech_Grossiste_Informatique_Boitier.html" title="Boitier_Nordtech_Grossiste_Informatique">BOITIERS ASUS, FOXCONN, HEDEN, MAXINPOWER</a></li>
    <li>MONITEURS - ECRANS</li>
	<ul>
      <li><dd>PROVIEW</dd></li>
      <li><dd>LG GOLDSTAR</dd></li>
	 </ul>
    <li>Hauts Parleurs JAZZ, ALTEC LANSING et NORTEK</li>
    <li>Catalogue Produits .Pdf</li>
</ul>
</div>
<div id="contenu">
				<p>Nordtech est un grossiste informatique n'appartenant &agrave; aucun groupe, 
                autonome &agrave; 100%. Cr&eacute;&eacute; par un membre actif 
                du milieu professionnel informatique depuis longue date et fort 
                de ses nombreuses exp&eacute;riences, Nordtech vous propose une 
                solution alternative int&eacute;ressante et se d&eacute;marque 
                des autres grossistes. Nordtech est grossiste et importateur de 
                mat&eacute;riel informatique. Nordtech en tant que grossiste s'adresse 
                aux revendeurs, retailers, sp&eacute;cialistes btob et de fa&ccedil;on 
                g&eacute;n&eacute;rale aux professionels de l'informatique. Nortech 
                en tant qu'importateur s'adresse aux grossistes r&eacute;gionaux 
                en leur proposant une gamme de produits et une exclusivit&eacute; 
                teritoriale de distribution. Le but de ce site est de vous fournir 
                les informations client / fournisseur n&eacute;cessaires &agrave; 
                comprendre qui nous sommes et ce qu'un grossiste de mat&eacute;riel 
                informatique tel que Nordtech peut vous proposer.
				</p>
</div>
</body>
</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
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
body
{
background-image : url("images/fond.jpg");
color:white;
}
#ban
{
background-repeat: no-repeat;
background-image : url("images/head.JPG");
height : 108px;
width : 1280px;
margin : -12px;
}
#bar
{
padding-top : 5px;
background-image : url("images/bar.JPG");
height : 32px;
width : 1280px;
margin-bottom : 10px;
padding-left : 20px;
background-repeat : no-repeat;
margin-left : -12px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
{
border : 1px solid black;
float : left;
margin-left : 50px;
background-image : url("images/fond.jpg");
font-size : 10px;
width : 200px;
padding : 10px;
}
#menu h1
{
color : white;
font-size : 12px;
text-align : center;
}
#menu_deroulant {
top: 0;
left: 0;
width: 100%;
}
#menu_deroulant dl {
float: left;
width: 10em;
margin: 0 1px;
}
#menu_deroulant dt {
text-align: center;
font-weight: bold;
border: 1px solid black;
}
#menu_deroulant dd {
border: 1px solid black;
}
#menu_deroulant li {
text-align: center;
background-image : url("images/fond.jpg");
}
#menu_deroulant a,#menu_deroulant li a, #menu_deroulant dt a {
color: white;
text-decoration: none;
display: block;
border: 0 none;
font-size : 12px;
padding-top : 5px;
height : 15px;
}
#menu_deroulant li a:hover, #menu_deroulant dt a:hover 
{
background: black;
}
#contenu
{
border : 1px solid black;
float : right;
margin-right : 50px;
background-image : url("images/fond.jpg");
font-size : 15px;
width : 800px;
padding : 10px;
font-family : "trebuchet MS",arial,default;
}
p
{
text-indent : 30px;
}

**E.Bzz** · 10/05/2007, 17h53

Bonjour,
c'est la fin de la journée mais ... je vois pas tes z-index

A+

**keub51** · 10/05/2007, 17h56

Code :

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

1
2
3
4
#menu_deroulant dd {
position: absolute;
border: 1px solid black;
}

c bon jai la solution ...

z-index superposition delement menu deroulant

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager