Aligner mon menu

10 juil. 2005, 22:31

Bonjour,
J'aimerais que mon menu soit aligner et je ne sais pas comment faire.
Voici le code CSS :

ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#menu li
{
	float: center ;
	text-align: center ;

ul#menu li a
{
	width: 125px ;
	line-height: 25px ;
	font-size: 1em ;
	font-weight: bold ;
	color: #FFFFFF ;
	display: block ;
	text-decoration: none ;

Voici le HTML :

Code : Tout sélectionner

<ul id="menu"><center>
			<li><a href="intro.html">INTRODUCTION</a></li>
			<li><a href="inde.html">INDE</a></li>
			<li><a href="passions.html">MES PASSIONS</a></li>
			<li><a href="creations.html">MES CREATIONS</a></li>
			<li><a href="#">FORUM</a></li>
			<li><a href="#">LIVRE D'OR</a></li>
			<li><a href="liens.html">LIENS</a></li>
			<li><a href="mailto:krakrabouda@chépakoi.fr">MAIL</a></li>
		</center></ul>

Merci d'avance, C moi.

10 juil. 2005, 22:34

Qu'il soit aligné comment ? Verticalement ? Horizontalement ?
Il faut donner plus de détails si tu veux que l'on te réponde correctement

10 juil. 2005, 22:42

Désolé, je voulais dire aligné horizontalement ^_^ Merci.

10 juil. 2005, 22:46

Ha ben voilà du code comme j'aime

Pas de tableaux, c'est bien, prenez-en de la graine les copains

BOn, primo, float: center n'est pas valide : pour float, tu ne peux avoir que trois valeurs : left, right ou none.

Ensuite effectivement, essaye d'expliquer comment tu veux aligner ton menu. TU as quelques références très instructives en la matière sur le net avec des exemples et du code : alsacreations, maxdesign : quand tu auras fait le tour de ces deux là, si tu assimiles tout, tu en connaîtras plus que moi

10 juil. 2005, 22:51

ha, ok, horizontalement, c'est autre chose. Il faut distinguer les éléments de block des éléments inline. li est par définition un élément de block. Donc tu dois le modifier avec la feuille de style, quelque chose comme:

Code : Tout sélectionner

li {
    display: inline;
}

Mais il y a une autre possibilité en le laissant en élément de block : tu peux affecter une dimension à un élément de bloc contrairement à un élment inline. Donc par exemple, tu fais:

Code : Tout sélectionner

li{
    width: 12em;
    float: left;
}

Et là, c'est magique, chaque ligne de ta liste à puce va s'aligner l'un derrière l'autre sur la même ligne jsqu'au bout de la page pour recommencer sur la ligne suivante.

Avantage de la seconde méthode: tu peux mettre un arrière-plan graphique pour chaque lien.

10 juil. 2005, 22:56

Merci, mais il y a t il pas moyen d'aligner tous sur une seule ligne jusqu'au bout de la page sans recommencer à la ligne suivante ? Même en redimensionnant ?

10 juil. 2005, 23:16

Comme je t'ai expliqué, en utilisant un float:left, les éléments vont se mettre à la suite les uns des autres sur une ligne, mais si l'espace est trop court, il y aura retour à la ligne.

Ce que tu peux faire, tu peux dimensionner des éléments de bloc.
Essaye comme ça :

Code : Tout sélectionner

ul#menu
{
   height: 35px ;
   margin: 0 ;
   padding: 0 ;
   list-style-type: none ;
}

ul#menu li
{
   float: left ;
   text-align: center ;
   width: 9em;
}
ul#menu li a
{
   width: 125px ;
   line-height: 25px ;
   font-size: 1em ;
   font-weight: bold ;
   color: #FFFFFF ;
   display: block ;
   text-decoration: none ; 
}

Aligner mon menu

Qui est en ligne