Alignement menu horizontal

Bonjour à tous,

voilà je débute complètement dans le web, et voilà que j'en suis à la construction du menu, mais voilà après moult recherche sur le net, j' arrive toujours pas à centrer l'ensemble de mon menu horizontal. en fouillant sur des forum, je vois bien que c'est une vraie petite galère à chaque fois.

je me demandais s'il existait une vraie solution fiable ou si c'était peine perdu, ça fait un petit moment que je butte dessus, et vos conseils serait vraiment les bienvenue.

voici le css, je vois pas trop comment mis prendre et des que je tente un truc du genre en bidouillant les position et les float, je m'y perds rapidement, pourtant je commence à cerner les fonctionnement de chacun gràce aux petits tutos par ci par là.

ul{
    display: block;
    margin: 0 auto;
}
#menu, #menu ul {
    line-height:24px;
    list-style:none outside none;
    padding:0px;
    text-align:center;
}
#menu {
    margin:0 auto;
    font-family: Arial, Verdana;
    font-size:14px;
    font-weight:bold;
}
.titleMenu {
    display: block;
    font-size: 70%;
    font-weight: normal;
}
#menu a {
    background:none repeat scroll 0 0 black;
    color:#ffffff;
    display:block;
    padding:4px 15px;
    margin: 6px 6px;
    text-decoration:none;
    width:auto;
    
    border: solid 2px black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 2px black; 
    -webkit-box-shadow: 0px 0px 2px black;  
    box-shadow: 0px 0px 2px black;
    text-shadow: 0px 0px 3px black;
    cursor: pointer;
}
#menu li {
    display:inline;
    border-right:1px solid #FFFFFF;
    float:left;
}
html > body #menu li {
}
#menu li ul {
    left:-999em;
    position:absolute;
    width: 132px;
}
#menu li ul li {
    border-top:1px solid #FFFFFF;
}
html > body #menu li ul li {
    border-top:1px solid transparent;
}
#menu li ul ul {
    border-left:1px solid #FFFFFF;
    margin:-22px 0 0 144px;
}
html > body #menu li ul ul {
    border-left:1px solid transparent;
}
#menu a:hover, #menu li ul a:hover  { 
    background:none repeat scroll 0 0;
    color:#000000;
    
    border: solid 2px black;
    background-color: white;
    text-shadow: 0px 0px 2px black;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 350ms;
    -moz-transition-property: background-color;
    -moz-transition-duration: 350ms;
    -o-transition-property: background-color;
    -o-transition-duration: 350ms;
    transition-property: background-color;
    transition-duration: 350ms;
    -moz-box-shadow: 0px 0px 0px black; 
    -webkit-box-shadow: 0px 0px 0px black;
    box-shadow: 0px 0px 0px black;
    text-shadow: 0px 0px 0px black;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
    left:-999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
    left:auto;
    min-height:0;
}

Modifié par legaia (12 Jun 2010 - 21:20)

s'il vous manque des éléments pour pouvoir m' aider, n'hésitez pas, je continue à chercher de mon coté.

Bonjour,

Tu débutes dans le Web et tu fais un menu à deux niveaux (à priori un menu déroulant)?
Ne cherche pas plus loin, elle est là l'erreur. Quand on débute, on commence par des choses simples. Les menus déroulants sont des choses relativement complexes qu'il vaut mieux réserver aux intégrateurs web professionnels, ou au minimum aux personnes ayant déjà un peu d'expérience de l'intégration.

Mais rapidement: tes LI de premier niveau ont une largeur fixe. Si tu connais le nombre d'éléments dans ton menu, tu peux donner à ton UL de premier niveau une largeur fixe (nombre d'éléments de premier niveau fois leur largeur) et le centrer horizontalement avec les marges automatiques (margin: 0 auto;).
Modifié par Florent V. (13 Jun 2010 - 11:05)

Merci pour votre réponse !

débutant, c'est un grand mot, d'ailleurs j'ai acheté et fais votre dvd elephorm, bien qu'il soit une excellente introduction, il ne va pas très loin dans les menus, j'espere voir arrivé quelque chose de plus poussé pour ceux qui voudrait aller plus loin.
Je veux pas devenir webdesigner, mais juste être autonome rapidement. Donc, là je consacre un petit mois à bosser un peu tout, php, javascript, html, css, je veux pas être une expert car le web n'est pas ma grande passion bien que je trouve cette activité tres sympathique, mais juste m'initier un bon coup mais sérieusement, voilà tout.

Je comprends le point de vue de laisser ça aux pros du secteur, mais bon je me sens parfaitement capable de réaliser un site statique de qualité adapté à mes modestes besoins car globalement je me débrouille

je vais exploré cette piste; merci !

édit : finalement, je vais partir sur un menu non déroulant car j'en ai pas tant besoin que ça, mais toujours en voulant centrer le tout.
Modifié par legaia (13 Jun 2010 - 12:30)