28173 sujets

CSS et mise en forme, CSS3

Centrer des sous menus

Bonjour, j'aurais besoin d'aide pour centrer mes sous menus car ceux-ci se mettent à gauche. J'ai mis à la suite le code css et html.
Merci d'avance.

<style type="text/css">
<!--
body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}

dt, dl, dd, ul, li  {
list-style-type: none;
margin: 1 20px 0 0;
padding: 0;
background: #CCE3FB;
}

}
#menu {
position : absolute;
left: 400px;
top: 20px;
background: #CCE3FB;
}

#menu dl {
float: left;
}

#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #029DFF;
background: #CCE3FB;
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 {
position: absolute;
left: 0;
font-size: 0.8em;
width: 664px;
}
-->
</style>

</head>

<body>

<div id="menu">
	<dl>

		<dt onmouseover="montre('smenu1');"onmouseout="javascript:montre('');"><a href="#">Accueil</a></dt>
			
	</dl>
	
	<dl>			
		<dt onmouseover="montre('smenu2');"onmouseout="javascript:montre('');"><a href="#">Disciplines</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Individuelles</a></li>
					<li><a href="#">Collectives</a></li>

				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu3');"><a href="#">Boutiques</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>
				</ul>
			</dd>
	</dl>

	
	<dl>	
		<dt onmouseover="montre('smenu4');"><a href="#">Liens</a></dt>
	</dl>
	
	
	<dl>	
		<dt onmouseover="montre('smenu5');"><a href="#">Panier</a></dt>
			<dd id="smenu5">
				<ul>
					<li><a href="#">Sous-menu 5.1</a></li>
					<li><a href="#">Sous-menu 5.2</a></li>
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="montre('smenu6');"><a href="#">Recherche</a></dt>
			<dd id="smenu6">
				<ul>
					<li><a href="#"><input type="text" name="Mot" size="14" style="MARGIN: 0px" class="Texte"  />
					<input type="submit" value="Chercher" border="0" width="60" align="middle" height="17" alt="Lancer la recherche!" /></a>
	                </li>
				</ul>
			</dd>
	</dl>
</div>
</body>
A vrai dire je parlais au debut des sous-menus mais après test sur plusieurs navigateurs, je me rends compte que mon menu en général n'est pas centré, exepté sur IE7.
Modifié par rhomjey (06 Jun 2007 - 14:54)

<style type="text/css">

<!--

body {margin: 10px;
padding: 0;
font: 12px Verdana, sans-serif;
}



dt, dl, dd, ul, li  {
list-style-type: none;
padding: 0;
background: #CCE3FB;
}

#menu dl {
float: left;
width:10em;
text-align:center
}

#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #029DFF;
background: #CCE3FB;
}

dd{font-size:0.8em;margin:0em}

-->

</style>



</head>



<body>



<div id="menu">

	<dl>



		<dt onmouseover="montre('smenu1');"onmouseout="javascript:montre('');"><a href="#">Accueil</a></dt>

			

	</dl>

	

	<dl>			

		<dt onmouseover="montre('smenu2');"onmouseout="javascript:montre('');"><a href="#">Disciplines</a></dt>

			<dd id="smenu2">

				<ul>

					<li><a href="#">Individuelles</a></li>

					<li><a href="#">Collectives</a></li>



				</ul>

			</dd>

	</dl>

	

	<dl>	

		<dt onmouseover="montre('smenu3');"><a href="#">Boutiques</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>

				</ul>

			</dd>

	</dl>



	

	<dl>	

		<dt onmouseover="montre('smenu4');"><a href="#">Liens</a></dt>

	</dl>

	

	

	<dl>	

		<dt onmouseover="montre('smenu5');"><a href="#">Panier</a></dt>

			<dd id="smenu5">

				<ul>

					<li><a href="#">Sous-menu 5.1</a></li>

					<li><a href="#">Sous-menu 5.2</a></li>

				</ul>

			</dd>

	</dl>

	
      <dl>	

		<dt onmouseover="montre('smenu6');"><a href="#">Recherche</a></dt>

			<dd id="smenu6">

				<ul>

					<li><a href="#"><input type="text" name="Mot" size="14" style="MARGIN: 0px" class="Texte"  />

					<input type="submit" value="Chercher" border="0" width="60" align="middle" height="17" alt="Lancer la recherche!" /></a>

	                </li>

				</ul>

			</dd>

	</dl>

</div>

</body>


Je ne sais pas comment tu as fait pour bidouiller ton code mais voilà
une solution qui doit se rapprocher de ce que tu veux....(ci-dessus)
Le problème avec le code que tu m'a mis, c'est que mes sous menu sont verticale alors que je les voudrais horizontales. merci quand même.
Le problème dans ton menu est que tes sous-menus doivent être en ligne c'est bien ça ?

Le soucis est que les dd sont inclus dans les dl et les dl ont une largeur assez petite, du coup le 
#menu li{display:inline}
ne se remarque même pas.
Il suffit de changer la largeur des dl de mon code pour t'en rendre compte

#menu dl {
float: left;
width:10em;    //passe ici à 30em
text-align:center
}
Sujet clos
Aller à