Aligner une div de taille inconnue dans une div de largeur définie

Bonjour à tous,

Après des années à trouver des solutions sur le forum, je dois à mon tour venir ici pour poser une question.

Tout d'abord un exemple de ce que je souhaite :

http://img171.imageshack.us/img171/5591/exempleq.jpg

Maintenant place au code :

<div id="header-menu" class="nav2"> 
	<div> 
		<ul class="blue"> 
			<li><a href="./" title="Se rendre sur l'accueil">Accueil</a></li> 
		</ul> 
 
		<ul  class="red"> 
			<li> 
				<!-- Si c'est IE7 on ferme le lien --> 
				<a href="#">Menu1<!--[if IE 7]><!--></a><!--<![endif]--> 
				<ul> 
					<li><a href="?pg=1">Sous Menu 1.1</a></li>                       
					<li><a href="?pg=2">Sous Menu 1.2</a></li>                       
				</ul>		
			</li> 
		</ul> 
		
		<ul  class="green"> 
			<li> 
				<!-- Si c'est IE7 on ferme le lien --> 
				<a href="#">Menu2<!--[if IE 7]><!--></a><!--<![endif]--> 
				<ul> 
					<li><a href="?pg=5">Sous Menu 1.1</a></li>                                							
				</ul>		
			</li> 
		</ul> 
		
		<ul  class="grey"> 
			<li> 
				<!-- Si c'est IE7 on ferme le lien --> 
				<a href="#">Menu3<!--[if IE 7]><!--></a><!--<![endif]--> 
				<ul> 
					<li><a href="?pg=5">Sous Menu 1.1</a></li>                                							
				</ul>		
			</li> 
		</ul> 
	</div> 
</div>

Et le code css qui va avec :

/* Menu dynamique */
#header-menu { float:left; width:980px; border:none; background:url(../../themes/titanium/images/bg_head_bottom_nav.png);font-size:130%  }
#header-menu div { position:relative; left:35%; height:40px;border-left:1px solid #AFAFAF; padding:0; margin:0 auto; }
#header-menu ul { padding:0; list-style-type:none  }
#header-menu ul li { float:left;position:relative;z-index:auto !important /*Non-IE6*/; z-index:10 /*IE6*/;border-right:solid 1px #AFAFAF  }
#header-menu ul li a { float:none !important /*Non-IE6*/; float:left /*IE-6*/;display:block;height:3.3em;line-height:3.3em;text-decoration:none;font-weight:700;color:#646464;padding:0 16px  }
#header-menu ul li ul { display:none;border:none  }
/* Menu dynamique hovering */
#header-menu ul li:hover ul { opacity:0.8; display:block;width:15em;position:absolute;z-index:9;top:3.2em;margin-top:0.1em;left:0  }
#header-menu ul li:hover ul li a { display:block;width:15em;height:auto;line-height:1.3em;margin-left:-1px;border-left:solid 1px #AFAFAF;border-bottom:solid 1px #AFAFAF;background-color:#EDEDED;font-weight:400;color:#323232;padding:4px 16px  }
/* Menu dynamique couleurs */
#header-menu ul.red li a:hover,#header-menu ul.red li:hover { background-color:#FFAFB6  }
#header-menu ul.blue li a:hover,#header-menu ul.blue li:hover { background-color:#8FC7FF  }
#header-menu ul.green li a:hover,#header-menu ul.green li:hover { background-color:#CBFF7F  }
#header-menu ul.orange li a:hover,#header-menu ul.orange li:hover { background-color:#FFDE9F }
#header-menu ul.grey li a:hover,#header-menu ul.grey li:hover { background-color:#D2D2D2  }

Voici le rendu sur le template html : http://www.opendesigns.org/preview/?design=198

Sachant que ce menu est créé dynamiquement en php, le nombre de menu peut varier et donc la largueur n'est pas connue.

Existe t'il un moyen pour centrer ce menu ?

Merci à vous

C'est le float:left sur #header-menu ul li qui fait que c'est aligné automatiquement à gauche.

Existe t'il une autre solution pour positionner plusieurs liste à coté l'une de l'autre ?

Salut

Je t'ai fait un petit exemple, j'espère que ça t'aidera.

<div>
	<ul>
    	<li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
    </ul>
</div>

* { list-style:none;}
div ul { margin:0 auto; text-align:center; }
div ul li { display:inline; }
div ul li a{ display:inline-block; width:100px; height:40px; }

J'ai mis une largeur hauteur fixe au lien pour montrer l'effet du display:inline-block. Tu pourras mettre les valeurs que tu souhaites.

En espérant avoir répondu à ta question.

Merci pour ta réponse, c'est peut être un début de solution..

Mais mon problème ne réside pas dans le faite d'aligner le <li> mais bien les <ul>

Dans ce code :

<div>
    <ul>
        <li>Menu 1</li>
    </ul>
    <ul>
        <li>Menu 2
            <ul>
                <li>Sous menu 2.1</li>
            </ul>
        </li>
    </ul>
</div>

Comment faire pour centrer l'ensemble des Ul dans la div ?

Merci

Ça commence à devenir complexe

Pour centrer un truc, il est difficile ( voir impossible ) avec des floats car il faudrait que ton conteneur ait une largeur fixe. ( ce que tu ne veux absolument pas )

L'utilisation des display:inline permettait de centrer tes éléments comme du texte mais puisque tes sous-menu sont des blocs et que c'est impossible d'avoir des blocs dans des inlines, ma petite façon fonctionnera pas.

Sinon, j'ai quelques questions pour toi pour t'orienter vers une autre solution. Tu dis ne pas savoir la "largeur" qu'occupe la totalité des items du menu. Cependant, est-ce que les menu ( <li> pourraient avoir des largeurs fixes ?

Si tu génères en PHP tes menus, tu pourrais simplement faire

<div style="margin:0 auto; width:<?php items de menu * largeur fixe des <li> ?>"> TON MENU </div> 

Sinon je suis un peu à cours de "solutions" CSS. Après ça, tu peux te faire un script javascript qui calcule la largeur de tes éléments et qui ajoute un style à ton div conteneur ( comme ça tu n'aurais aucune largeur fixe nul part et le script calculerait tout ça ) pour centrer comme avec la méthode PHP.

Si j'ai d'autres solutions qui me viennent à l'esprit, je te les ferai parvenir.

Sorano merci !

J'en suis venu à la même solution que toi, d'ou ma venue sur ce forum.

Malheureusement je vois que j'avais eu la même réflexion que toi, et que ça ne sera pas facile de faire ça proprement ...

J'attends de tes nouvelles si une solution miracle arrive :-p