28220 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer menu déroulant horizontal

bon alors je viens de terminer le livre CSS2 et jme lance dans la pratique un peut alors j'essaie de faire un menu dans ce style là:

http://css.alsacreations.com/modelesmenus/hd1.htm

sauf que j'aimerai pouvoir le centrer mais je n'y arrive pas.

bon pour ce qui est du javascript n'en parlons pas pour le moment
jve juste pouvoir centrer 2 colonne horizontalement déjà.

qlq'un pour m'aider ?

Mon code:

	<div id="top_band">
		<div id="top_menu">
			<dl>
				<dt>Menu 1</dt>
				<dd>
					<ul>
						<li>Lien 1</li>
						<li>Lien 2</li>
						<li>Lien 3</li>
					</ul>
				</dd>
			</dl>
			<dl>
				<dt>Menu 2</dt>
				<dd>
					<ul>
						<li>Lien 1</li>
						<li>Lien 2</li>
						<li>Lien 3</li>
					</ul>
				</dd>
			</dl>
		</div>
	</div>


Mon code CSS:

                                  /* bandeau_haut */
#top_band
{
	height:20px;
	background-color:#FF0000; /* rouge */
	margin:0;
	padding:0;
	padding-left:auto;
	padding-right:auto;
}
                                  /* top_menu */

#top_band div
{
	text-align:center;
}
#top_menu ul, #top_menu li, #top_menu dl, #top_menu dt, #top_menu dd
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#top_menu li
{
	/* là si je met : "display:none" mes titres de menu ce centre bien comme je veut */
}
#top_menu dl, #top_menu dt, #top_menu ul, #top_menu dd
{
	display:inline;
}

Modifié par NeoRamaX (13 Sep 2005 - 09:36)
Bon apres longue recherche j'ai enfin compris le positionnement centré malgré que je l'avais déjà vu dans le livre (a ce sujet je trouve qu'il ne traite pas asser des éléments multiple positionner cote a cote centré dans le livre)

enfin bref voici le code css qui fonctionne:

                                  /* bandeau_haut */
#top_band
{
	height:20px;
	background-color:#FF0000; /* rouge */
	margin:0;
	padding:0;
	padding-left:auto;
	padding-right:auto;
	width:100%;
	position:relative;
}
                                  /* top_menu */
#top_menu
{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-160px;
}
#top_menu ul, #top_menu li, #top_menu dl, #top_menu dt, #top_menu dd
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#top_menu dl, #top_menu dt, #top_menu ul, #top_menu dd
{
	display:inline;
}
#top_menu dl
{
	float:left;
	width:80px; /* largeur des colonnes menu */
}


le truc c que j'aurai bien aimer pouvoir faire mon CSS de sorte que çà centre mon menu meme si je rajoute des categorie.
Modifié par NeoRamaX (12 Sep 2005 - 15:50)
Bon en faite Firefox gere tres bien mais pas IE
si je fais:
#top_menu
{
position:absolute;
top:0;
left:50%;
margin-left:-160px;
}


si mon menu est plus large de la moitier de la fenetre alors çà me ramene des colonne de mon menu en bas des autres sur IE Smiley bawling

qlq'un a une solution plz
Il y a peut-etre une solution en donnant une largeur à ton calque #top_menu ... et en alignant ta liste avec l'attribut text-align ..

Essayes ceci :

#top_menu
{
position:absolute;
top:0;
left:50%;
width: 1000px;
margin-left:-500px;
text-align: center;
}


Smiley smile
Modifié par Champolion (13 Sep 2005 - 08:41)
Merci Champolion j'ai pu résoudre mon probleme grace à ton intervention.

c'est un détail qui vaut de l'or Smiley lol

en fait j'ai mi le width de la taille de mon menu qui fé 700px en faite et çà passe sans soucis. maintenant çà me le centre sans pb sous firefox et ie
Sujet clos
Aller à