Discussion: Menu flex avec IE

  1. #41
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 171
    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 171
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut


    Je comprend tout du code et pourquoi y en avait en trop : https://codepen.io/laurentsc/pen/XzMvba/

    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
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0;/* marge extérieure */
      padding: 0;/* marge intérieure */
      border: 0;
    }
    /* ------------------------------- */
    /* MENU */
     
    #navMain a {
      text-decoration: none;/* ne pas souligner */
    }
    #navMain ul {
      display:table;
    }
     
    /* -------------- */
    /* MENU : niveau 1 *//* #navMain > ul : on ne pointe que sur les ul directement enfants de #navMain (contrairement à #navMain ul qui désigne tous les ul sous #navMain quelque soit le niveau) */
    #navMain > ul > li > a {
      background: #2980b9;
    }
    /* --------------- */
    /* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
    #navMain > ul > li.active > a {
      background: #20638f;
    }
     
    #navMain ul li a {
      display: block;
      color: #fff;
      padding: 10px 10px;/* marge intérieure du menu Horiz Vert*/
    }
     
    /* media queries */
    /*@media screen and (max-width: 640px) {
    #navMain > ul > li { width:100%; }
    #navMain ul{ margin:0;}/* si menu vertical, le coller à gauche 
    }*/
     
    @media screen and (min-width: 641px) {
      #navMain ul {
      width:50%;/* largeur du menu */
    }
    #navMain > ul > li { display:table-cell; width:10%; }
    #navMain ul{margin:auto;}/* si menu horiz le centrer */
    min-width:640px;
    }
    Tout à l'heure j'avais commencé la V4 en codepen et tout perdu (je sais pas trop comment). J'avais fait des sauvegardes, mais pas de l'URL...

    Et comme demain, lever à 6h30, fini pour ce soir (et pas là demain matin). Je referai la V4 demain après-midi (du moins j'essaierai car avant de tout perdre, j'avais des difficultés ; le hover ne marchait pas).
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  2. #42
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    Bonjour Laurent,

    SOLUTION pour l'Exercice 3 (afin que tu continues sur une bonne base de travail) :
    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
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0; /* marge extérieure */
      padding: 0; /* marge intérieure */
      border: 0; /*bordure*/
    }
    /* ------------------------------------------------------ */
    /* MENU - style général */
    /* ------------------------------------------------------ */
    #navMain ul, #navMain li {
      list-style: none; /* pas de style de liste (puces,...) */
    }
    /* 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 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% */
     
    /* Ici, RIEN à mettre : c'est le comportement normal des balises ! */
     
    /* ------------------------------------------------------ */
    /* 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 { /* ul 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 */
      }
      #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 */
      }
    }
    /* ------------------------------------------------------ */
    "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

  3. #43
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 171
    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 171
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    Aujourd'hui très peu de temps à consacrer au menu
    Néanmoins les exercices 1 à 10, je préfère nettement à ton post #29 (bien plus formateur).
    Je n'ai pu m'y mettre aujourd'hui qu'à 21h et en partant de la base corrigée de l'exercice 3, j'ai tenté l'exercice 4 : https://codepen.io/laurentsc/details/vWmpZb/

    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
    <nav id="navMain">
      <ul>
        <li class="active"><!-- active : menu EN COURS -->
          <a href="#">A - One</a>
          <ul>
            <li><a href="#">A.1</a></li>
            <li><a href="#">A.2</a></li>
          </ul>
        </li>
        <li >
          <a href="#">B - Two</a>    
        </li>
        <li>
          <a href="#">C - Three</a>     
          </li>
          <li>
            <a href="#">D - Four</a>
          </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
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0; /* marge extérieure */
      padding: 0; /* marge intérieure */
      border: 0; /*bordure*/
    }
    /* ------------------------------------------------------ */
    /* MENU - style général */
    /* ------------------------------------------------------ */
    #navMain ul, #navMain li {
      list-style: none; /* pas de style de liste (puces,...) */
    }
    /* 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 { max-width:100%; }
    }
     
     
    /* ------------------------------------------------------ */
    /* 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 {
        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 */
      }
      #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 */
      }
    }
    /* ------------------------------------------------------ */

    Comme tu peux le constater si le comportement du menu vertical est correct, ce n'est pas le cas du menu horizontal sur hover. Pourquoi ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  4. #44
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    Hello,

    Indice donné ici.

    Important : un élément est positionné par rapport à son plus proche parent positionné aussi.

    En clair : quand on met position:absolute; il faut mettre le parent en position:relative;
    "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

  5. #45
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    À corriger dans le code (le tien et... le mien !!)

    Remplacer :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
      #navMain ul {
        display:table;
    ...
    Par :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
      #navMain > ul { /* uniquement enfant direct (niveau1) */
        display:table;
    ...
    "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. #46
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 171
    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 171
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    OK hier, relu trop vite les consignes pour l'exercice 4.

    J'ai corrigé mon codepen : https://codepen.io/laurentsc/details/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
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0; /* marge extérieure */
      padding: 0; /* marge intérieure */
      border: 0; /*bordure*/
    }
    /* ------------------------------------------------------ */
    /* MENU - style général */
    /* ------------------------------------------------------ */
    #navMain ul, #navMain li {
      list-style: none; /* pas de style de liste (puces,...) */
    }
    /* 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{ max-width:100%;
       position:absolute;}
       navMain > ul > li { 
        position : relative;
       }
    }
     
     
    /* ------------------------------------------------------ */
    /* 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 : absolute;
      }
    }
    /* ------------------------------------------------------ */
    mais en mode horizontal, pas bon. Et pourquoi en desktop, sous-menu en absolute mais en phone relative ? Et d'ailleurs, je ne saisis pas pourquoi il faut les positionner...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  7. #47
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    Citation Envoyé par laurentSc Voir le message
    Et pourquoi en desktop, sous-menu en absolute mais en phone relative ? Et d'ailleurs, je ne saisis pas pourquoi il faut les positionner...
    C'est tout l'intérêt de cet exercice !

    Si je te dis tout, tu n'apprendras pas.
    Donc, A TOI donc de... t'exercer et de TESTER !

    CORRECTION de ton code V4 :

    • pour PHONE, RIEN A METTRE !! C'est le comportement NORMAL des balises : "menu vertical"
    • C'est pour ça que je te fais travailler sur DESKTOP : pour AJOUTER le CSS nécessaire et suffisant à son bon fonctionnement en tant que "menu horizontal (niveau 1)".

    • @media screen and (max-width:640px) { : PAS BESOIN ! On est en "mobile first", et en "comportement normal" !
    • #navMain > ul{ max-width:100%; position:absolute;} : NON PLUS ! (RIEN A METTRE POUR PHONE !)

    • DESKTOP : Où est le code nécessaire pour le SOUS-MENU ??
    • position : absolute; ne se met pas sur le <li>, mais sur le <ul> du sous-menu *

    * Important : un élément est positionné par rapport à son plus proche parent positionné aussi.
    En clair : quand on met position:absolute; il faut mettre le parent en position:relative;


    N.B. Tu as le droit de regarder la version COMPLETE du code, pour y retrouver les bonnes instructions !

    Allez ! Courage**...

    **Je le dis autant pour toi que pour moi...
    "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. #48
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 171
    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 171
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    Je pense avoir bien progressé mais il reste des points obscurs que je verrai demain.

    N.B. Tu as le droit de regarder la version COMPLETE du code, pour y retrouver les bonnes instructions !
    où ça, la version COMPLETE du code ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  9. #49
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    J'ai déjà donné un code fonctionnel (codepen).
    "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. #50
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 171
    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 171
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    OK, d'ailleurs, j'ai déjà consulté ton codepen, simplement je n'avais pas percuté que le code complet, c'était ça...

    Dans le post #47, tu dis de ne rien mettre pour le cas "phone", néanmoins au post #35, tu dis de mettre le sous-menu en position relative...alors ?

    Ma V4 en est là : 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
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0; /* marge extérieure */
      padding: 0; /* marge intérieure */
      border: 0; /*bordure*/
    }
     
    /* ------------------------------------------------------ */
    /* MENU - style général */
    /* ------------------------------------------------------ */
    #navMain ul, #navMain li {
      list-style: none; /* pas de style de liste (puces,...) */
    }
    /* 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:1%;
       }
       navMain > ul > li { 
         position : absolute
       }
         #navMain > ul > li > ul {
        position : relative;
      }
    }
     
     
    /* ------------------------------------------------------ */
    /* 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 {/*position:absolute;*/}
      #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:180px;
      }
    }
    /* ------------------------------------------------------ */

    Tu peux constater qu'en mode "desktop", le sous-menu s'affiche désormais correctement, par contre en "phone", je voudrais que le menu soit étroit (du genre 10% de la fenêtre), mais il occupe la largeur complète. Comment faire ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  11. #51
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    Citation Envoyé par laurentSc Voir le message
    ...par contre en "phone", je voudrais que le menu soit étroit (du genre 10% de la fenêtre)...
    Ça ne fait pas partie de l'EXERCICE !!

    Quand tu auras fait TOUS les EXERCICES, et TOUT bien compris, tu pourras personnaliser en fonction de TES besoins.


    Cela dit, je vais répondre à ta question :
    Dans ce cas, comme c'est une instruction SPÉCIFIQUE à PHONE (car ça ne concerne PAS DESKTOP), il faut ajouter le media query pour "PHONE" :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    /* UNIQUEMENT SUR PHONE */
    @media screen and (max-width: 640px) 
    {
     #navMain > ul { width:10%;  min-width:120px; } /*niveau 1*/
    }
    "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

  12. #52
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 171
    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 171
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    J'avais déjà fait ça (lignes 38 à 41), sans le min-width, mais ça n'arrange rien (même avec un width à 10%)...

    Tu ne réponds pas à cette question :
    Dans le post #47, tu dis de ne rien mettre pour le cas "phone", néanmoins au post #35, tu dis de mettre le sous-menu en position relative...alors ?
    EDIT : dommage que le post #1 ne soit pas modifiable par moi car le titre ne va plus du tout...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  13. #53
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    Rien ne te choque ?

    Et non, je ne répondrais pas. LIS la documentation et TESTE toi-meme.

    "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

  14. #54
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 171
    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 171
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    OK, j'avais pas remarqué mon bug...

    Et dans le lien à lire que tu me donnes, c'est quelle partie qu'il faut regarder (car pas trouvé) ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  15. #55
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    Tu te fous quand même un peu du monde.....

    CHERCHE !!




    Il existe aussi la FAQ CSS !




    Si je dois faire TOUT LE BOULOT A TA PLACE, quel est l'INTERET ??
    "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. #56
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 171
    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 171
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    Ce n'est pas du foutage du monde (d'ailleurs, j'avais bien vu les 2 liens que tu indiques), mais je n'ai pas trouvé de réponse au point comme quoi tu avais dit de ne rien mettre pour le phone (post #35), puis que tu avais dit de positionner le sous-menu (post #47)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  17. #57
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    Oublie ça...
    "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. #58
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 171
    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 171
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    OK, je ne te lis que très tard donc je passerai à l'exercice 5 demain...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  19. #59
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 762
    Points
    20 762

    Par défaut

    CORRECTION Exercice 4 :

    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
    /* 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,...) */
    }
    /* 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 a:hover {
      background: #20638f; /*change la couleur de fond*/
    }
     
    /* ------------------------------------------------------ */
    /* on MASQUE les sous-menu - on AFFICHE sur :hover */
    #navMain ul li > ul {
      display: none; /* sous-menu de niveau suivant caché */
    }
    #navMain ul li:hover > ul {
      display: block; /* si on survole un li, on affiche le sous-menu correspondant */
    }
     
    /* ------------------------------------------------------ */
    /* 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) {
     
      /* RIEN ICI : comportement NORMAL des balises */
     
    }
     
    /* ------------------------------------------------------ */
    /* 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 {
        /*position:absolute;*/
      }
      #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%; /* même largeur que son parent */
        min-width: 180px; /* largeur mini */
      }
    }
    /* ------------------------------------------------------ */

    A NOTER :
    J'ai remplacé :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #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 */
    }
    par :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    /* ------------------------------------------------------ */
    /* on MASQUE les sous-menu - on AFFICHE sur :hover */
    #navMain ul li > ul {
      display: none; /* sous-menu de niveau suivant caché */
    }
    #navMain ul li:hover > ul {
      display: block; /* si on survole un li, on affiche le sous-menu correspondant */
    }
    De cette manière, on n'aura PAS de code à ajouter si on ajoute des sous-sous-niveaux supplémentaires.



    (RAPPEL) Exercice 5 :

    • Ajouter une flèche au menu "A" (indice : :before ou :after, au choix), pointée vers le bas
    • :hover : la faire pointer vers le haut
    "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

  20. #60
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    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 : 373
    Points : 478
    Points
    478

    Par défaut

    Désolé de m'insérer dans ce post, mais je n'arrive pas à comprendre l'intérêt de cet id
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <nav id="navMain">

    Je comprendrais à la rigueur si il y avait 2 menus dans la page, comme un horizontal et un vertical.
    Mais avec un seul menu quel est ce besoin de compliquer avec l'ajout d'un id ou d'une classe?

    Juste une question ...

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