Discussion :

[pierrot10]

Bonjour à tous,

Ma question peut sembler bête et peut-etre qu'elle l'est, mais je ne sais pas comment contrer les alignements dans un li.

Je m'explique.
J'ai fais ce site http://www.yoga-arbre.ch/ dont le menu est en ul et li

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
 
<nav>
<ul class="menu_general">
<li class="first level1">
<a title="Accueil" href="http://www.yoga-arbre.ch/">Bienvenue</a>
</li>
<li class="level1">
<li class="level1">
<li class="last level1">
</ul>
</nav>

Dans mon CSS, j'ai fais ainsi pour que les li soit alignés

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
 
nav ul{
	padding:0px;
	margin:0px;
	border-top:2px dotted #8A343D;
	border-bottom:2px dotted #8A343D;
	padding-top:4px;
	padding-bottom:4px;
	overflow:hidden;
}
nav li{
	list-style-type:none;
	float:left;
	text-align:center;
white-space: nowrap;
        width:25%; /* J'ai supprimé ceci plus tard */
}

J'ai aussi mis text-align:center pour que les textes soit centrés.

Mais voilà, il faut que le premier soit aligné sur le bord de gauche et le dernier sur le bord de droite. Alors j'ai ajouté ceci:

Code :

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

1
2
3
4
5
6
7
 
nav li.first{
	text-align:left;
}
nav li.last{
	text-align:right;
}

Le problème qui se pose maintenant, l'espace entre le 1 et le 2 n'est plus egal au 2 et 3. Idem pour le 3 et le 4.

Si je plaque le premier élément, l'espace va s'grandir entre le 1 et le 2. Il faudrait que le 2 s'adapte

Comment faire pour les 4 éléments (texte) du menu ont les mêmes espaces en gardant l'usage des ul et li?

Pour le moment, j'ai dédouillé ceci, mais je n'ai pas cette maniere de faire et surtout ca ne joue plus sur les écrans des smartphone

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
nav li:nth-child(1) {
	width:20%;
}
nav li:nth-child(2) {
	width:25%;
}
nav li:nth-child(3) {
	width:35%;
}
nav li:nth-child(4) {
	width:20%;
}

Merci pour vos lumière

[pierrot10]

Il faut evidement que les éléments du menu soit sur une lignes et que sa s'adapte quand on redimensionne le navigateur à la main ou quand on passe sur une tablette ou un smartphone.

[pierrot10]

J'ai travaillé mon menu et il se met en responsive pour les smartphoe.
Mais ma problématique reste valable pour les écrans. Les menus n'ont pas d'espaces egaux

Milles mercis

[Invité]

Bonjour,

voici une solution, qui nécessite jQuery : http://codepen.io/jreaux62/pen/KgpRKd

Code :

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

1
2
3
4
5
6
7
8
<nav>
  <ul id="myTopnav" class="topnav">
    <li class="first level1"><a href="http://www.yoga-arbre.ch/" title="Accueil">Bienvenue</a></li>
    <li class="level1"><a href="yoga.html" title="Yoga">Yoga</a></li>
    <li class="level1"><a href="horaires-et-tarifs.html" title="Horaires & tarifs">Horaires & tarifs</a></li>
    <li class="last level1"><a href="parcours.html" title="Parcours">Parcours</a></li>
  </ul>
</nav>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#myTopnav {
	padding:4px 0;
	margin:0;
	border-top:2px dotted #8A343D;
	border-bottom:2px dotted #8A343D;
  overflow:hidden;
}
#myTopnav li{
	list-style-type:none;
	float:left;
	padding:0;
	margin:0;
}

Code jQuery :

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
  function ajustMenu() {
    $('#myTopnav li').css({
      'margin-right': '0px'
    });
    var Wdiv = $('#myTopnav').width(); // (nombre de pixels du conteneur)
    var nbreSpace = $('#myTopnav li').length - 1; // nombre d espaces entre les li
    var Wtext = 0;
    $('#myTopnav li').each(function() {
      Wtext += $(this).width(); // (nombre de pixels du texte)
    });
    var txtspace = Math.floor((Wdiv - Wtext) / nbreSpace);
    $('#myTopnav li:not(:last-child)').css({
      'margin-right': txtspace + 'px'
    }); // on ajuste (sauf le dernier li)
  }
 
  $(window).on('load resize', function() {
    ajustMenu(); // au chargement de la page + au redimensionnement de la fenêtre
  });

[pierrot10]

C'est très intéressant. Je vais regardé ca, merci beaucoup!

[Invité]

Remarques, après étude de ton code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<nav>
  <ul id="myTopnav" class="topnav">
    <li class="first level1"><a href="http://www.yoga-arbre.ch/" title="Accueil">Bienvenue</a></li>
    <li class="level1"><a href="yoga.html" title="Yoga">Yoga</a></li>
    <li class="level1"><a href="horaires-et-tarifs.html" title="Horaires & tarifs">Horaires & tarifs</a></li>
    <li class="last level1"><a href="parcours.html" title="Parcours">Parcours</a></li>
 
    <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">☰</a>
    </li>
  </ul>
</nav>

1/ Tu as un dernier <li class="icon">, masqué sur desktop, mais visible sur smartphone.
2/ conséquence : le script ne dois pas être appliqué sur smartphone.

Il faudra donc adapter le code à ton cas particulier : http://codepen.io/jreaux62/pen/pEJKVO

Code jQuery :

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
  function ajustMenu() {
 
    $('#myTopnav li').css({
      'margin-right': '0px'
    });
    // -------------------
    //	NAVIGATION NOT PHONE
    if ($(window).width() >= 641) 
    {
      var Wdiv = $('#myTopnav').width(); // (nombre de pixels du conteneur)
      var nbreSpace = $('#myTopnav li:not(.icon)').length - 1; // nombre d espaces entre les li
      var Wtext = 0;
      $('#myTopnav li:not(.icon)').each(function() {
        Wtext += $(this).width(); // (nombre de pixels du texte)
      });
      var txtspace = Math.floor((Wdiv - Wtext) / nbreSpace);
      $('#myTopnav li:not(.last):not(.icon)').css({
        'margin-right': txtspace + 'px'
      }); // on ajuste (sauf le dernier li)
    }
  }
 
  $(window).on('load resize', function() {
    ajustMenu(); // au chargement de la page + au redimensionnement de la fenêtre
  });

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
27
28
29
#myTopnav {
	padding:4px 0;
	margin:0;
	border-top:2px dotted #8A343D;
	border-bottom:2px dotted #8A343D;
  overflow:hidden;
}
#myTopnav li{
	list-style-type:none;
	padding:0;
	margin:0;
}
/* DESKTOP */
@media screen and (min-width:641px)
{
  #myTopnav li.icon {
    display:none;
  } 
  #myTopnav {
    display:flex;
  }
}
/* PHONE */
@media screen and (max-width:640px)
{
  #myTopnav li:not(.icon) {
    display:none; /* on masque */
  } 
}