Centrer le texte d'un menu de page

Bonjour à tous et à toutes

Voilà, je refais le menu horizontal de ma page web. Jusqu'alors, j'avais un menu horizontal déroulant gérant des sous-menus et des sous-sous-menus. Vous me suivez ?

-exemple
-Association
----charte
--------réglement intérieur
-objectifs
-adhésion

Le problème c'est que la navigation n'est pas assez claire et lisible.
Du coup, j'ai eu l'idée de créer deux menus, un menu central et un menu plus détaillé sans sous-menus.

J'en suis au menu central qui me pose des problème, je n'arrive pas à centrer le menu en rapport à ma page. J'ai beau mettre margin:auto ca ne marche pas
je présume que c'est en rapport avec le display:inline alors que je voudrais avoir un bandeau qui fasse toute la page et le menu texte centré à la page. Mais je ne vois pas comment faire ?

le code css

#underlinemenu{
margin: auto;
padding: 0;
padding-bottom: 25px;
}

#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
}
/*règle pour IE. Supprime la marge extra basse*/
* html #underlinemenu ul{ 
margin-bottom: 0;
}

#underlinemenu ul li{
display: inline;
}

/*Les liens tels que vous voulez qu'ils apparaissent*/
#underlinemenu ul li a{
float: left;
color: #013082;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
/*image de séparation des rubriques avec son adresse*/
background: #F2FAFB url(./design/menudivide.gif) top right repeat-y;
}

/*Ici, c'est pour le survol*/
#underlinemenu ul li a:hover{ 
color: #F2FAFB;
background-color: #013082;
border-bottom: 4px solid red;
padding-bottom: 0;
}

Quant au html

<div id="underlinemenu"		  
<ul>
<li><a href="#" title="assoce">Association</a></li>
<li><a href="#" title="cie">Compagnie</a></li>
<li><a href="#" title="relation">Relation à Soi</a></li>
<li><a href="#" title="danses">Expression Corporelle</a></li>
<li><a href="#" title="theatre">Marionnettes</a></li>       
<li><a href="#" title="spectacles">Spectacles </a></li>
<li><a href="#" title="contact">Contact</a></li>
</ul>
</div>

Merci pour vos aides éventuelles

et voici le résultat visuel sous safari :
http://www.coeuraccords.com/Capturedecran.jpeg
Modifié par omzen (25 Oct 2010 - 16:31)

Pour que le margin:0 auto; fonctionne, tu dois avoir un width sur ton #underlinemenu.
Par exemple

#underlinemenu{ 
margin: auto;
width:900px;
padding: 0; 
padding-bottom: 25px; 
} 

Si tu n'as ensuite qu'à ajuster le width pour que ce soit le plus serré sur ton menu pour que ce soit le plus centré possible.

Sinon autre solution, tu mets les <li> en display:inline et tu mets text-align center sur ton <ul>

J'espère que ça t'aidera

oui ça m'a aidé, merci.

Maintenant, je cherche à faire en sorte que la page cliqué du menu reste marqué, de telle sorte que le visiteur puisse mieux se repérer.

Il semblerait que je ne puisse pas utiliser a:active
est-ce que quelqu'un sait quoi faire ?

#menuprincipal ul li a:hover { 
color: #F2FAFB;
background-color: #013082;
border-bottom: 4px solid red;
padding-bottom: 0;
}

Merci pour le temps que vous me portez.

Il y a plusieurs moyens mais le plus simple c'est d'ajouter une classe à ton menu.

Par exemple <li class="active">

Tu joues sur les CSS ensuite de cette classe.

Sinon tu peux mettre un body id sur chacune de tes pages et des classes sur chaque items de menu.

Ainsi tu pourrais faire un truc comme ça pour chaque page. Voici un tutoriel qui montre ça. http://www.sohtanaka.com/web-design/active-state-in-css-navigations/

body#contact li.contact,
body#index li.index { background:red; }

Vite comme ça, je ne connais pas d'autres options intéressantes.
Modifié par Sorano (26 Oct 2010 - 14:11)

merci pour vos informations

le "problème" est résolu

bien à vous