Discussion :

[pierrot10]

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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!!

[NoSmoking]

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.

[Invité]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ??
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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[pierrot10]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
flex-grow:0

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

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[Invité]

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

[pierrot10]

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#menu1 {
  display: flex;
  justify-content: space-between;
}

[Invité]

...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")

"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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#menu1 a {
  display: block;
  background: #FDE;
  padding:10px 20px; /* par exemple */
}