CSS et balise DT DL DD

**chillansky** · 28/09/2006, 12h43

Bonjour à tous,

Je me suis fait un petit menu déroulan en utilisant les DD DT DL. Mais le problème est que lors du sorval, le contenu du menu aparait décalé vers la droite, avec un espace entre le bord gauche les poins de sous menui.
J'aimerais que lors de l'affichage des sousmenu, que sa longeur prennent tout la longeur du menu.

Voici le code pour que vous puissiez facilement tester.

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
<html>
<head>
 
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('menuquicklink'+i)) {document.getElementById('menuquicklink'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
 
 
<style type="text/css">
<!-- 
#menuquicklink {
	position: absolute;
	top: 0;
	left: 0;
	z-index:100;
	width: 100%;
}
 
#menuquicklink dl {
	float: left;
	margin: 0 1px;
}
 
#menuquicklink dt {
	cursor: pointer;
	text-align: center;
	background: #014578;
	border: 1px solid gray;
	color:white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: 14px;
	font-weight: normal;
}
 
#menuquicklink dd {
	border: 1px solid gray;
	background: #014578;
	text-align: left;
}
 
#menuquicklink li {
	text-align: left;
	background: #014578;
	margin: 0;
	padding: 0;
	list-style-type: none;
 
}
 
#menuquicklink li a, #menuquicklink dt a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	color:white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: 20px;
	font-weight: normal;
	text-align: left;
}
 
#menuquicklink li a:hover, #menuquicklink dt a:hover {
	background-color:#005A9B;
}
 
 
-->
</style>
 
 
</head>
<body>
 
<div id="menuquicklink">
 
	<dl onmouseover="javascript:montre('menuquicklink1');" onmouseout="javascript:montre();">			
		<dt >Menu 1</dt>
			<dd id="menuquicklink1"	>
				<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>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
 
			</dd>
	</dl>
 
</div>
 
</body>
</html>

D'avance merci ç!

**balu** · 29/09/2006, 08h40

Bonjour chillansky,

Code :

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

1
2
3
4
5
/*** Au début du CSS ***/
* {
	margin: 0;
	padding: 0;
}

Solution rapide pour enlever le décalage.

Le décalage dans les listes est souvent une histoire de marges.

CSS et balise DT DL DD

CSS

Discussions similaires

Partager

Partager