18073 sujets

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

Centrer un menu horizontal en <dl><dt>

Bonjour,
Comme beaucoup de personnes, j'ai défini un menu horizontal de la façon suivante :

<div>
<dl>
	<dt onmouseover="montre('smenu1');" onfocus="montre('smenu1')" onmouseout="cacher('smenu1')">
		<a href="#" title="">Menu1</a>
	</dt>
	<dd id="smenu1">
		<ul>
			<li><a href="#" title="">Item1</a></li>
			<li><a href="#" title="">Item2</a></li>
		</ul>
	</dd>
</dl>
<dl onmouseover="montre('smenu2');" onfocus="montre('smenu2')" onmouseout="cacher('smenu2')">
	<dt>
		<a href="#" title="">Menu2</a>
	</dt>
	<dd id="smenu2">
		<ul>
			<li><a href="#" title="">Item5</a></li>
			<li><a href="#" title="">Item4</a></li>
			<li><a href="#" title="">Item3</a></li>
		</ul>
	</dd>
</dl>
</div>


Et comme beaucoup de monde, j'ai un mal fou à rendre "inline" toutes mes blocs "Menu1" et "Menu2".
La seule solution qui fonctionne c'est d'utiliser un float (left par exemple) sur les éléments dl. Or je voudrais centrer mon menu.
J'ai bien essayé de centrer le div contenant mon menu via un "margin-left: auto; margin-left: auto", mais rien à faire. D'autant plus que mon div est déjà placé en position absolute.

Je ne trouve nulle part (sur alsa comme sur bien d'autres sites) une solution qui puisse simplement permettre un "display: inline" sur les balises "dl".

Alors voila la raison de mon message sur ce forum.

D'avance merci !
Modifié par chben (07 Jul 2005 - 14:47)
As tu eu une solution car j'ai le même problème, je désirerais centrer le sous menu horizontal et malgrès plusieurs solutions proposés sur d'autres posts, je n'y parvient pas?
Disons que je suis parvenu à centrer le bloc contenant le menu en lui donnant une largeur adaptée au contenu et plus petite que le bloc conteneur dans lequel mon menu se situe.
A l'intérieur de mon menu, tout flotte toujours à gauche mais vue que le bloc de menu n'est plus à 100% de largeur et centré, le contenu n'est pas calé à gauche mais bien au milieu.

Je sais pas si c'est facilement compréhensible : je n'ai pas le temps tout de suite de te mettre le code pour exemple, mais je te fais ça pour ce soir ou demain.
Peut-être que tu aura une façon d'optimiser encore plus mon bricolage !
Non je crois que c'est assez clair.

Je te remercie pour ta réponse
Modifié par chooky (12 Jul 2005 - 17:03)
Voici le CSS appliqué au menu. Il fonctionne plutôt bien sous mozilla, mais sous IE, tous les items principaux du menu sont en block sous IE...
Je recherche une parade, mais ça commence à me gaver ce menu centré !

#menu {
font-size: 0.8em;
border: 0px solid black;
padding:0px;
position : absolute;
display: table-cell;
left:25%;
top:120px;
width:50%;
}

#menu dt {
height:1.75em;
margin:0px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
width: 3em;
}

#menu dt a {
color: #000;
padding:0px 5px;
text-decoration: none;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
display: block;
left: 0;
border-top: 1px solid gray;
text-align: left;
width:100%;
}
Si vous avez trouvé la solution de centrer un menu utilisant des listes de définition, je suis preneur !
arf....je peux pas encore le montrer car c'est un site pour un lancement de produit !

Je vais me débrouiller pour en faire une version montrable en toute légalité : je m'occupe de ça asap.
Sujet clos
Aller à