Aligner un menu horizontalement comme s'il était justifié

Bonjour à tous

Je suis un peu frustré car j'avais déjà eu ce problème et je ne retrouve pas ce post. Le site a été supprimé par l'utilisatrice...:?

Je dois aligner un menu horizontalement. Jusqu'à la c'est pas trop compliqué

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/* MENU */ nav#menu1{ width:100%; padding:10px 0px 10px 0px; } nav#menu1 ul li{ border:1px solid #ff22ff; list-style-type: none; white-space:nowrap; color: #634E42; -webkit-flex: 1 1 1%; flex: 1 1 1%; text-align: center; } nav#menu1 ul li:first-child{ text-align: left; } nav#menu1 ul li:last-child{ text-align: right; }

---

L'idée est d'avoir le premier élément collé à la bordure de gauche, le dernier collé à à la bordure de droite, et les autres centré de manière égale.
Un peu comme ceci http://www.shiatsu-energie-geneve.ch/new/

Ci-dessus, je trouve qu'il y a trop d'espace entre le premier et le deuxième élément, et l'avant-dernier et le dernier élément.

Y-aurait-il un moyen pour que les espaces soit plus au moins égal?

Merciii!!

Bonjour,
défini flex-grow:0 sur ton premier et dernier élément <li>, il ne « s'adapteront » pas à la largeur restante, tes text-align ne serviront plus à grand chose.

Bonjour,

1- Un code CSS n'a d'intérêt QU'AVEC le code HTML associé.

2- Qui dit menu, dit "liens" (<a>)
Ce qui manque à ton exemple.

De plus, on y voit des classes "nav navbar-navdel collapse-nav",....
MERCI de préciser (à chaque fois!) si tu utilises Bootstrap (et quelle version ?) ou autre : on n'est pas censé le deviner.

3- On paut partir de cette base HTML :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<nav id="menu1" class="navbar navbar-default"> <ul class="nav navbar-navdel collapse-nav" data-toggle="collapse-nav" > <li class="collapse-item collapse-item-2"><a href="#">Accueil</a></li> <li class="collapse-item collapse-item-2"><a href="#">Shiatsu</a></li> <li class="collapse-item collapse-item-2"><a href="#">Thérapie</a></li> <li class="collapse-item collapse-item-2"><a href="#">Shiatsu périnatal</a></li> <li class="collapse-item collapse-item-2"><a href="#">Cours</a></li> <li class="collapse-item collapse-item-2"><a href="#">Supervision</a></li> <li class="collapse-item collapse-item-2"><a href="#">Contact</a></li> </ul> </nav>

---

4- flexbox :

• A Complete Guide to Flexbox
• MDN - Flexbox

5- Ensuite... Quel intérêt de "coller" les MOTS à droite et à gauche ?? :koi:
Alors que les "boites" (en rose) le sont déjà...

Du coup, ta question n'a pas trop de sens.
Il faudrait préciser.

6- Sinon, une solution (MOTS écartés uniformément -> justify-content:space-between;) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

#menu1 ul, #menu1 li { padding:0; margin:0; } #menu1 ul.nav { width:100%; list-style:none; display:flex; flex-wrap:nowrap; justify-content:space-between; } #menu1 .nav li { border: 1px solid #ff22ff;   display:flex; align-items:center; } #menu1 .nav li > a { color: #634E42; text-decoration:none; padding:5px 10px; text-align:center; }

---

Bonjour et mercis pour vos réponses.
Oui tout à fait. J'avais pas encore mis les liens, Je me concentrait sur le positionnement des li.
Mias ca correspond bien à ceci, en effet:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<nav id="menu1" class="navbar navbar-default"> <ul class="nav navbar-navdel collapse-nav" data-toggle="collapse-nav" > <li class="collapse-item collapse-item-2"><a href="#">Accueil</a></li> <li class="collapse-item collapse-item-2"><a href="#">Shiatsu</a></li> <li class="collapse-item collapse-item-2"><a href="#">Thérapie</a></li> <li class="collapse-item collapse-item-2"><a href="#">Shiatsu périnatal</a></li> <li class="collapse-item collapse-item-2"><a href="#">Cours</a></li> <li class="collapse-item collapse-item-2"><a href="#">Supervision</a></li> <li class="collapse-item collapse-item-2"><a href="#">Contact</a></li> </ul> </nav>

---

Pour la class 'navbar-navdel', j'ai ajouté les caractère 'del' pour la rendre inactive temporairement.

Mais la solution du

Code:

---

1 2	flex-grow:0

---

sur le premeir et dernier élément me semble bien

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

/* MENU */ nav#menu1{ width:100%; padding:10px 0px 10px 0px; } nav#menu1 ul li{ /* border:1px solid #ff22ff;*/ list-style-type: none; white-space:nowrap; color: #634E42; -webkit-flex: 1 1 1%; flex: 1 1 1%; text-align: center; }   nav#menu1 ul li:first-child{ text-align: left; } nav#menu1 ul li:last-child{ text-align: right; } nav#menu1 ul li:first-child,nav#menu1 ul li:last-child{ flex-grow:0; min-width:80px; }

---

Si la bordure rose n'est pas destinée à rester, ma solution est meilleure (voir mon message précédent).

Oups pardon jreaux, j'avais pas tout lu ton message. Je vais regarder. Oui, la bordure rose n'est pas destinée à rester ;). C'est juste pour avoir un visuel sur les bord

Citation:

---

C'est juste pour avoir un visuel sur les bord

---

Dans ce cas il est préférable de personnaliser la couleur de background pour ne pas casser, éventuellement, le rendu et ce compte tenu des modèles de boîte.

Code:

---

1 2 3 4 5 6

#menu1 a { background: #FDE; } #menu1 a:nth-of-type(odd) { background: #DEF; }

---

Si on pousse plus loin, côté HTML, il suffit de faire

Code:

---

1 2 3 4 5 6 7 8 9

<nav id="menu1"> <a href="#">Accueil</a> <a href="#">Shiatsu</a> <a href="#">Thérapie</a> <a href="#">Shiatsu périnatal</a> <a href="#">Cours</a> <a href="#">Supervision</a> <a href="#">Contact</a> </nav>

---

La sémantique étant apportée par l'élément <nav> il n'est pas utile d'ajouter au code une liste.

Le CSS minimum étant pour le coup minimum ;)

Code:

---

1 2 3 4

#menu1 { display: flex; justify-content: space-between; }

---

Citation:

---

Envoyé par NoSmoking

...La sémantique étant apportée par l'élément <nav> il n'est pas utile d'ajouter au code une liste...

---

Certes, certes... ;)

Je suis moi aussi partisan d'un code "SIMPLE" (voire "minimaliste")

Citation:

---

"Un BON code est un code SIMPLE"

---

Mais une liste <ul><li> peut apporter d'autres "avantages" (ajout d'icônes pour des sous-menus, ou autres, par exemple),
et reste une sorte de "standard" (pour structurer d'autres "menus" complémentaires, ET/OU dans l'utilisation d'une structure de type Bootstrap ou autre...

N.B. Pour reprendre le code de NoSmoking, on peut "élargir la "zone cliquable" de chaque lien avec :

Code:

---

1 2 3 4 5

#menu1 a { display: block; background: #FDE; padding:10px 20px; /* par exemple */ }

---