28172 sujets

CSS et mise en forme, CSS3

Centrer mon menu [résolu]

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 (cf capture d'écran afin que vous compreniez mieux)

Et voici mon 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>
</table>
</body>
</html>


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

Cordialement

Yuyu
Modifié par Madfiayu (18 Oct 2011 - 08:07)
Bonsoir Yuyu,

Je pense que tu aurais plus de succès dans tes réponses si le code présenté était au moins valide (pas de doctype, balises non fermés et même absentes etc..).

Alors tu auras peut être non pas la solution, mais plus de personnes acceptant de se pencher sur ton code. Smiley ravi
Bonjour merci de ces conseils !

Après je n'ai pas de doctotype car c'est un code que j'ai directement tapé/modifié sur mon bloc note du coup je ne sais pas ce que je suis censé mettre comme Doctotype.
Madfiayu a écrit :
Après je n'ai pas de doctotype car c'est un code que j'ai directement tapé/modifié sur mon bloc note du coup je ne sais pas ce que je suis censé mettre comme Doctotype.

Tu trouveras des éléments de réponse dans cet article. Compte tenu des éléments présents dans ton code, je pencherais plutôt pour le doctype HTML 4.01 strict, dont la syntaxe est la suivante, à insérer au tout début de ton code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Merci beaucoup je vais lire cela.

Sinon j'ai trouvé ma réponse grâce à un autre forum : il fallait mettre la propriété : display : inline-block et text-align : center plus haut. J'avais déjà entendu parlé de inline-block mais le sujet qui en parlait disait que Firefox ne la digérait pas d'où le fait que je ne l'ai pas utilisé mais après un test, cela marche très bien.

Capture d'écran pour vous montrer.
Madfiayu a écrit :
J'avais déjà entendu parlé de inline-block mais le sujet qui en parlait disait que Firefox ne la digérait pas d'où le fait que je ne l'ai pas utilisé mais après un test, cela marche très bien.

Firefox comprend la valeur inline-block de la propriété display depuis la version 3.0 (soit depuis juin 2008, ce qui fait un bon bout de temps).
Sujet clos
Aller à