Comment centre le texte de son menu ?

omzen

Membre confirmé
26 Septembre 2008
88
6
42
Nice
www.coeuraccords.net
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 centrale. Mais je ne vois pas comment faire ?

le code css
Bloc de code:
#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
Bloc de code:
<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
 

twinworld

Membre expert
Club MacG
4 Janvier 2007
7 818
407
50
Lausanne et Paris
et avec la commande "align=center" ?
 

omzen

Membre confirmé
26 Septembre 2008
88
6
42
Nice
www.coeuraccords.net
merci TwinWorld pour ta proposition mais text-align:center; ne fonctionne pas non plus. Le texte reste figé sur le côté gauche de la page.
 

twinworld

Membre expert
Club MacG
4 Janvier 2007
7 818
407
50
Lausanne et Paris
c'est bizarre parce qu'un truc du genre :
<div align="center"><span style='position:absolute; ... <fermer les balises>
ça marche chez moi
 

omzen

Membre confirmé
26 Septembre 2008
88
6
42
Nice
www.coeuraccords.net
position: relative
m'a permis de mieux positionner mon div mais rien a changé au niveau du texte, il reste toujours à gauche, inerte.

Par-contre, j'ai enlevé le float-left et là le texte s'est centré -enfin !
Après qu'est-ce que cela va donner sur IE et autres navigateurs ? Le mystère reste entier ;-)

le résultat est là http://www.coeuraccords.com/Capturedecranreussi.jpg

Merci TwinWorld pour ton intérêt.