Centrer un menu avec largeur variable (width:auto)

Bonjour à tous,

J'ai le problème suivant :

je cherche à centrer mon menu au sein d'un div,
cependant impossible de centrer celui ci, car le <ul> (en width:auto, car je ne souhaite pas de largeur fixe, les items étant censés être dynamique par la suite) plutot que de faire la taille de l'ensemble des <li> fait la taille total du div#menu, comme le démontre la bordure verte, qui ne s'arrete pas à "actualité" ...
Cela semble venir du float:left, mais je ne peux malheureusement pas m'en passer.

Quelqu'un aurait-il une idée ???
J'avoue que ça me tirer une grosse épine du pied.

Voici le code html

<div id="menu" class="menu">	
	<ul id="p7menubar">
		<li id="firstli"><a href="#">SOCIÉTÉ</a>
			<ul>
				<li><a href="#">Présentation</a></li>
				<li><a href="#">Nos engagements de service</a></li>
			</ul>
		</li>
		<li><a href="#">TARIFS</a></li>
		<li><a href="#">VISITE AJOUTÉE</a>
			<ul>
				<li><a href="#">Démo</a></li>
				<li><a href="#">Accès et Portail</a></li>
			</ul>
		</li>
		<li><a href="#">RÉFÉRENCES</a>
			<ul>
				<li><a href="#">Clients</a></li>
				<li><a href="#">Partenaires</a></li>
				<li><a href="#">Témoignages clients</a></li>
			</ul>
		</li>
		<li><a href="#">ACTUALITÉS</a></li>
	</ul>
</div>	

et le code css

/* 
  ------------------------------------
  PVII Menu CSS Express Drop-Down Menu
  by Project Seven Development
   www.projectseven.com
 
  ------------------------------------
*/

#firstli a{
	border-left: 1px solid #333;
}
ul#p7menubar {
	width: auto;
	text-align:center;
	margin:0px;
	margin-right:auto;
	margin-left:auto;
	border: 3px solid green;
	
}
#p7menubar, #p7menubar ul {
	padding: 0;
	margin:0;
	list-style: none;
	font-family: Arial, Helvetica, sans-serif;
		
}

#p7menubar li {
	float: left;
	width: 13em;
	padding-top:4px;
	padding-bottom:4px;
	
}

#p7menubar a {
	display: block;
	text-decoration: none;
	padding: 0 10px 0 10px;
	
	border-right: 1px solid #333;
	font-size: .60em;
	color: #333;
	font-weight:bold;
	background-color	:#fff;	
}
#p7menubar a.trigger {
	display: block;
	padding: 5px 16px 5px 10px;
	background-image: url(images/p7PM_dark_south.gif);
	background-repeat: no-repeat;
	background-position: right center;
}
#p7menubar li {position: relative;}

/* hide from IE mac \*/
#p7menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */

#p7menubar li ul, #p7menubar ul li  {

	width: 12em;
	text-align:left;

}
#p7menubar ul li a  {
	color: #565656;
	border-right: 0;
	padding: 3px 12px 3px 16px;
}
#p7menubar li ul {
	position: absolute;
	display: none;
	background-color: #FFFFFF;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	/*
	background-image: url(images/p7exp_mgrad.jpg);
	background-repeat: repeat-x;
	*/

}
#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
	color: #000000;
	background-color: #88AEDD;
}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
	display: block;
}
#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
	color: #000000;
	background-color: transparent;
}
#p7menubar ul a:hover {
	background-color: #606060!important;
	color: #FFFFFF !important;
}

Merci à ceux qui auront pu me lire.
Modifié par crashmx (22 Jun 2007 - 19:20)

Tu peux aussi générér des menus horizontaux avec la propriété inline plutôt que float.

Tu peux aussi t'inspirer de ce menu et autres menus sur CSS Play.

bonsoir,

je te propose aussi un menu deroulant que j'ai mis en ligne il y a peu :

http://gcyrillus.free.fr/essai/menu_deroulant.html

Basé sur le css , il y a un javascript non obstrusif basé sur le dom , qui permet de rendre ce menu actif aussi dans les versions d'internet Explorer IE6 et inferieur.

Ce menu est deroulant et centré (ce que tu recherches).

Le javascript ajouté pour IE 6 (et inférieur) l'est ,par le biais des commentaires conditionnels et n'est donc chargé que dans ce cas.
Le html n'est pas du dhtml (pas de onmouseover="function(menu)" ).

Le centrage s'appuie sur le display:table; et pour IE, par le biais des commentaires conditionnels , j'applique ma technique simili display:table; en jouant sur le layout , comportement spécifique de IE qui permet en partie de reproduire le display:table;

Dans cette exemple en ligne , les comportements du menu sont identiques dans IE et les autres navigateurs.

Les règles css appliquées pour centré le menu sont commentées , il est facile de les extraire .

C'est une page démo qui reçoit css et javascript dans l'entête , il n'y a pas de fichiers externes a téléchargés pour la rapatrier sur votre disque dur.

Pour faire raccourcie pour ton menu:

<style type=text/css >
ul#p7menubar {
	display:table; /* pour les besoins de centrage */
	text-align:center;
        margin:auto;
	border: 3px solid green;
}
</style>
<!--[if  IE ]>
<style type="text/css">
/*portion de css sert a centré le menu */
#menu  {
    text-align:center;/* en lieu et place du margin:auto ; inapplicable */ 
    }
#p7menubar {
/* simule le comprtement du display:table (ou d'un tableau) */
   display:inline;
   zoom:1;
}

</style>
<![endif]-->

Modifié par gcyrillus (28 Jun 2007 - 23:42)