28172 sujets

CSS et mise en forme, CSS3

Salut tout le monde, le sujet a sûrement été abordé des centaines de fois, il s'agit du menu horizontal.

En passant par les display inline ou des float, j'obtiens un menu horizontal, tout ce qu'il y a de plus normal.
J'aimerai donc savoir comment centrer les liens de <ul> dans le div conteneur ; sachant que le nombre de liens dépend de l'utilisateur du site, la largeur du div conteneur doit s'adapter.
Je ne vois pas trop comment faire avec mon display ou mon float...

Mon menu actuel :
Menu horizontal

Le code actuel :
#menu {width:100%;background: url('images/menu_bg2.png');}
#menu ul {height:40px;}
#menu li {list-style:none;}
#menu a {display: block; float:left; padding-right:40px; height: 40px; line-height: 40px; text-align:center; color:#FFFFFF;}


L'objectif : centrer les titres horizontalement et verticalement, adapter le cadre et ajouter les deux petites images à chaque extrémité.

Une petite idée ?
Modifié par Panshu (23 Jun 2011 - 10:41)
Je ne suis pas sûr d'avoir tout saisis, mais tu as essayé de mettre ton text-align:center dans ton div menu ?
J'avais essayé oui, mais ça ne fonctionnait pas.
J'ai réussi en créant un tableau de mes li, et là j'avais à peu près le rendu que je cherchais (mais c'était assez sale comme code).

J'ai donc pris la décision de recoder mon HTML et finalement, avec display inline, padding, line-height et text-align, ça passe !

#global_content { /*** On centre l'ensemble du contenu du site web ***/
	text-align:center;
	width:800px;
}

/*** Menu ***/
#menu {height:66px; margin:0; padding:0; list-style:none; text-align:center;}
#menu li {display:inline;}
#menu li a {line-height:34px; padding:10px 2px; cursor:pointer; margin-right:-3px;
border-right:2px solid #583225; border-left:2px solid #6b4129;}


Merci =)
Modifié par Panshu (23 Jun 2011 - 10:39)