IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Comment faire un menu avec le meme espace entre les éléments


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut Comment faire un menu avec le meme espace entre les éléments
    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

  2. #2
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut
    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.

  3. #3
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut
    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

  4. #4
    Invité
    Invité(e)
    Par défaut
    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
      });
    Dernière modification par Invité ; 08/09/2016 à 11h03.

  5. #5
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut
    C'est très intéressant. Je vais regardé ca, merci beaucoup!

  6. #6
    Invité
    Invité(e)
    Par défaut
    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 */
      } 
    }
    Dernière modification par Invité ; 08/09/2016 à 13h20.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 28/05/2015, 11h13
  2. Comment faire un bouton avec un passage lumineux toutes les 5 secondes
    Par infovect dans le forum Général JavaScript
    Réponses: 20
    Dernier message: 17/07/2014, 15h12
  3. DockLayoutPanel est espacement entre les éléments
    Par Mickael Baron dans le forum GWT et Vaadin
    Réponses: 0
    Dernier message: 28/10/2011, 10h09
  4. [Joomla!] Comment faire un menu avec plus de 2 sous-menus ?
    Par sircus dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 3
    Dernier message: 11/02/2009, 18h52
  5. Menu CSS vertical, petit espace entre les images sous IE
    Par Death83 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 24/10/2005, 09h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo