Discussion :

[labarre2002]

Bonjour


je réalise un menu qui doit occuper toute la largeur de l'écran

voici le résultat de mon travail




le souci est le retour a la ligne d un lien de mon menu a savoir l’élément "Boissons"

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<header>
<nav class="menu">
<ul>
<li> <a href="#">Burger</a> </li>
<li> <a href="#">Sandwich</a> </li>
<li> <a href="#">Chawarma</a> </li>
<li> <a href="#">Salades</a> </li>
<li> <a href="#">BBQ</a> </li>
<li> <a href="#">Boissons</a> </li>
 
 
</ul>
 
</nav>

le CSS:

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
.menu ul li{
list-style-type: none;
display: inline-block;
padding:0 13px 0 0;
 
}
 
 
 
 a:link {
    text-decoration: none;
    color: black;
   }
 
  .menu li:hover {
    background-color: #f3ebe0;
  }
 
li{
    width:16.66%;
 
    text-align: center;
}

Merci pour de m apporter d’éventuelles éléments de réponse.

[NoSmoking]

Bonjour,
16.66 * 6 = 100%, oui mais c'est sans compter les fameux « whitespace » qui existe entre les éléments en ligne

Pour une solution, voir

↪ Espace entre éléments « inline »

[Doksuri]

pourquoi ne pas passer par du flex ?
voir meme du grid (qui prend en compte les margin/paddings)

[labarre2002]

BOnsoir

pour vos reponses

@NoSmoking Merci pour tes reponses croustillantes (toujours quelque chose de nouveau a decouvrir).

en appliquant

Code css :

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

 display:table-cell

je n ai plus le retour a la ligne



a present je souhaite que mon menu occupe toute la largeur

Merci davance .

[two3d]

Comme la proposé Doksuri, le flex ou grid est une bonne solution.

Code :

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

1
2
3
4
ul{
   display:flex;
   justify-content:space-[ce que tu veux]
}

[Doksuri]

si besoin, la solution grid du coup...

Code css :

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

1
2
3
4
5
6
7
8
.menu ul {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.menu li { display: block; }

[NoSmoking]

en appliquant display:table-cell

Tu as peut-être choisi la « meilleur moins bonne solution »

Le lien que j'ai posté est surtout pour montrer l'existence des « whitespace » et comment éventuellement s'en débarrasser.

Ce qui importe est de cibler correctement ce que tu souhaites faire, et dans ton cas, menu largeur 100% avec items centrés, il y plusieurs façons de faire, comme toujours serais-je tenté de dire !

Pour commencer ton menu peut tout à fait ce résumer au HTML suivant :

Code html :

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

1
2
3
4
5
6
7
8
<nav class="menu">
  <a href="#">Burger</a>
  <a href="#">Sandwich</a>
  <a href="#">Chawarma</a>
  <a href="#">Salades</a>
  <a href="#">BBQ</a>
  <a href="#">Boissons</a>
</nav>

...sémantiquement parlant c'est suffisant inutile d'ajouter une liste <ul>.

Le CSS à appliquer serait le suivant :
• avec display:table :

Code :

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

1
2
3
4
5
6
7
8
.menu-table {
  display: table;
  width: 100%;
}
.menu-table a {
  display: table-cell;
  width: calc( 100% / 6);
}

• avec display:inline-flex :

Code :

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

1
2
3
4
5
6
7
8
.menu-inline-flex {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
}
.menu-inline-flex a {
  flex: 1;
}

• avec display:flex :

Code :

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

1
2
3
4
5
6
7
.menu-flex {
  display: flex;
  flex-wrap: wrap;
}
.menu-flex a {
  flex: 1;
}

... pratiquement le même que inline-flex, la width en moins.

• avec display:display-grid :

Code :

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

1
2
3
4
.menu-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
}

... déconcertant de simplicité !

Voilà c'était juste un petit récapitulatif !

Nota : si, de plus, tu veux faire apparaître un « menu hamburger » il te faudra gérer cela via les média-queries.

[Doksuri]

Nota : si, de plus, tu veux faire apparaître un « menu hamburger » il te faudra gérer cela via les média-queries.

ce sera l'occastion d'introduire les @contanier developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries c'est la meme chose que les media-queries, mais ca ne se base pas sur la taille de l'ecran, mais sur la taille du container

[Stellar7]

...sémantiquement parlant c'est suffisant inutile d'ajouter une liste <ul>.

Pour la sémantique du bien-voyant, peut-être, mais pas pour le mal/non-voyant.

D'après le référentiel d'accessibilité qui nous concerne (RGAA), tout ce qui se présente visuellement comme liste doit aussi l'être comme tel dans le code. Les bonnes pratiques peuvent être consultées avec les "aria practices", par exemple pour le menu.

Il y a une raison : la navigation virtuelle avec les aides, en particulier les lecteurs d'écrans. Avec un lecteur d'écran, on peut naviguer entre éléments du même type, p.ex. de titre en titre, de lien en lien, de liste en liste, etc. D'où l'intérêt de la balise <ul> (en y ajoutant un "nom accessible", tel un aria-label, mais là je déborde).