Discussion: Menu flex avec IE

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

    Par défaut

    Bonjour,

    1- c'est écrit dans le code. Ouvre les yeux.

    2- oui, c'est une classe.
    Inutile en CSS pur, puisqu'elle était ajoutée via jQuery dans l'autre code (avec jQuery, donc)
    Enlève-la...

    3- 3 solutions :
    • ne pas mettre de niveau supérieur à 3 (ergonomiquement, ce n'est pas bon non plus)
    • utiliser le code avec jQuery (au clic)
    • ou afficher le niveau 4 sur le coté (ce qui posera d'autres soucis, mais bon...) :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* DESKTOP : menu horizontal */
    @media screen and (min-width:1025px) {
     /*SPECIAL : SOUS-SOUS-SOUS-MENU niveau 4 à droite*/
    	#navMain > ul > li > ul > li > ul > li > ul { position:absolute; width:100%;
        left:100%; top:0; /*droite*/
    	z-index:1; }
    	#navMain > ul > li:last-child > ul > li > ul > li > ul { position:absolute; width:100%;
        left:-100%; top:0; /*dernier à gauche*/
    	z-index:1; }
    }
    ou
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* DESKTOP : menu horizontal */
    @media screen and (min-width:1025px) {
     /*SPECIAL : SOUS-SOUS-SOUS-MENU niveau 4 à gauche*/
    	#navMain > ul > li > ul > li > ul > li > ul { position:absolute; width:100%;
        left:-100%; top:0; /*à gauche*/
    	z-index:1; }
    	#navMain > ul > li:last-child > ul > li > ul > li > ul { position:absolute; width:100%;
        left:100%; top:0; /*dernier à droite*/
    	z-index:1; }
    }

    4- as-tu testé ?
    "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. #22
    Membre émérite

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

    Par défaut

    A quoi ça sert de coder une rotation de 0° ?

    Hier soir, je croyais que mon code de display:table fonctionnait mais pas ce matin...Est-ce possible ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    1- Pour les flèche, puisqu'il n'y a pas d'ajout de la classe "open", il n'y a pas de rotation des flèches.
    il faut alors remplacer :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    #navMain .hasSub.open:after {
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    #navMain .hasSub:hover:after {
    Quant au( 0deg), essaye sans, tu verras bien.

    2- Pour le display:table;... montre TON code... COMPLET !
    Pas des "petits bouts (mal) choisis" !


    N.B. J'ai fait évoluer mon "MENU multi-niveaux - Full CSS (:hover)" : https://codepen.io/jreaux62/pen/gXweLY

    Néanmoins, le :hover est toujours déconseillé sur médias TACTILES !
    "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. #24
    Membre émérite

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

    Par défaut

    OK, c'est mieux de laisser une rotation de 0 degrés...

    J'ai modifié ton dernier Codepen avec mon display:table https://codepen.io/laurentsc/pen/GOrEQe/

    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
    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
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
     
    <nav id="navMain">
      <ul>
        <li class="active hasSub"><!-- active : menu EN COURS -->
          <a href="#">A - One</a>
          <ul>
            <li>
              <a href="#">1</a>
            </li>
            <li class="hasSub">
              <a href="#">2</a>
              <ul>
                <li>
                  <a href="#">2.1</a>
                </li>
                <li>
                  <a href="#">2.2</a>
                </li>
                <li>
                  <a href="#">2.3</a>
                </li>
                <li>
                  <a href="#">2.4</a>
                </li>
                <li>
                  <a href="#">2.5</a>
                </li>
                <li>
                  <a href="#">2.6</a>
                </li>
              </ul>
            </li>
            <li class="hasSub">
              <a href="#">3</a>
              <ul>
                <li class="hasSub">
                  <a href="#">3.1</a>
                  <ul>
                    <li>
                      <a href="#">3.11</a>
                    </li>
                    <li>
                      <a href="#">3.12</a>
                    </li>
                    <li>
                      <a href="#">3.13</a>
                    </li>
                    <li>
                      <a href="#">3.14</a>
                    </li>
                    <li>
                      <a href="#">3.15</a>
                    </li>
                  </ul>
                </li>
                <li class="hasSub">
                  <a href="#">3.2</a>
                  <ul>
                    <li>
                      <a href="#">3.21</a>
                    </li>
                    <li>
                      <a href="#">3.22</a>
                    </li>
                    <li>
                      <a href="#">3.23</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">3.3</a>
                </li>
                <li>
                  <a href="#">3.4</a>
                </li>
                <li>
                  <a href="#">3.5</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">4</a>
            </li>
          </ul>
        </li>
        <li class="hasSub">
          <a href="#">B - Two</a>
          <ul>
            <li>
              <a href="#">5</a>
            </li>
            <li>
              <a href="#">6</a>
            </li>
            <li>
              <a href="#">7</a>
            </li>
            <li>
              <a href="#">8</a>
            </li>
          </ul>
        </li>
        <li class="hasSub">
          <a href="#">C - Three</a>
          <ul>
            <li>
              <a href="#">9</a>
            </li>
            <li>
              <a href="#">10</a>
            </li>
            <li>
              <a href="#">11</a>
            </li>
            <li>
              <li class="hasSub">
                <a href="#">12</a>
                <ul>
                  <li>
                    <a href="#">12.1</a>
                  </li>
                  <li>
                    <a href="#">12.2</a>
                  </li>
                  <li>
                    <a href="#">12.3</a>
                  </li>
                  <li>
                    <a href="#">12.4</a>
                  </li>
                </ul>
              </li>
          </ul>
          </li>
          <li class="hasSub">
            <a href="#">D - Four</a>
            <ul>
              <li>
                <a href="#">1</a>
              </li>
              <li class="hasSub">
                <a href="#">2</a>
                <ul>
                  <li>
                    <a href="#">2.1</a>
                  </li>
                  <li>
                    <a href="#">2.2</a>
                  </li>
                  <li>
                    <a href="#">2.3</a>
                  </li>
                  <li>
                    <a href="#">2.4</a>
                  </li>
                  <li>
                    <a href="#">2.5</a>
                  </li>
                  <li>
                    <a href="#">2.6</a>
                  </li>
                </ul>
              </li>
              <li class="hasSub">
                <a href="#">3</a>
                <ul>
                  <li class="hasSub">
                    <a href="#">3.1</a>
                    <ul>
                      <li>
                        <a href="#">3.11</a>
                      </li>
                      <li>
                        <a href="#">3.12</a>
                      </li>
                      <li>
                        <a href="#">3.13</a>
                      </li>
                      <li>
                        <a href="#">3.14</a>
                      </li>
                      <li>
                        <a href="#">3.15</a>
                      </li>
                    </ul>
                  </li>
                  <li class="hasSub">
                    <a href="#">3.2</a>
                    <ul>
                      <li>
                        <a href="#">3.21</a>
                      </li>
                      <li>
                        <a href="#">3.22</a>
                      </li>
                      <li>
                        <a href="#">3.23</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">3.3</a>
                  </li>
                  <li>
                    <a href="#">3.4</a>
                  </li>
                  <li>
                    <a href="#">3.5</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">4</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
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
     
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }
    /* ------------------------------- */
    /* MENU */
    #navMain {
      position: relative;
      width: 100%;
      margin: 0 auto;
    }
    #navMain ul,
    #navMain li,
    #navMain a {
      position: relative;
      padding: 0;
      margin: 0;
      border: 0;
      text-decoration: none;
    }
    #navMain ul li {
      display: block;
    }
    #navMain ul li a {
      display: block;
      color: #fff;
      padding: 10px 10px;
      position: relative;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    }
    /* --------------- */
    /* MENU : niveau 1 */
    #navMain > ul > li > a {
      background: #2980b9;
      box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
    }
    /* --------------- */
    /* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
    #navMain > ul > li.active > a {
      background: #20638f;
    }
    /* --------------- */
    /* MENU : niveau 2 et suivants */
    #navMain ul ul > li > a {
      padding-left: 30px;
    }
    #navMain ul ul > li {
      background: #333;
      box-shadow: 0 1px 0 #444 inset, 0 -1px 0 #222 inset;
    }
    /* --------------- */
    /* MENU : niveau 3 et suivants */
    #navMain ul ul ul > li > a {
      padding-left: 30px;
    }
    #navMain ul ul ul > li {
      background: #555;
      box-shadow: 0 1px 0 #666 inset, 0 -1px 0 #444 inset;
    }
    #navMain ul ul ul ul > li > a {
      padding-left: 30px;
    }
    #navMain ul ul ul ul > li {
      background: #888;
      box-shadow: 0 1px 0 #999 inset, 0 -1px 0 #777 inset;
    }
    /* --------------- */
    /* hover */
    #navMain ul li:hover {
      background: #20638f;
      box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
    }
    #navMain > ul > li:hover > a {
      background: #20638f;
    }
    /* --------------- */
    /* avec sous-menu */
    #navMain li.hasSub > ul {
      display: none;
    }
     
    /* ------------------------------- */
    /* 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;
    }
     
    /* ------------------------------- */
    /* TEST : menu full vertical */
    /*	#navMain { max-width:480px; } */
    /* ------------------------------- */
    /* PHONE : menu vertical */
    @media screen and (max-width: 640px) {
      #navMain {
        /*max-width: 480px;*/ /* pour TEST */
      }
    }
    /* ---------- responsive  --------- */
    /* DESKTOP : menu horizontal */
    @media screen and (min-width:1025px) {
    	#navMain > ul { display:table; }
    	#navMain > ul > li { display:table-cell; width:30%;}
    	#navMain > ul > li > ul { position:absolute; width:100%;
    	z-index:1; }
     
      #navMain > ul > li > ul {
        position: absolute;
        width: 100%;
        z-index: 1;
      }
      /*SPECIAL : SOUS-SOUS-MENU niveau 3 à droite*/
      #navMain > ul > li > ul > li > ul {
        position: absolute;
        width: 100%;
        left: 100%; top: 0; /*à droite*/
        z-index: 1;
      }
      #navMain > ul > li:nth-last-child(2) > ul > li > ul, /*avant-dernier*/
      #navMain > ul > li:last-child > ul > li > ul {
        position: absolute;
        width: 100%;
        left: -100%; top: 0; /*dernier à gauche*/
        z-index: 1;
      }
      /*SPECIAL : SOUS-SOUS-SOUS-MENU niveau 4 à gauche*/
      #navMain > ul > li > ul > li > ul > li > ul {
        position: absolute;
        width: 100%;
        left: 100%; top: 0; /*à droite*/
        /*left: -100%; top: 0;*/ /*à gauche*/
        z-index: 1;
      }
      #navMain > ul > li:nth-last-child(2) > ul > li > ul > li > ul, /*avant-dernier*/
      #navMain > ul > li:last-child > ul > li > ul > li > ul {
        position: absolute;
        width: 100%;
        left: -100%; top: 0; /*dernier à gauche*/
        /*left: 100%; top: 0;*/ /*dernier droite*/
        z-index: 1;
      }
    /* ------------------------------- */
    /* fleche, avec rotation - niveaux 2 et suivants */
      #navMain > ul > li:nth-last-child(2) ul li.hasSub:after, /*avant-dernier*/
      #navMain > ul > li:last-child ul li.hasSub:after {
        right: auto;
        left: 10px;
      }
      #navMain > ul > li:nth-last-child(2) ul li.hasSub:hover:after, /*avant-dernier*/
      #navMain > ul > li:last-child ul li.hasSub:hover:after,
      #navMain ul ul li.hasSub:after {
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
      }
      #navMain > ul > li:nth-last-child(2) ul li.hasSub:after, /*avant-dernier*/
      #navMain > ul > li:last-child ul li.hasSub:after,
      #navMain ul ul li.hasSub:hover:after {
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
    }
     
    /* TABLET : menu horizontal */
    /*
    @media screen and (min-width:641px) and (max-width:1024px) {
    	#navMain > ul { display:-webkit-flex; display:flex; }
    	#navMain > ul > li { -webkit-flex:1 1 25%; flex:1 1 25%; }
    	#navMain > ul > li > ul { position:absolute; width:100%;
    	z-index:1; }
    }
    */
     
    /* --------------- */
    /* HOVER : afficher/masquer les SOUS-MENUS*/
    #navMain ul li > ul {
      display: none; /*on masque le SOUS-MENU*/
    }
    #navMain ul li:hover > ul {
      display: block; /*on affiche le SOUS-MENU*/
    }

    c'est visiblement pas bon, mais peut-on le faire marcher ? (pour que j'apprenne)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    	#navMain > ul { display:table; width:100%; }
    	#navMain > ul > li { display:table-cell; }
    	#navMain > ul > li > ul { position:absolute; width:100%;
    Je te laisse trouver où le modifier.
    Sinon, tu vas encore te contenter de copier-coller à la suite du 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

  6. #26
    Membre émérite

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

    Par défaut

    Pas eu la possibilité de tester avant...

    Sinon, tu vas encore te contenter de copier-coller à la suite du code...
    tu me connais bien

    Curieux car le codepen https://codepen.io/laurentsc/details/jayXby/ a un comportement différent de si je mets le code dans une page...Le menu du codepen a une largeur normale mais pas celui de la page et par contre les flèches du codepen sont fixes alors que celles de la page tournent comme il faut...

    J'ai aussi un problème pour l'intégrer dans mon site, mais on verra plus tard (sûrement demain); réglons déjà le problème ci-dessus.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    bonjour Laurent,

    Quand on te donne un code qui fonctionne, tu arrives systématiquement à en faire une bouse.

    Ca tient du génie...
    "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. #28
    Membre émérite

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

    Par défaut

    Ca tient du génie...
    Merci de reconnaître mon talent

    T'aurais pas un indice à me donner pour que je puisse m'extraire de cette bouse ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Si : prendre mon code tel quel, sans y toucher.
    "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. #30
    Membre émérite

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

    Par défaut

    Certes, mais pour apprendre, j'aimerais savoir le modifier.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Mais je ne peux rien pour ça...

    Je t'ai indiqué une méthode :

    • commencer SIMPLE -> Menu à UN SEUL niveau (= PAS de sous-menus) : justement, c'est à ce niveau que tu peux mettre en display:table !
    • Et ajouter le CSS au fur et à mesure.


    Code : 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>
    Si déjà tu arrives à placer ça correctement, tu pourras continuer.
    Pas avant.
    "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. #32
    Membre émérite

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

    Par défaut

    J'ai essayé d'appliquer : https://codepen.io/laurentsc/pen/aVJGYa

    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
    <nav id="navMain">
      <ul>
        <li class="active"><!-- active : menu EN COURS -->
          <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
     
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }
    /* ------------------------------- */
    /* MENU */
     
    #navMain ul,
    #navMain li,
    #navMain a {
      text-decoration: none;
    }
    #navMain ul {display:table;width:50%;}
     
    #navMain > ul > li { display:table-cell; }
     
    #navMain ul li a {
      display: block;
      color: #fff;
      padding: 10px 10px;
    }
    /* -------------- */
    /* MENU : niveau 1 */
    #navMain > ul > li > a {
      background: #2980b9;
    }
    /* --------------- */
    /* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
    #navMain > ul > li.active > a {
      background: #20638f;
    }
     
    }

    Qu'est-ce que ça vaut ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    OK.

    Exercice 2 :
    • Centrer ton menu
    • 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)

    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

    Allez, au boulot !
    "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. #34
    Membre émérite

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

    Par défaut

    Voici les exercices 2 et 3 : codepen mis à jour : https://codepen.io/laurentsc/details/aVJGYa/

    html inchangé et css :
    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
     
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }
    /* ------------------------------- */
    /* MENU */
     
    #navMain ul,
    #navMain li,
    #navMain a {
      text-decoration: none;
    }
    #navMain ul {display:table;width:50%;
    margin:auto;
    /*min-width:640px;*/}
     
     
     
    #navMain ul li a {
      display: block;
      color: #fff;
      padding: 10px 10px;
    }
    /* -------------- */
    /* MENU : niveau 1 */
    #navMain > ul > li > a {
      background: #2980b9;
    }
    /* --------------- */
    /* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
    #navMain > ul > li.active > a {
      background: #20638f;
    }
     
    @media screen and (max-width: 640px) {
    #navMain > ul > li { display:table-row; }
    #navMain ul{margin:0;}
    }
     
    @media screen and (min-width: 641px) {
    #navMain > ul > li { display:table-cell;width:2%; }
    #navMain ul{margin:auto;}
    }

    Super que tu me proposes des exercices...Merci de me donner la suite.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Corrections à faire avant du continuer :

    1- le comportement normal des <li> est d'être block, et s'affichent naturellement l'un en dessous de l'autre.
    Donc pas besoin de display:table-xxx pour phone. À supprimer

    2- Phone : mettre la largeur à 100%.

    3- Desktop : où est "largeur mini 640px" ?

    Exercice 4 :
    • Ajouter un niveau de sous-menu (niveau 2) au menu "A" (pas de flèche pour l'instant)
    • 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 (indice : position relative)


    Important : commence toujours par la version "phone" ("mobile first")
    "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. #36
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 420
    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 420
    Points : 20 803
    Points
    20 803

    Par défaut

    Je te conseille de créer UN codepen par exercice,
    et à y ajouter des commentaires, de sorte que tu puisses y revenir plus tard.

    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

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

    Par défaut

    Exercice 6 :
    • Ajouter un sous-sous-menu (niveau 3) au menu "A" (pas de flèche pour l'instant)
    • Desktop : l'afficher (avec :hover) A DROITE le son parent
    • Phone : l'afficher (avec :hover) DANS le menu


    Exercice 7:
    • Ajouter la flèche pour ce sous-sous-menu. La faire pointer vers la droite
    • :hover : la faire pointer vers la gauche
    "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. #38
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 420
    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 420
    Points : 20 803
    Points
    20 803

    Par défaut

    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
    • Idem : on change le sens des flèches pour ce dernier menu


    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
    "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. #39
    Membre émérite

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

    Par défaut

    Merci pour toutes ces étapes. En fait, elles sont toutes arrivées pendant mon repas de midi ! Je m'y suis mis, même si je suis très loin d'un 100%...De plus, je prend mon temps car je me renseigne au passage sur les propriétés CSS que je connais mal (ou pas). Je viens de prendre en compte les corrections du post #35 : https://codepen.io/laurentsc/pen/XzMvba/ et je vais passer à l'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
     
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0;/* marge extérieure */
      padding: 0;/* marge intérieure */
      border: 0;
    }
    /* ------------------------------- */
    /* MENU */
     
    #navMain ul,
    #navMain li,
    #navMain a {
      text-decoration: none;/* ne pas souligner */
    }
    #navMain ul {
      display:table;
      width:50%;/* largeur du menu */
    }
     
    /* -------------- */
    /* 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 > li { display:table-cell; width:10%; }
    #navMain ul{margin:auto;}/* si menu horiz le centrer */
    min-width:640px;
    }
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Tu as du code en trop.

    • text-decoration ne s'applique qu'à a.
    • width:50%; ne doit s'appliquer que pour desktop. display:table aussi.
    • Pas besoin de query pour phone.

    À corriger.

    Il ne faut que le code nécessaire et suffisant.

    Je résume :

    1- écris le code uniquement pour phone : c'est un code simple !
    presque RIEN à écrire, puisque c'est le fonctionnement normal, par défaut, des balises.

    2- ajoute ensuite, avec media query, le code pour desktop (ici, supérieur à 640px)


    Si déjà là, tu ne comprends pas bien à quoi sert chaque instruction, inutile d'aller plus loin.
    "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