28172 sujets

CSS et mise en forme, CSS3

[RESOLUT] Répartir régulièrement les éléments d'un menu horizontale

Bonsoir à tous.

J'ai un menu horizontale à 4 éléments.

<ul id="menu">
	<li>as</li>
	<li>aasds</li>
	<li>asasdasdasda</li>
	<li>asasdasdasd</li>
</ul>


Je souhaiterais que :
==> le premier élément soit calé à gauche.

 ul li:first-child{text-align:left;margin-left:0;padding-left:0;}


==> le dernier élément soit calé à droite.

 ul li:last-child{text-align:left;margin-right:0;padding-right:0;}


Mais surtout que les deux dernier élément se répartisse régulièrment.
En d'autre term qu'il y est le même espace entre :
- l'élément 1 et l'élément 2
- l'élément 2 et l'élément 3
- l'élément 2 et l'élément 4

J'ai tenté pas mal de chose mais sans succès, en raison des différentes tailles des éléments.
Auriez vous une solution.?
Modifié par gotcha5832 (19 Sep 2013 - 10:41)
en leur donnant une largeur de 25% par exemple ? si tu veux utiliser toute la largeur du bloc parent

sinon une taille fixe (li{width:150px;} par exemple)
Bah non justement,
Car que ce soit en % ou en px, on definit pour tout les cases la même taille.
Donc admettons que l'on ai:

<ul id="menu">
	<li>a</li>
	<li>b</li>
	<li>asasdasdasd</li>
	<li>asasdasdasd</li>
</ul>


et que "asasdasdasd" represente 25% du contenant.

il n'y aura aucun espace entre les deux dernières cases.
et plein d'espace en la première et la dernière
bonsoir,

display, ;after, text-align et line-height peuvent t'aider : http://codepen.io/anon/pen/CIlkK

D'autre Exemples:
http://codepen.io/gcyrillus/pen/dlvCp , http://codepen.io/gcyrillus/pen/qzGLg (inline-block s'aligne en vertical aussi).
http://codepen.io/gcyrillus/pen/GcBxA (enlever l'espace entre deux boite en ligne les colles l'une à l'autre).
http://codepen.io/gcyrillus/pen/ruhCg (parent: width + margin:auto).
http://codepen.io/gcyrillus/pen/woAqu (boite div div + width).
http://codepen.io/gcyrillus/pen/oxiwp (menu + sous-menu voir l'element3).

En fait je ne cherche pas à te convaincre du tout Smiley smile
++
@gc-nomade

Juste un mot.... BRAVO....

C'est exactement cela.

J'arrive pas à comprendre comment cela fonctionne...
Mais dans tous les Cas merci encore.
Tu cherchais en fait un menu avec éléments justifiés. J'allais te dire ça car c'était en plus les codes de gc-nomade (toujours très intéressants au passage) que j'avais en tête.
N'oublie pas de passer le sujet en résolu.
Je ne savais pas que l'on appelait cela comme cela.


Mais merci

et le coup du :
#menu:after {
  display:inline-block;
  width:95%; /* 100% peut-être excessif */
  content:'';
  vertical-align:top;/* ou bottom, pas d'interligne ni jambage de texte */
}


Fonctionne sur quel navigateur?
Je ne sais pas non plus si ça s'appelle comme ça mais au moins on peut identifier ça avec ce nom.
Pour ta question je suppose que ça marche sur tous les navigateurs reconnaissant before/after, soit IE8 et plus (en gros tous actuels). À part s'il y a quelque chose qui m'échappe dans ce cas faudrait demander à gc-nomade himself
Smiley confused merci.
gotcha5832 a écrit :

#menu:after {
  display:inline-block;
  width:95%; /* 100% peut-être excessif */
  content:'';
  vertical-align:top;/* ou bottom, pas d'interligne ni jambage de texte */
}


Fonctionne sur quel navigateur?


Comme Smiley smile Zelalsan te l'indique, IE8 pour le plus vieux des IE. Chrome ou safari peuvent avoir une petite marge interne à gauche et/ou en dessous mais justify bien texte ou boite en ligne,, c'est pourquoi je propose le reset sur le line-height et un width inférieur a 100%.

Pour les plus vieux IE, au lieu d'un :after , il faut ajouter un element vide dans le HTML avec le style appliqué a :after.

Le principe ou l'idée est d'ajouter une ligne réduite a zéro de hauteur pour que text-align:justify s'applique sur toute les lignes de ton contenu texte ou boite en ligne.

Pour appliqué un inline-block a des éléments de type block (ex:<li>) pour les vieux I.E., il y a une astuce/tutoriel sur ce site dans la section apprendre. http://www.alsacreations.com/article/lire/1209-display-inline-block.html avec en complement pour I.E.7 et moins : http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html et un souci recurent http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Voilou, bonne continuation,
GC
Sujet clos
Aller à