Aligner mon menu

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Aligner mon menu

par Cyrano » 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 ; }

par Invité » 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 ?

par Cyrano » 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.

par Cyrano » 10 juil. 2005, 22:46

Ha ben voilà du code comme j'aime :langue: 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 :langue:

par Invité » 10 juil. 2005, 22:42

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

par Epeda » 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 :)

Aligner mon menu

par C moi » 10 juil. 2005, 22:31

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

Code : Tout sélectionner

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.