Petite aide sur un menu

bonjour a vous,
pour renseignement y a t'il une possibilité de centrer ce beau menu http://css.alsacreations.com/modelesmenus/hd1.htmdans un conteneur sachant que ce menu a une position float si je ne me trompe , messieurs ,mesdames à votre bon coeur de me répondre merci d'avance
Modifié par oscars (27 Oct 2006 - 14:48)

je pensais avoir resolu avec un padding left mais je me trompe
Modifié par oscars (27 Oct 2006 - 11:54)

Si le menu a une largeur fixe, on utilisera les marges automatiques :
Centrer les éléments ou un site web en CSS

donc voila pour plus d'info voila le code que j'aimerais utiliser pour ensuite le placer par ex soous une balise header

#haut 
{
position: relative;
margin-left:auto;
margin-right:auto;
width:760px;
background-color:#000;
border-style: groove ;
border-top-width:medium 3em;
border-color:#CCCCCC;
}
dl, dt, dd, ul, li
 {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu 
{
left: 0;
z-index:100;
}
#menu dl 
{
float:left;
width: 10.5em;
margin: 0 1px auto;
}
#menu dt 
{
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
height:20px;
line-height:20px;
margin:2px 0;
}
#menu dd 
{
position:absolute;
z-index:100;
background:#CCCCCC;
border: 1px solid gray;
}
#menu li
 {
text-align: center;
background: #CCC;
font-weight:bold;
}
#menu li a, #menu dt a 
{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;

}
#menu li a:hover, #menu dt a:hover 
{
background: #eee;
}

a {

text-decoration: none;
color: black;
color: #222;
}

html

[code]<div id="haut">
	  
			<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();" ><a href="accueil.html" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Contact</dt>
			<dd id="smenu1"onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="contactSAV.html">Service Après-Vente </a></li>
					<li><a href="contactScom.html">Service Commercial</a></li>
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Produits</dt>
			<dd id="smenu2"onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="spectroscopy.html">Spectroscopie</a></li>
					<li><a href="chroma.html">Chromatographie</a></li>
					<li><a href="consommable.html">Consommable</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">JASCO  Monde</dt>
			<dd id="smenu3"onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Amérique du Nord</a></li>
					<li><a href="#">Amérique Latine</a></li>
					<li><a href="#">Europe</a></li>
					<li><a href="#">Afrique du Nord</a></li>
					<li><a href="#">Asie</a></li>
					<li><a href="#">Océanie</a></li>
				</ul>
			</dd>
	</dl>
</div>
		
	  </div>

merci bien
Modifié par oscars (27 Oct 2006 - 15:00)

Salut.

Ton menu n'est pas positionné en float, mais en absolu. Ce sont les listes de définition à l'intérieur du menu qui sont en float.

Pour centrer correctement le menu, il faudrait connaître la largeur totale de celui-ci. A calculer en fonction du nombre d'éléments de menu, de la taille des marges & padding, etc. Ensuite, supprimer le left: 0; et remplacer par

width: XXXpx;
margin: 0 auto;

en espérant que ça fonctionne avec les éléments positionnés

Sinon, je suppose qu'on pourrait aussi faire comme ceci :

#menu {
position: absolute;
width: 100%;
text-align: center;
}
#menu dl {
display: inline;
}

mais ce ne sera pas sans conséquences sur le rendu, et il faudrait adapter le reste du menu ...

je viens d'essayer ce que tu m'a proposé Sopo
le premier code ne me donne rien me suis peut-etre planté et bien sur le deuxième code me transforme mon menu deroulant horizontal en menu deroulant vertical merci quand meme a vous pour ces reponses