18073 sujets

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

[menu Deroulant horizontal] Taille

Bonjour,

J'ai repris le menu deorulant horizontal des tutos je l'ai modifié a ma guise mais il reste un probleme sans solutions, les "categorie de mon menu sont espacés et je n'ais pas trouver moyens de les raprocher. Smiley decu

Vous pouvez le voir ici :
http://www.kekette.team.free.fr//menu/menuderoulant.htm

Mon css ici :
http://www.kekette.team.free.fr//menu/style.css


et voila mon html ( je ne pense qu'il ait un quelquonc role a jouer dans ce probleme mais bon)




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
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>
<link rel="stylesheet" media="screen" type="text/css" title="style.css" href="style.css" />
<title>Dg V.3</title>
</head>

<body>


<


<div id="menu">
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1 | </dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu</a></li>

					<li><a href="#">Sous-Menu </a></li>
					<li><a href="#">Sous-Menu </a></li>
					<li><a href="#">Sous-Menu</a></li>
					<li><a href="#">Sous-Menu </a></li>
					<li><a href="#">Sous-Menu </a></li>
				</ul>

			</dd>
	</dl>
	
	
		<dl>			
		<dt onmouseover="javascript:montre('smenu2');">Menu 2 | </dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu</a></li>

					<li><a href="#">Sous-Menu </a></li>
					<li><a href="#">Sous-Menu </a></li>
					<li><a href="#">Sous-Menu</a></li>
					<li><a href="#">Sous-Menu </a></li>
					<li><a href="#">Sous-Menu </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>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</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>



Voila a bientot Smiley lol
Bonsoir,

Effectivement, le problème ne se situe pas au niveau du code HTML. Il provient tout simplement de la largeur spécifiée pour l'élément <dl> dans la feuille de styles CSS :


#menu dl {
float: left;
width: 11em;
border:none;
}


En spécifiant 7em environ à la place de 11em, tu obtiendras certainement l'espacement que tu désires. Smiley cligne

J'en profite également pour te signaler que si tu souhaites agrandir la taille des sous-menus, c'est sur le width de #menu dt et #menu dd qu'il faudra jouer (je te conseille de spécifier pour ces deux-là la même valeur, comme actuellement 80px, cela permet de conserver le centrage).
Modifié par Romain H. (22 Oct 2005 - 23:03)
Sujet clos
Aller à