18073 sujets

Questions générales et questions de débutants

Agrandir le menu horizontal une ligne ?

Bonjour,

J'ai récupéré le menu horizontal avec les sous-menus sur une seule ligne.
Je voudrais que la partie du menu qui est toujours visible soit plus grande. Il faudrait donc plus d'espace entre chaque item.
Je ne trouve pas la solution. Quelqu'un peut m'aider please ?
Un grand merci pour tout.

<!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>
<title>Menu horizontal d&eacute;roulant sur une ligne en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels  http://css.alsacreations.com  */
body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
	position : absolute;
	left: 50px;
	top: 20px;
	width: 382px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #000;
background: #fff;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: 564px;
}


.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}

-->
</style>

</head>

<body>

<div id="menu">

	<dl>
		<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></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="montre('smenu2');"><a href="#">Menu 2</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-menu 2.1</a></li>

					<li><a href="#">Sous-menu 2.2</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></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>
					<li><a href="#">Sous-menu 3.4</a></li>
					<li><a href="#">Sous-menu 3.5</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-menu 4.1</a></li>
					<li><a href="#">Sous-menu 4.2</a></li>

					<li><a href="#">Sous-menu 4.3</a></li>
				</ul>
	  </dd>
	</dl>
	
</div>

</body>
</html>
Bonjour mino,

D'abord, tu dois agrandir "width: 382px;" dans "#menu" (500px par exemple).
Ensuite, tu peux ajouter : 
#menu dt {
margin-left: 40px; /*à ton goût*/
}

Modifié par papillon41 (07 Feb 2006 - 18:00)
Parfait, ça a bien fonctionné.
Une dernière chose : je trouve que les sous-menus sont un peu trop proches du menu. Comment faire pour corriger ça ?
Encore merci pour tout.
Sujet clos
Aller à