Menu deroulant totalement en css: pb sous ie

**-Neo-** · 05/02/2009, 23h42

Bonsoir à tous,

voilà je suis en train de refaire le design d'un site comportant un menu deroulant qui doit etre fait en CSS et j'ai un probleme sous ie: le menu se décale sur la droite, je ne vois pas d'où vient le probleme.

le resultat sous FF et le resultat attendu:

le resultat sous ie:

si quelqu'un à une idéé....

Merci de votre aide

**StAfX** · 06/02/2009, 00h17

Bonsoir,

peux-tu mettre ton code, sans quoi on ne pourra pas faire grand chose... merci.

**-Neo-** · 06/02/2009, 00h25

Bonsoir,

Excuse moi.

Voilà

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<link rel="stylesheet" type="text/css" href="styles/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/print.css" media="print" />
<title>Saarlouis.de</title>
</head>
<body>
<!--debut div page-->
<div id="page">
	<!--debut div hautpage-->
	<div id="hautpage">
		<!--debut div header-->
		<div id="header">
			<a class="img" href="index.html">
				<img src="img/head.jpg"/>
			</a>
		</div>
		<!--fin div header-->
		<!--debut div couvre_menu-->
		<div id="couvre_menu">
			<!--debut div menu-->
			<div id="menu">
			<ul class="niveau1">
				<li class="sousmenu">
					<a href="#"><img src="img/nav_aktuelles.gif" /></a>
					<ul class="niveau2">
						<li><a href="#">Aktuelles</li>
						<li><a href="#">Neuigkeiten</li>
						<li><a href="#">Veranstaltungskalender</li>
						<li><a href="#">Bekanntmachungen</li>
						<li><a href="#">Ausschreibungen</li>
						<li><a href="#">Blick&nbsp;in&nbsp;die&nbsp;City</li>
						<li><a href="#">Pressearchive&nbsp;auf&nbsp;www.saarlouis.de</li>
						<li><a href="#">Umgestaltung&nbsp;Innenstadt</li>
					</ul>
				</li>
				<li class="sousmenu">
					<a href="#"><img src="img/nav_freizeit.gif" /></a>
					<ul class="niveau2">
						<li><a href="#">Freizeit&nbsp;&&nbsp;Tourismus</li>
						<li><a href="#">Festungsstadt</li>
						<li><a href="#">Stadtplan</li>
						<li><a href="#">Unterkünfte&nbsp;in&nbsp;Saarlouis</li>
						<li><a href="#">Gastronomie</li>
						<li><a href="#">Ausflugtipps</li>
						<li><a href="#">Kultur</li>
						<li><a href="#">Sport</li>
						<li><a href="#">WBS&nbsp;-&nbsp;Schwimmbäder</li>
						<li><a href="#">Vereine</li>
					 </ul>
				</li>
				<li class="sousmenu">
					<a href="#"><img src="img/nav_wirtschaft.gif" /></a>
					<ul class="niveau2">
						<li><a href="#">Wirtshaft</a></li>
						<li><a href="#">Wirtshaftsstandort</a></li>
						<li><a href="#">Wirtshaftsnachrichten</a></li>
						<li><a href="#">Wirtshaftstermine</a></li>
						<li><a href="#">Strukturdaten</a></li>
						<li><a href="#">Einkaufsführer</a></li>
						<li><a href="#">Branchenführer</a></li>
						<li><a href="#">Gastronomie</a></li>
						<li><a href="#">Parken</a></li>
						<li><a href="#">Ortsinteressenverein&nbsp;und&nbsp;-verbände</a></li>
						<li><a href="#">Gewerbeimmobilien</a></li>
						<li><a href="#">Suche&nbsp;im&nbsp;Bereich&nbsp;Wirtschaft</a></li>
					 </ul>
 
				</li>
				<li class="sousmenu">
					<a href="#"><img src="img/nav_service.gif" /></a>
					<ul class="niveau2">
						<li><a href="#">Service</a></li>
						<li><a href="#">Presse</a></li>
						<li><a href="#">Ihr Anliegen</a></li>
						<li><a href="#">Kartenvarverkauf</a></li>
						<li><a href="#">NBS&nbsp;-&nbsp;Neuer&nbsp;Betriebshof&nbsp;Saarlouis</a></li>
						<li><a href="#">"Young Web"&nbsp;-&nbsp;Kinder-&nbsp;und Jungendseiten</a></li>
						<li><a href="#">Broshüren-Center</a></li>
						<li><a href="#">Saarlouis&nbsp;Gästebuch</a></li>
						<li><a href="#">Saarlouis&nbsp;und&nbsp;seine&nbsp;Stadtteile</a></li>
						<li><a href="#">Bevölkerungsstatistik</a></li>
						<li><a href="#">Foto-Galerie&nbsp;Übersicht</a></li>
						<li><a href="#">Europastadt&nbsp;Saarlouis</a></li>
					 </ul>
				</li>
				<li class="sousmenu">
					<a href="#"><img src="img/nav_verwaltung.gif" /></a>
					<ul class="niveau2">
						<li><a href="#">Rat&nbsp;und&nbsp;Vervaltung</a></li>
						<li><a href="#">Dezernate</a></li>
						<li><a href="#">IÄmter&nbsp;&&nbsp;Öffnungszeiten</a></li>
						<li><a href="#">Wirtschaftliche&nbsp;Unternehmen</a></li>
						<li><a href="#">Organigramm</a></li>
						<li><a href="#">Beschâftige&nbsp;der&nbsp;Kreisstadt&nbsp;Saarlouis</a></li>
						<li><a href="#">Städtische&nbsp;Entscheidungsgremien</a></li>
						<li><a href="#">Ortsrechtssammlung</a></li>
						<li><a href="#">Städtische&nbsp;Finanzen</a></li>
						<li><a href="#">Städttepartnerschaften</a></li>
					 </ul>
				</li>
				<li>
					<a href="#"><img src="img/nav_suche.gif" /></a>
				</li>
			</ul>
 
			</div>
			<!--fin div menu-->
 
		</div>
		<!--fin div couvre_menu-->
 
 
			<!--debut div langues-->
			<div id="langues">
			<a href="#"><img src="img/flag_deu.gif"/></a>
			<a href="#"><img src="img/flag_franz.gif"/></a>
			<a href="#"><img src="img/flag_engl.gif"/></a>
			</div>
			<!--debut div langues-->
			<!--debut div newsticker-->
			<div id="newsticker">
			<img src="img/newsticker_logo.gif"/> » Arbeitskammer bietet Grenzgängerberatung an   2/5
			</div>
			<!--debut div newsticker-->
		</div>
		<!--fin div hautpage-->
 
	<!--debut div contenu-->
	<div id="contenu">
		<!--debut div date-->
		<div id="date">
		Donnerstag, 05.02.2009
		</div>
		<!--fin div date-->
		<!--debut div gauche-->
		<div id="gauche">
 
		</div>
		<!--fin div gauche-->
		<!--debut div droite-->
		<div id="droite">
 
		</div>
		<!--fin div droite-->
	</div>
	<!--fin div contenu-->
</div>
<!--fin div page-->
</body>
 
</html>

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/*fichier de style ecran*/
body{
behavior: url(csshover.htc);
background-image:url("../img/barre_header.png");
background-repeat:repeat-x;
background-color:#315584;
/*text-align:center;*/
 
}
 
/*div page*/
#page{
background-color:white;
width:762px;
padding-top:0px;
margin-top:0px;
margin-right:auto;
margin-left:auto;
position:relative;
top:-8px;
}
 
 
/*div header*/
#header{
margin-top:0px;
padding-top:0px;
}
/*class img*/
.img{
text-decoration:none;
}
.img img{
border:0px;
margin:0px;
padding:0px;
}
 
/*div coouvre_menu*/
#couvre_menu{
width:100%;
top:-7px;
background-image:url(../img/nav_l.gif);
background-repeat:no-repeat;
position:relative;
}
/*div menu*/
#menu{
width:91%;
top:-10px;
background-image:url(../img/nav_r.gif);
background-repeat:no-repeat;
background-position:top right;
padding-left:9%;
}
#menu img{
border:0px;
padding:0px;
margin:0px;
}
 
/* fond blanc pour le menu */ 
div#menu ul.niveau1{
display:inline;
}
div#menu ul.niveau1 li ul li{
display:block;
height:25px;
border-bottom:1px solid #D3D3D3;
padding-right:0px;
padding-left:2px;
padding-top:3px;
width:inherit;
}
 
 
div#menu ul.niveau1 li {
position:relative;
 list-style: none;
 border:0px;
 display:inline;
 margin:0px;
 margin-right:-5px;
 margin-left:-5px;
 padding:0px;
 width:100%;
 text-align:left;
 }
div#menu ul ul {
position: absolute;
 top: 80%;
 left:0%;
 display:none;
 background-color:#F2F2F2;
 border:1px solid #D3D3D3;
 border-left:5px solid #D33749;
 padding:0px;
padding-left:5px;
padding-right:5px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
 
 }
 
/* on rajoute une bordure a gauche et des padding, on doit donc r?ajuster la taille 100-(8 de bordure + 8 de padding) =84 */ 
div#menu li a {
text-decoration: none;
color:#0D3063; 
width:inherit;
 }
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2{
display:block;
}
 
div#menu ul ul li:hover {
background-color: #0D3063;
}
 
div#menu ul ul li:hover  a{
color:white;
}

Menu deroulant totalement en css: pb sous ie

CSS

Vue hybride

Discussions similaires

Partager

Partager