Centrer mon menu
Résolu
Madfiayu
-
Madfiayu -
Madfiayu -
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
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:
- Centrer mon menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
3 réponses
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;}
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;}
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 :
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.
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.