Discussion: Menu flex avec IE

  1. #61
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    Bonjour JefReb,

    C'est bien ça : au cas où il y aurait plusieurs balises <nav> dans la page, ce qui peut très bien arriver.
    Un id étant unique, là on est sûr de cibler le bon <nav>.

    L'élément HTML <nav> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page.
    Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).
    ce n'est donc pas forcément un "menu".

    N.B. Si tu veux suivre la discussion et faire les exercices, tu es le bienvenu !
    Poste tes solutions.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  2. #62
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    Argh ! J'ai "modifié" ton message par erreur !!


    Codepen Exercice 5 : https://codepen.io/laurentsc/pen/vWmpZb/

    Pas trop dur d'ajouter les flèches vu que tu l'as déjà fait !

    Au fait le box-sizing: border-box; appliqué à tous les éléments html, je l'avais déjà rajouté, ayant vu qu'on le faisait généralement.

    Une question néanmoins pour le positionnement de la flèche : elle est en absolute..........


    désolé...
    jreaux62
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  3. #63
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    Argh ! J'ai "modifié" ton message par erreur !!


    Bonjour Laurent,

    Pas trop dur d'ajouter les flèches vu que tu l'as déjà fait !
    J'espère que tu ne t'es pas contenté d'un copier-coller

    QUESTION(s) :
    • à quel(s) navigateur(s) correspond : "-o-transform:....." ?
    • à quel(s) navigateur(s) correspond : "-moz-transform::....." ?
    • à quel(s) navigateur(s) correspond : "-webkit-transform::....." ?

    • Si je veux changer la couleur de la flèche en yellow sur le :hover, je dois rajouter quoi, et où ?


    Au fait le box-sizing: border-box; appliqué à tous les éléments html, je l'avais déjà rajouté, ayant vu qu'on le faisait généralement.
    Ce n'est pas parce qu'"on le faisait généralement" !
    Il faut comprendre pourquoi :


    border-box indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur.
    Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire.
    Cela permet généralement de simplifier le dimensionnement des éléments *.
    * on n'a plus besoin de prendre en compte le margin ni le border dans le calcul de la largeur

    Une question néanmoins pour le positionnement de la flèche : elle est en absolute..........
    Oui, mais son parent, par rapport auquel elle doit être positionnée, c'est le <li>, pas le <ul> !
    Il faut donc que le <li> parent soit positionné (en relative, ici)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #64
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    • -o- pour Opera
    • -moz- pour Gecko (Mozilla)
    • -webkit- pour Webkit (Chrome, Safari, Android...)
    • -ms- pour Microsoft (Internet Explorer)
    • -khtml- pour KHTML (Konqueror)
    mais je le savais déjà !

    J'espère que tu ne t'es pas contenté d'un copier-coller
    non, j'ai cherché à comprendre le code (d'où par exemple ma question sur le positionnement) et de même voyant que ça changeait rien, j'ai commenté Le box-sizing, j'avais déjà regardé ce que ça fait.

    •Si je veux changer la couleur de la flèche en yellow sur le :hover, je dois rajouter quoi, et où ?
    color: yellow; dans #navMain li.hasSub:hover:after
    Oui, mais son parent, par rapport auquel elle doit être positionnée, c'est le <li>, pas le <ul> !
    Ca, ça mérite un éclaircissement : la classe agit sur le <li> (<li class="active hasSub">). Pour moi, son parent était donc le parent du <li> donc le <ul> : j'ai faux ?
    De plus, tu dis qu'on met le <li> en relative (ce que tu avais fait). Mais si je ne le fais pas, ça marche quand même. Pourquoi ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  5. #65
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    Citation Envoyé par laurentSc Voir le message
    ...Mais si je ne le fais pas, ça marche quand même. Pourquoi ?
    ajoutons un margin-top au menu complet :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    #navMain { margin-top:100px; } /* on écarte le menu du haut de la page */
    body { background:#666; } /* pour visualiser ce qui se passe */
    Regarde ce qui se passe :
    • SANS position:relative; sur le <li>
    • AVEC

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
      #navMain > ul > li { 
       position : relative; /* teste AVEC ou SANS */
      }

    • -> où se trouvent les flèches ?
    • -> quelle largeur font les sous-menus ?


    REPONSE :

    • SANS, les flèches se trouvent calées tout en haut à droite, et les sous-menus font 100%.... de la largeur de la fenêtre !
      CAR c'est le <body> qui est alors le PLUS PROCHE parent POSITIONNE.

    • position:relative; sur le <li> permet de définir le <li> comme le PLUS PROCHE parent POSITIONNE !
      Les élements enfants se positionnent alors PAR RAPPORT à lui.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #66
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    y a sûrement un schmilblick car si je commente le positionnement, les flèches sont bien calées en haut à droite mais la largeur des sous-menus ne change pas...

    https://codepen.io/laurentsc/pen/vWmpZb/

    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0; /* marge extérieure */
      padding: 0; /* marge intérieure */
      border: 0; /*bordure*/
      box-sizing: border-box;
    }
     
    #navMain { margin-top:100px; } /* on écarte le menu du haut de la page */
    body { background:#666; } /* pour visualiser ce qui se passe */
     
    /* ------------------------------------------------------ */
    /* MENU - style général */
    /* ------------------------------------------------------ */
    #navMain ul, #navMain li {
      list-style: none; /* pas de style de liste (puces,...) */
    }
     
    /*#navMain > ul > li {position:relative;}*/
     
    /* ------------------------------- */
    /* fleche, avec rotation */
    #navMain li.hasSub:after {
      position: absolute;
      content: "\25BC";
      display: block;
      font-size: 0.7em;
      color: #fff;
      top: 14px;
      right: 10px;
      /*cursor: pointer;*/
     
      -o-transform: rotate(0deg);
      -o-transition: -o-transform 0.5s;
      -ms-transform: rotate(0deg);
      -ms-transition: -ms-transform 0.5s;
      -moz-transform: rotate(0deg);
      -moz-transition: -moz-transform 0.5s;
      -webkit-transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.5s;
      transform: rotate(0deg);
      transition: transform 0.5s;
    }
    #navMain li.hasSub:hover:after {
      -o-transform: rotate(180deg);
      -o-transition: -o-transform 0.5s;
      -ms-transform: rotate(180deg);
      -ms-transition: -ms-transform 0.5s;
      -moz-transform: rotate(180deg);
      -moz-transition: -moz-transform 0.5s;
      -webkit-transform: rotate(180deg);
      -webkit-transition: -webkit-transform 0.5s;
      transform: rotate(180deg);
      transition: transform 0.5s;
      color: yellow;
    }
    /* pour tous les liens */
    #navMain a {
      display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
      padding:10px;
      font-family:Arial, sans-serif;
      color: #fff;
      background: #2980b9;
      text-decoration: none; /* ne pas souligner les liens */
    }
    #navMain ul li > ul {
      display:none;/* menu niveau 2 caché */
    }
    #navMain ul li:hover > ul {
      display:block;/* si on survole un élément de niveau 1 du menu, on affiche le menu de niveau 2 */
    }
    #navMain a:hover {
      background: #20638f; /*change la couleur de fond*/
    }
     
    /* ------------------------------------------------------ */
    /* PHONE (largeur de fenetre inférieure à 640px) */
    /* "MOBILE FIRST" : on définit d'abord les styles pour PHONE */
    /* ------------------------------------------------------ */
    /* MENU VERTICAL - largeur 100% */
     @media screen and (max-width:640px) {
       #navMain > ul {
         width:10%;  min-width:100px;
       }
    }
     
     
    /* ------------------------------------------------------ */
    /* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
    /* on utilise les media queries pour modifier les styles  */
    /* ------------------------------------------------------ */
    /* MENU HORIZONTAL, centré - largeur 50% (mini : 640px) */
    @media screen and (min-width: 641px) 
    {
      #navMain> ul {/* slt niveau 1 */
        display:table; /* se comporte comme une table */
        width:50%; /* largeur du menu */
        min-width:640px; /* largeur mini du menu */
        margin:0 auto; /* menu centré dans son parent */
       /*position :relative;*/
      }
      #navMain > ul > li { 
        display:table-cell; /* se comporte comme une cellule de table */
        width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
       /*position : relative;*/
      }
      #navMain > ul > li > ul {
     
        /*position : absolute;*/
        width:100%;
        min-width:100px;
      }
    }
    /* ------------------------------------------------------ */
    Tu comprends pourquoi ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  7. #67
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    Oui.
    Tu as enlevé aussi le position:absolute sur le il du sous-menu...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #68
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    Demain je passe au 6

    EDIT : l'objectif est évidemment d'intégrer ce menu dans un site. Or, j'avais tenté l'intégration du menu avec flex et ça ne marchait pas : très probablement un conflit entre règles CSS, mais je ne savais pas lesquelles. Donc à chaque étape, je teste l'intégration du nouveau menu ; pour l'instant c'est OK. Si à un moment ça ne va plus, il sera plus facile de trouver la cause.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  9. #69
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    NON.

    L'objectif est que tu COMPRENNES bien à quoi sert chaque instruction !

    Ensuite seulement tu SAURAS faire ce que tu veux.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #70
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    En fait on est d'accord car oui je comprends le code du menu et donc s'il se présente un problème bien plus facile de le résoudre
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  11. #71
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    Je me suis mis sur la V6 : https://codepen.io/laurentsc/pen/XzeZVz/

    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
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <nav id="navMain">
      <ul>
        <li class="active hasSub"><!-- active : menu EN COURS -->
          <a href="#">A - One</a>
          <ul>
            <li><a href="#">A.1</a></li>
            <li><a href="#">A.2</a>
              <ul>
                <li><a href="#">A.2.1</a></li>
                <li><a href="#">A.2.2</a></li>
              </ul>    
            </li>
            <li><a href="#">A.3</a></li>
          </ul>
        </li>
        <li class="hasSub">
          <a href="#">B - Two</a>  
                <ul>
            <li><a href="#">B.1</a></li>
            <li><a href="#">B.2</a></li>
          </ul>
        </li>
        <li>
          <a href="#">C - Three</a>     
          </li>
          <li>
            <a href="#">D - Four</a>
                  <ul>
                    <li><a href="#">D.1</a></li>
                    <li><a href="#">D.2</a>
                      <ul>
                        <li><a href="#">D.2.1</a></li>
                        <li><a href="#">D.2.2</a></li>
                      </ul>    
                    </li>
            <li><a href="#">D.3</a></li>
          </ul>
          </li>
     
      </ul>
    </nav>

    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
     
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0; /* marge extérieure */
      padding: 0; /* marge intérieure */
      border: 0; /*bordure*/
      box-sizing: border-box;
    }
     
     
    /* ------------------------------------------------------ */
    /* MENU - style général */
    /* ------------------------------------------------------ */
    #navMain ul, #navMain li {
      list-style: none; /* pas de style de liste (puces,...) */
    }
     
    /*#navMain > ul > li {position:relative;}*/
     
    /* ------------------------------- */
    /* fleche, avec rotation */
    #navMain li.hasSub:after {
      position: absolute;
      content: "\25BC";
      display: block;
      font-size: 0.7em;
      color: #fff;
      top: 14px;
      right: 10px;
      /*cursor: pointer;*/
     
      -o-transform: rotate(0deg);
      -o-transition: -o-transform 0.5s;
      -ms-transform: rotate(0deg);
      -ms-transition: -ms-transform 0.5s;
      -moz-transform: rotate(0deg);
      -moz-transition: -moz-transform 0.5s;
      -webkit-transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.5s;
      transform: rotate(0deg);
      transition: transform 0.5s;
    }
    #navMain li.hasSub:hover:after {
      -o-transform: rotate(180deg);
      -o-transition: -o-transform 0.5s;
      -ms-transform: rotate(180deg);
      -ms-transition: -ms-transform 0.5s;
      -moz-transform: rotate(180deg);
      -moz-transition: -moz-transform 0.5s;
      -webkit-transform: rotate(180deg);
      -webkit-transition: -webkit-transform 0.5s;
      transform: rotate(180deg);
      transition: transform 0.5s;
      color: yellow;
    }
    /* pour tous les liens */
    #navMain a {
      display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
      padding:10px;
      font-family:Arial, sans-serif;
      color: #fff;
      background: #2980b9;
      text-decoration: none; /* ne pas souligner les liens */
    }
    #navMain ul li > ul {
      display:none;/* menu niveau 2 caché */
    }
    #navMain ul li:hover > ul {
      display:block;/* si on survole un élément de niveau 1 du menu, on affiche le menu de niveau 2 */
    }
    #navMain a:hover {
      background: #20638f; /*change la couleur de fond*/
    }
     
    /* ------------------------------------------------------ */
    /* PHONE (largeur de fenetre inférieure à 640px) */
    /* "MOBILE FIRST" : on définit d'abord les styles pour PHONE */
    /* ------------------------------------------------------ */
    /* MENU VERTICAL - largeur 100% */
     @media screen and (max-width:640px) {
       #navMain > ul {
         width:10%;  min-width:100px;
       }
    }
     
     
    /* ------------------------------------------------------ */
    /* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
    /* on utilise les media queries pour modifier les styles  */
    /* ------------------------------------------------------ */
    /* MENU HORIZONTAL, centré - largeur 50% (mini : 640px) */
    @media screen and (min-width: 641px) 
    {
      #navMain> ul {/* slt niveau 1 */
        display:table; /* se comporte comme une table */
        width:50%; /* largeur du menu */
        min-width:640px; /* largeur mini du menu */
        margin:0 auto; /* menu centré dans son parent */
       /*position :relative;*/
      }
      #navMain > ul > li { 
        display:table-cell; /* se comporte comme une cellule de table */
        width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
       position : relative;
      }
      #navMain > ul > li > ul {
     
        position : absolute;
        width:100%;
        z-index:1;
      }
     
      #navMain > ul > li > ul > li { position : relative; width:100%;
    	z-index:1; }
     
      /*SPECIAL : SOUS-SOUS-MENU à droite*/
    #navMain > ul > li > ul > li > ul { position : absolute; width:100%;
        left:100%;/*SOUS-SOUS-MENU à droite*/
        top:0; 
    	z-index:1; }
    #navMain > ul > li:last-child > ul > li > ul { position : absolute; width:100%;
        left:-100%; /*dernier SOUS-SOUS-MENU à gauche*/
        top:0;
    	z-index:1; }
    }
    }
    /* ------------------------------------------------------ */

    Je me suis dit que en desktop le parent de #navMain > ul > li > ul > li > ul (donc #navMain > ul > li > ul > li) devait être positionné pour que top:0; se réfère à lui. Ce que je ne comprend pas, c'est pourquoi il faut le mettre en relative et pas en absolute ? (en gros on change le positionnement de l'enfant et du parent : relative->absolute ou absolute->relative)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  12. #72
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    bonjour Laurent,

    ton code à l'air de fonctionner !

    Je vois mal ce que tu ne comprends pas.
    C'est pourtant simple :
    un élément est positionné par rapport à son plus proche parent, lui-même positionné.
    Que le parent soit positionné en relative, absolute ou fixed va dépendre du contexte lié à cet élément, indépendamment de ses enfants.

    Si ça ne suffit pas, FAIS DES ESSAIS, en changeant relative en absolute ou fixed, et REGARDE ce qui se passe.


    N.B. DANS LE CAS GENERAL, on peut mettre les ul et li en position:relative; : le comportement sera NORMAL (= celui PAR DEFAUT).
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    ul, li {
      position:relative;
    }
    absolute ou fixed sont des cas PARTICULIERS, car ces éléments SORTENT alors du flux.
    Il est alors nécessaire de les positionner (position:, top:, left:,...) et de les dimensionner (width:100%; .....)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  13. #73
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    Ce que je ne comprend pas c'est pourquoi
    Il fallait mettre le li en relative car en absolute ça ne marchait pas...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  14. #74
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    Ceci étant dit (et compris ??), voici un petit supplément :

    Tu as écrit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #navMain > ul > li > ul {
     
        position : absolute;
        width:100%;
        z-index:1;
      }
    /* ...... */
     
      /*SPECIAL : SOUS-SOUS-MENU à droite*/
    #navMain > ul > li > ul > li > ul { position : absolute; width:100%;
        left:100%;/*SOUS-SOUS-MENU à droite*/
        top:0; 
    	z-index:1; }
    Comment ferais-tu pour SIMPLIFIER l'écriture ?
    En clair : comment REDUIRE la quantité de code ?

    (et globalement, tu as déjà beaucoup trop de code redondant...)

    Indice : le "C" de "CSS" signifie "en Cascade".



    N.B. Et enlève les z-index:1; partout !
    ça ne sert à rien (pour l'instant) !
    D'autant qu'UN SEUL suffit... bien placé.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  15. #75
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    [EDIT] PAR CONTRE, Laurent,

    Je constate que dans "TON" code, tu t'es ENCORE contenté de COPIER-COLLER MON CODE !!!

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     /*SPECIAL : SOUS-SOUS-MENU à droite*/
    .....
        left: 100%; /*SOUS-SOUS-MENU à droite*/
    JE RECONNAIS MON ECRITURE !!!!


    Comment veux-tu PROGRESSER si tu ne fais AUCUN effort personnel ?...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  16. #76
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    Pas franchement d'accord car certes je suis reparti de ton code mais j'ai fait l'effort de le comprendre et de le modifier car ce qui fonctionnait en flex ne suffisait pas en display:table...

    maintenant je répond au post #74 : OK pour avoir écrit ça. J'ai donc pensé que vu le concept d'héritage en CSS, on pouvait supprimer le position : absolute; width:100%; de la ligne 10. Mais il n'en est rien : si je supprime le positionnement, du coup le top:0; de #navMain > ul > li > ul > li > ul se réfère à #navMain > ul > li > ul et plus à #navMain > ul > li > ul > li et si je supprime le width:100%; le sous-sous-menu ne fait plus la largeur du li mais est tout petit Pourquoi ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  17. #77
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    Comme tu l'as écrit toi-même : ".....li > ul....." cible le ul, enfant direct.

    Mais quand on l'enlève, on cible tous les enfants, quel que soit le niveau.

    Donc.... on peut écrire :
    • d'une part les instructions "générales" avec .....li ul..... { ... }
    • d'autre part les instructions "spécifiques" avec .....li > ul..... { ... }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  18. #78
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    Je suis content car je viens de trouver la simplification :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #navMain > ul > li ul {
        position : absolute;
        width:100%;  
      }
     
    ....
     
      /*SPECIAL : SOUS-SOUS-MENU à droite*/
    #navMain > ul > li > ul > li > ul {
        left:100%;/*SOUS-SOUS-MENU à droite*/
        top:0; 
    	}

    et avant de passer à l'exercice 7, on vient de me parler (au boulot) d'un problème urgent donc je switche temporairement...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  19. #79
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Ne serait-ce pas plus simple comme cela?

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    #navMain > ul ul {
        position : absolute;
        width:100%;
        top:100%
        left:0;  
      }
     /*SPECIAL : SOUS-SOUS-MENU à droite*/
    #navMain > ul  ul  ul {
        left:100%;      /*SOUS-SOUS-MENU à droite*/
        top:0;  
      }

  20. #80
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    Bonjour JefReb,
    merci d'intervenir !

    Ce n'est pas (tout-à-fait) faux, mais il ne faut pas aller trop vite avec laurenSc

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #navMain > ul ul { /* niveau 2 et SUIVANTS */
    ...
    #navMain > ul  ul  ul { /* niveau 3 et SUIVANTS */
    ...
    dans le contexte actuel, tu as raison, car on n'a que DEUX niveaux* (niveau 2 et niveau 3) de sous-menu (le niveau 1 étant le menu principal).

    Mais si on en ajoute un suivant, là ça n'ira plus, car tu ne cibles plus précisément un niveau de menu,
    et il faudra des contre-instructions pour les niveaux suivants, ce que je ne veux pas.

    *Pour moi, c'est LARGEMENT suffisant !
    En ajouter encore un serait anti-ergonomique (trop d'action :hover avant d'y parvenir)

    N.B. De plus, en écrivant "ul ul", tu "sautes" le li intermédiaire, et je ne suis pas sûr que Laurent le comprenne du 1er coup...
    Ca, c'est pour plus tard...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. tableau extensible en php ou html
    Par haamdi dans le forum Scripts
    Réponses: 4
    Dernier message: 06/07/2012, 15h39
  2. PHP avec extension HTML
    Par jeffer dans le forum Débuter
    Réponses: 3
    Dernier message: 10/11/2009, 10h50
  3. Réponses: 1
    Dernier message: 21/08/2008, 11h47
  4. passer d'une page html vers PHP
    Par @min@ dans le forum Formulaires
    Réponses: 5
    Dernier message: 06/04/2007, 21h34
  5. Probleme pour passer de l'écriture html a php
    Par cyberdevelopment dans le forum Syntaxe
    Réponses: 2
    Dernier message: 18/08/2006, 18h24

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