Discussion: Menu flex avec IE

  1. #101
    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

    Merci Jérôme, Suis coincé jusqu'à demain.
    Je vais faire. Qu'est-ce qu'en MP?

    2- right:80%; : on peut mieux faire !
    Oui évidemment, il faut faire un petit padding-left en premier pour décoller le niveau 2 puis un right:auto pour supprimer le premier et un left: pour positionner le triangle.
    A demain. et encore merci
    Jef

  2. #102
    Membre émérite

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

    Par défaut

    J'ai bien vu vos interventions mais n'aurai très probablement le temps de répondre que demain.

    Mais
    Envoie-moi les liens de tes codepen en MP (car laurentSc a la fâcheuse tendance à copier-coller ! )
    m'a inspiré une blague pas gentille :
    L’homme sage apprend de ses erreurs,
    l’homme plus sage apprend des erreurs des autres !
    Confucius
    désolé JefReb, pas pu m'empêcher !!
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  3. #103
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 576
    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 576
    Points : 21 178
    Points
    21 178

    Par défaut

    @JefReb :

    Citation Envoyé par JefReb Voir le message
    Qu'est-ce qu'en MP?
    En "Message Privé" !

    • clique sur mon pseudo "jreaux62" (en haut à gauche de chacun de mes messages)
    • puis sur "Message Privé" !


    @laurentSc :

    l’homme ENCORE plus sage apprend.
    Tout court.
    "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. #104
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 576
    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 576
    Points : 21 178
    Points
    21 178

    Par défaut

    LE DEFI :
    • Proposer le code le plus OPTIMISE (= LEGER et SIMPLE) possible pour CHAQUE EXERCICE !
    • Le HTML et le CSS ne doivent comporter QUE le code nécessaire à l'exercice en cours.

    • Ecrire UN codepen pour CHAQUE exercice (lui donner en titre "Exercice 1", "Exercice 2",....) et en commentaire l'énoncé de l'exercice.
    • N'ECRIRE QUE LE CODE NECESSAIRE ET SUFFISANT à l'Exercice.
    • M'envoyer les liens des codepen en MP (on postera ensuite vos codes, avec corrections éventuelles)



    Voici le code HTML de base :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <nav id="navMain">
      <ul>
        <li><a href="#">A - One</a></li>
        <li><a href="#">B - Two</a></li>
        <li><a href="#">C - Three</a></li>
        <li><a href="#">D - Four</a></li>
      </ul>
    </nav>
    Début du CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    * { margin:0; padding:0; border:0; }
    html, body { font-family:Arial,sans-serif; fonts-size:100%; }
    /* ------------------------------- */

    Exercice 1 :
    - menu horizontal en utilisant (display:table), largeur : 100% de la fenêtre
    - liens (a) : padding 10px 15px, non soulignés, texte blanc, couleur de fond #2980b9 (bleu)
    - lien au survol (:hover) : couleur de fond #20638f (bleu foncé)

    Exercice 2 :
    - centrer le menu : largeur 50% de la fenêtre
    - largeur mini : 640px

    Exercice 3 :
    - On garde le menu horizontal pour tablette et desktop
    - On met le menu vertical sur phone (largeur inférieure à 640px) : largeur 100% de la fenêtre
    Indice : media queries

    N.B. en "mobile first" :
    - on écrit d'abord le code pour phone,
    - Puis, avec media queries, celui pour tablette, et desktop

    Exercice 4 :
    - Ajouter un niveau de sous-menu (niveau 2) au menu "A" (pas de flèche pour l'instant)
    - couleur de fond du sous-menu : #333 (gris très foncé)
    - masquer le sous-menu
    - Desktop : l'afficher (avec :hover) SOUS le menu (indice : position absolute). Largeur du sous-menu 100%, minimum 180px.
    - Phone : l'afficher (avec :hover) DANS le menu (comportement normal)

    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
    <nav id="navMain">
      <ul>
        <li>
          <a href="#">A - One</a>
          <ul>
            <li>
              <a href="#">A - 1</a>
            </li>
            <li>
              <a href="#">A - 2</a>
            </li>
            <li>
              <a href="#">A - 3</a>
            </li>
            <li>
              <a href="#">A  - 4</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>

    Exercice 5 :
    - Ajouter la class "hasSub" au menu "A" (qui possède un sous-menu)
    - Ajouter une flèche (couleur : blanche) au menu "A" (indice : :before ou :after, au choix), pointée vers le bas
    - code pour la flèche : "\25BC"
    - positionner la flèche en absolu, centrée verticalement, à droite dans le menu
    - au survol (:hover) : la faire pointer vers le haut
    - utiliser transform: rotate() pour inverser le sens de la flèche (indice : 180deg)
    - attention à la compatibilité (-ms-, -webkit-,...)

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <nav id="navMain">
      <ul>
        <li class="hasSub">
          <a href="#">A - One</a>
          <ul>
    .....
    Exercice 6 :
    - Ajouter un sous-sous-menu (niveau 3) au menu "A" (pas de flèche pour l'instant)
    - couleur de fond (niveau 3) : #444; /* gris foncé */
    - Phone : l'afficher (:hover) DANS le menu (indice : comportement normal = RIEN à mettre !)
    - Desktop : l'afficher (:hover) A DROITE le son parent

    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
    42
    43
    44
    <nav id="navMain">
      <ul>
        <li class="hasSub">
          <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>
                <li>
                  <a href="#">A - 2.3</a>
                </li>
                <li>
                  <a href="#">A - 2.4</a>
                </li>
                <li>
                  <a href="#">A - 2.5</a>
                </li>
                <li>
                  <a href="#">A - 2.6</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">A - 3</a>
            </li>
            <li>
              <a href="#">A - 4</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>

    Exercice 7:
    - Ajouter la class "hasSub" au sous-menu "A - 2" (qui possède un sous-menu)
    - Ajouter la flèche pour ce sous-sous-menu.
    - la faire pointer vers la DROITE (indice : -90deg)
    - :hover : la faire pointer vers la GAUCHE (indice : 90deg)

    Exercice 8 :
    - Ajouter un sous-menu et un sous-sous-menu au menu "D"(le dernier)
    - Reprendre les exercices précédents, mais comme c'est le DERNIER du menu, le sous-sous-menu doit s'afficher À GAUCHE de son parent
    - on change aussi le sens des flèches pour ce DERNIER menu : pointant à GAUCHE, et au survol à DROITE
    - la positionner à GAUCHE dans le sous-menu (et plus à droite)

    Exercice 9 :
    - Si tu veux, tu peux encore ajouter un nouveau niveau (niveau 4), mais, ergonomiquement, c'est déconseillé.

    Exercice 10 :
    - Teste display:flex sur le niveau 1

    En fonction de vos questions et de votre intérêt, on verra comment améliorer l'esthétique de ce menu (animation de la flèche, par exemple)
    "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. #105
    Membre émérite

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

    Par défaut

    Voici (enfin) ma réponse au post #96 !

    1.a : les sous-menus de niveau 2 qui ont un sous-menu de niveau 3

    1.b : idem mais seulement si le menu de niveau 1 est le dernier et au survol

    1.c : idem 1.b mais avant-dernier menu de niveau 1 à la place du dernier.

    •et pourquoi a-t-on :hover sur les 2 dernières instructions (1b, 1c) et pas sur la première (1a)
    La rotation à -90° fait une flèche horizontale vers la droite (et la rotation de +90° une flèche horizontale vers la gauche). Elle concerne les sous-menus de niveau 2 ou plus sauf s'ils sont sous le dernier ou avant-dernier menu de niveau 1 sachant que pour ceux-ci, au repos, il faut une flèche vers la gauche (donc une rotation de +90°). Quand on survole les sous-menus, il faut inverser la flèche (droite->gauche pour la plupart des sous-menus et gauche->droite si les sous-menus sont sous le dernier ou avant-dernier menu de niveau 1)

    2. Pour voir la différence, comme je la voyais pas, j'ai remplacé les 0.5s par 5s et c'est devenu évident.
    •comment rétablir ce qui manque ?
    En remettant le code que j'ai supprimé.

    3. La flèche étant déjà à droite, j'ai pensé que tu voulais dire à gauche (ce qui serait logique), mais j'y arrive pas. Voici mon essai qui marche pas :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #navMain > ul > li:last-child  li.hasSub : after {
      /*right:80%;*/
      left:10px;
    }

    4. Avant de lire la réponse de jefReb, j'avais codé sa version compliquée...

    PS : au post #97, jefReb, tu donnes un code qui marche , mais pas trouvé sur le net ce que fait ::after (les 2x2 points à la place d'un seul) ???
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  6. #106
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 576
    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 576
    Points : 21 178
    Points
    21 178

    Par défaut

    Bonjour Laurent,

    3. La flèche étant déjà à droite, j'ai pensé que tu voulais dire à gauche (ce qui serait logique), mais j'y arrive pas. Voici mon essai qui marche pas :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #navMain > ul > li:last-child  li.hasSub : after {
      right:auto; /* il faut "désactiver" le right:10px; */
      left:10px;
    }


    JefReb m'a déjà envoyé ses codepen par MP.

    Souhaites-tu le faire aussi ?
    Laurent, tu peux poster DIRECTEMENT dans le fil de la discussion (pas besoin de MP)

    N.B. Il faut absolument commencer par l'Exercice 1 !
    Les autres vont découler à chaque fois du précédent.

    On les corrigera ensemble, l'UN après l'AUTRE, OK ?
    "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

  7. #107
    Membre émérite

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

    Par défaut

    Ok je commencerai vers 18h (là je suis en voiture (je conduis pas !) Et je rentre chez moi.
    Peux-tu m'expliquer ::after ? (Le doublement des 2 points )
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  8. #108
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 576
    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 576
    Points : 21 178
    Points
    21 178

    Par défaut

    Tu n'as pas l'option "RECHERCHE", dans ta voiture ??

    "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

  9. #109
    Membre émérite

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

    Par défaut

    Ma voiture a certainement l'option recherche mais pas celle de mon collègue

    /* il faut "désactiver" le right:10px; */
    J'ai beau désactiver, la flèche reste à gauche...

    A mon avis, je vais pas commencer les exercices avant 21h...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  10. #110
    Membre émérite

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

    Par défaut

    Finalement, j'ai commencé vers 23h30. Vu l'heure tardive, je ne fais ce soir que l'exercice 1 : https://codepen.io/laurentsc/pen/yPKjjK

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!--Enoncé
    - menu horizontal en utilisant (display:table), largeur : 100% de la fenêtre
    - liens (a) : padding 10px 15px, non soulignés, texte blanc, couleur de fond #2980b9 (bleu)
    - lien au survol (:hover) : couleur de fond #20638f (bleu foncé)
    -->
    <nav id="navMain">
      <ul>
        <li><a href="#">A - One</a></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
    * { 
      margin:0; 
      padding:0; 
      border:0; }
    html, body { 
      font-family:Arial,sans-serif; 
      fonts-size:100%; }
     
    #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*/
    }
     
    /* ------------------------------- */
     
    /* ------------------------------------------------------ */
    /* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
    /* on utilise les media queries pour modifier les styles  */
    /* ------------------------------------------------------ */
    /* MENU HORIZONTAL, centré - largeur 100%  */
    @media screen and (min-width: 641px) 
    {
      #navMain > ul {/* slt niveau 1 */
        display:table; /* se comporte comme une table */
        width:100%; /* largeur du menu */
      }
      #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 */
      }
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Je m'en doutais...
    ENCORE un copier-coller...

    Trop de code par rapport à ce qui est demandé.
    Et même quand J'écris (involontairement) une bêtise, tu la copies sans réfléchir ! (fonts-size:100%; )
    Ce n'est pas sérieux.

    Puisque tu ne veux pas apprendre ni comprendre, je laisse tomber.


    Je vais m'occuper de JefReb.
    Lui, il écrit son propre code.
    "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. #112
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 576
    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 576
    Points : 21 178
    Points
    21 178

    Par défaut

    Exercice 1 :
    • menu horizontal en utilisant (display:table), largeur : 100% de la fenêtre
    • liens (a) : padding 10px 15px, non soulignés, texte blanc, couleur de fond #2980b9 (bleu)
    • lien au survol (:hover) : couleur de fond #20638f (bleu foncé)


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <nav id="navMain">
      <ul>
        <li><a href="#">A - One</a></li>
        <li><a href="#">B - Two</a></li>
        <li><a href="#">C - Three</a></li>
        <li><a href="#">D - Four</a></li>
      </ul>
    </nav>
    CSS de départ (je ne l'écrirai plus par la suite :il ne changera pas) :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }
    html,
    body {
      font-family: Arial, sans-serif;
      font-size: 100%;
    }

    IMPORTANT : Il peut y avoir PLUSIEURS SOLUTIONS !
    Certaines plus judicieuses ou "modernes" que d'autres.

    Solution 1-A : https://codepen.io/jreaux62/pen/yPKLee
    Avec display:table;
    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
    /* ------------------------------- */
    /* MENU */
    #navMain ul,
    #navMain li {
      list-style: none; /* pas de style de style (puce,...) */
    }
    /* menu niveau 1 : horizontal */
    #navMain ul {
      display: table; /* se comporte comme une table */
      width: 100%;
    }
    #navMain li {
      display: table-cell; /* se comporte comme une cellule table */
      width: 1%; /* 1% : astuce pour que tous aient la même largeur */
    }
    #navMain a {
      display: block; /* block, au lieu de inline : prend toute la largeur de son parent */
      padding: 10px 15px;
      color: #fff;
      background: #2980b9; /* bleu */
      text-decoration: none; /* pas de soulignement */
    }
    #navMain a:hover {
      background: #20638f; /* bleu foncé */
    }
    /* ------------------------------- */

    Solution 1-B :
    Avec display:flex;
    on remplace :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* menu niveau 1 : horizontal */
    #navMain ul {
      display: table; /* se comporte comme une table */
      width: 100%;
    }
    #navMain li {
      display: table-cell; /* se comporte comme une cellule table */
      width: 1%; /* 1% : astuce pour que tous aient la même largeur */
    }
    par :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    /* menu niveau 1 : horizontal */
    #navMain ul {
      display: -webkit-flex; display: flex;
     
    }
    #navMain li {
      -webkit-flex: 1 1 1%; flex: 1 1 1%; /* 1% : astuce pour que tous aient la même largeur */
    }
    (pour JefReb : compare les 2 codes)
    On obtient sensiblement le même résultat.
    La différence ne se voit pas ici, mais flex offre d'autres possibilités puissantes, qu'on verra plus tard.

    N.B. Dans la suite des corrections, je resterai en display:table; (cette partie du code ne changera pas)


    2 liens que je consulte régulièrement :



    Solution 1-C : ("ancienne méthode")
    Avec float:left;
    on remplace par :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    /* menu niveau 1 : horizontal */
    #navMain ul {
    }
    #navMain li {
      float: left; /* flottant à gauche (SORT DU FLUX) */
      width:25%; /* 4 menus */
    }
    On N'utilisera PLUS cette solution !
    "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. #113
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 576
    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 576
    Points : 21 178
    Points
    21 178

    Par défaut

    Exercice 2 :
    • centrer le menu : largeur 50% de la fenêtre
    • largeur mini : 640px


    Solution Exercice 2 : https://codepen.io/jreaux62/pen/RjMwKq
    On modifie le code précédent :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    /* menu niveau 1 : horizontal */
    #navMain ul {
      display: table; /* se comporte comme une table */
      width: 50%;
      margin: 0 auto; /* centrage */
      min-width: 640px;
    }
    Jusqu'ici, rien de compliqué.


    Astuce : COMMENT SAVOIR si une instruction est NÉCESSAIRE et SUFFISANTE ?

    Simple :
    • on l'enlève, et on TESTE pour VOIR ce qui se passe.

    S'il ne se passe RIEN (de visible) :
    • soit cette instruction est REDONDANTE ( = DEJA mise avant)
    • soit elle indique une valeur PAR DEFAUT ( = qui s'applique, même si on ne met rien)

    Dans les 2 cas : elle n'est donc PAS nécessaire. On l'enlève.
    "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. #114
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 576
    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 576
    Points : 21 178
    Points
    21 178

    Par défaut

    Exercice 3 :
    • On garde le menu horizontal pour tablette et desktop (largeur supérieure à 640px)
    • On met le menu vertical sur phone (largeur inférieure à 640px) : largeur 100% de la fenêtre
    • Indice : media queries

    N.B. en "mobile first" :
    • on écrit d'abord le code pour phone,
    • Puis, avec media queries, celui pour tablette, et desktop


    Dans l'exercice, j'ai défini arbitrairement le point de rupture ("break point") à 640px.
    Par la suite, vous pourrez définir d'autres points de rupture (pour distinguer "tablette" de "desktop", par exemple).

    Solution Exercice 3 : https://codepen.io/jreaux62/pen/eeMYWv

    3a- Partie COMMUNE :
    Placée au début, elle ne dépend pas de la largeur de la fenêtre.

    3b- PHONE (moins de 640px) :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    /* ------------------------------- */
    /* PHONE -(moins de 640px) */
    @media screen and (max-width: 640px) {
      /* RIEN ICI : c'est le comportement normal des balises ! */
    }
    3c- TABLET + DESKTOP (plus de 640px):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    /* ------------------------------- */
    /* TABLET + DESKTOP -(plus de 640px)  */
    @media screen and (min-width: 641px) {
      /* menu horizontal */
      /* C'est ICI qu'on met le code pour le menu HORIZONTAL, qui ne concerne QUE DESKTOP ! */
    }
    "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. #115
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 576
    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 576
    Points : 21 178
    Points
    21 178

    Par défaut

    Exercice 4 :
    • Ajouter un niveau de sous-menu (niveau 2) au menu "A" (pas de flèche pour l'instant)
    • couleur de fond du sous-menu : #333 (gris très foncé)
    • masquer le sous-menu
    • Desktop : l'afficher (avec :hover) SOUS le menu (indice : position absolute). Largeur du sous-menu 100%, minimum 180px.
    • Phone : l'afficher (avec :hover) DANS le menu (comportement normal)

    Code HTML de base :
    Code : 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
    <nav id="navMain">
      <ul>
        <li>
          <a href="#">A - One</a>
          <ul>
            <li>
              <a href="#">A - 1</a>
            </li>
            <li>
              <a href="#">A - 2</a>
            </li>
            <li>
              <a href="#">A - 3</a>
            </li>
            <li>
              <a href="#">A  - 4</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>
    Solution Exercice 4 : https://codepen.io/jreaux62/pen/VrXwGg

    4a- PHONE : toujours rien ici ! C'est le comportement normal des balises (comportement PAR DEFAUT) !
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    /* ------------------------------- */
    /* PHONE -(moins de 640px) */
    @media screen and (max-width: 640px) {
      /* RIEN ICI : c'est le comportement normal des balises */
    }
    4b- DESKTOP :
    On va devoir positionner le sous-menu en absolute, pour qu'il puisse SORTIR DU FLUX et s'afficher EN DESSOUS de son parent !
    Pour ça, il faut aussi que le parent (<li>) soit positionné :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #navMain li {
      position:relative; /* nécessaire pour positionner les sous-menus */
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
      /* niveau 2 (et suivants) */
      #navMain ul ul {
        position: absolute; /* positionné en absolu (SORT DU FLUX) */
        width: 100%;
        top:100%; left:0; /* sous le niveau 1 */
      }
    N.B. #navMain ul ul : tous les <ul> enfant, de niveau 2 et suivants (comme on n'a pas encore de sous-menu niveau 3, pas besoin de cibler précisément)
    Pour cibler précisément le niveau 2, on utilisera : #navMain > ul > 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

  16. #116
    Membre émérite

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

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    je laisse tomber.
    Pas moi...
    Citation Envoyé par jreaux62 Voir le message
    Puisque tu ne veux pas apprendre ni comprendre
    pas d'accord, car même si je copie (bêtement) des fautes involontaires (j'avais pas lu cette partie), quand je lis ton code, ça m'apprend bien des choses. (Quand je fais un copier-coller, ça ne m'empêche de chercher à comprendre ce que je copie).
    Je vais continuer sans lire les solutions que tu donnes (ou bien seulement après avoir moi-même codé, pour apprendre).
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    OK, Laurent, je demande à voir...

    De toute façon, depuis toutes ces années, on commence quand même à bien se connaitre
    Tu sais que je ne te laisse pas "vraiment" tomber.
    Ni longtemps...



    VOIS CA COMME UN JEU !
    Rien d'autre.


    AU FAIT, pour vos codepen (Laurent et JefReb), vous avez un onglet "Settings", dans lequel vous pouvez définir :
    • "Pen Title" -> Titre de l'Exercice
    • "Pen Description" -> Description de l'Exercice
    "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. #118
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 576
    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 576
    Points : 21 178
    Points
    21 178

    Par défaut

    Exercice 5 :
    • Ajouter la class "hasSub" au menu "A" (qui possède un sous-menu)
    • Ajouter une flèche (couleur : blanche) au menu "A" (indice : :before ou :after, au choix), pointée vers le bas
    • code pour la flèche : "\25BC"
    • positionner la flèche en absolu, centrée verticalement, à droite dans le menu
    • au survol (:hover) : la faire pointer vers le haut (couleur : jaune)
    • utiliser transform: rotate() pour inverser le sens de la flèche (indice : 180deg)
    • attention à la compatibilité (-ms-, -webkit-,...)


    Solution Exercice 5 : https://codepen.io/jreaux62/pen/eeMmgK

    Les flèches seront positionnées en absolu dans leur parent (li).

    Il faut donc que les li soient eux aussi positionnés.
    Et cette directive vaut aussi bien pour PHONE que pour DESKTOP : elle est COMMUNE.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #navMain li {
      position:relative; /* nécessaire pour positionner les sous-menus et les flèches ! */
    }
    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
    /* ------------------------------- */
    /* flèche */
    #navMain li.hasSub:after {
      position: absolute;
      content: "\25BC";
      font-size: 16px;
      color: #fff;
      top: 10px;
      right: 10px;
    }
    #navMain li.hasSub:hover:after {
      color: yellow; /* jaune */
      -ms-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    On inverse le sens de la flèche avec transform: rotate(180deg);.
    -ms-, -moz- et -webkit- sont des préfixes, pour la compatibilité cross-browser (voir : transform CSS)

    N.B. Dans le libellé, je N'ai PAS parlé de "mouvement" de la flèche. Donc PAS de transition:....... !
    "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

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

    Par défaut

    Exercice 6 :
    • Ajouter un sous-sous-menu (niveau 3) au menu "A" (pas de flèche pour l'instant)
    • couleur de fond (niveau 3) : #444; /* gris foncé */
    • Phone : l'afficher (:hover) DANS le menu (indice : comportement normal = RIEN à mettre !)
    • Desktop : l'afficher (:hover) A DROITE le son parent


    HTML de base :
    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
    42
    43
    44
    <nav id="navMain">
      <ul>
        <li class="hasSub">
          <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>
                <li>
                  <a href="#">A - 2.3</a>
                </li>
                <li>
                  <a href="#">A - 2.4</a>
                </li>
                <li>
                  <a href="#">A - 2.5</a>
                </li>
                <li>
                  <a href="#">A - 2.6</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">A - 3</a>
            </li>
            <li>
              <a href="#">A - 4</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>

    Solution Exercice 6 : https://codepen.io/jreaux62/pen/eeMmxx

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #navMain ul ul ul a {
      background: #444 /* gris très foncé */
    }

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
      /* niveau 2 (et suivants) */
      #navMain ul ul {
        position: absolute;
        width: 100%;
        top:100%; /* positionné en absolu SOUS le niveau 1 */
        left:0;
      }
      /* niveau 3 (et suivants) */
      #navMain ul ul ul {
        top:0;
        left:100%; /* A DROITE du niveau 2 */
      }
    "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. #120
    Membre émérite

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

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    OK, Laurent, je demande à voir...
    Je m'y mets demain.

    Citation Envoyé par jreaux62 Voir le message
    VOIS CA COMME UN JEU !
    Rien d'autre.
    Difficile d'y voir un jeu alors que je cherche à apprendre...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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