Centrer mon menu

Résolu/Fermé
Madfiayu - Modifié par Madfiayu le 17/10/2011 à 21:48
 Madfiayu - 18 oct. 2011 à 07:51
Bonjour,

Je remercie d'avance tous ceux qui auront la gentillesse de se poser sur mon problème. Je suis déjà allé voir si des personnes avaient eu des problèmes similaires mais les réponses données ne m'ont pas permis de le résoudre alors je me suis décidée à poser directement la question.

Je voudrais centrer mon menu ; l'image derrière est centrée, le texte aussi sauf qu'il revient à la ligne alors que je le voudrais sur une seule ligne pour avoir un menu horizontal ([url=http://i45.servimg.com/u/f45/11/55/36/04/captur10.jpg]cf capture d'écran afin que vous compreniez mieux/url)

Et voici mon code :

[code]<html>
<head>
<title>Slate</title>
<style type="text/css">
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(images/fond_menu.jpg) no-repeat top center;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:inline;margin:0 1px 0 0;}
.red #slatenav ul li a{display: block; float:center;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;text-align : center;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(images/redslate_backgroundOVER.gif) no-repeat top center;}
</style>
</head>

<body>
<table>
<tr><h1>Aïkido St Marcelin</h1></tr>
<tr>
<div class="red">
<div id="slatenav">
<ul>
<li><a href="X" title="" class="current" >L'aïkido</a></li>
<li><a href="X" title="">Le club</a></li>
<li><a href="X" title="">Les cours</a></li>
<li><a href="X" title="">L'actualité</a></li>
<li><a href="X" title="">Liens</a></li>
</ul>
</div>
</div>
<tr>
</body>
</html>/code

En espérant que vous trouverez la solution à mon problème.

Cordialement

Yuyu

A voir également:

3 réponses

Autumn`Tears Messages postés 1054 Date d'inscription samedi 14 mars 2009 Statut Membre Dernière intervention 23 octobre 2013 145
17 oct. 2011 à 21:36
Salut,

Je ne suis pas sûr... Mais essaie de modifier ça :
.red #slatenav ul li a{display: block; float:center;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;text-align : center;}
par ça :
.red #slatenav ul li a{display: inline; float:center;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;text-align : center;}
0
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
17 oct. 2011 à 21:44
Salut,

Le code est un peu indigeste, il faudrait l'aérer...

Mais à défaut, essaie ceci : prends l'élément que tu veux centrer (un <ul> ? un <li> ?) et mets-lui comme style :

display:inline-block;
margin:0 auto;

Après pour aider, tu peux mettre un text-align:center; sur le parent de cet élément. Mais ça ne devrait pas être nécessaire.
0
Autumn' Tears > j'avais déjà essayé, cela ne marchait pas.

Coeus > merci cela a marché (mais il fallait mettre text-align : center pour cela) !

Le sujet est donc résolu.
0