Discussion: Menu flex avec IE

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

    Par défaut

    Citation Envoyé par laurentSc Voir le message
    Pas franchement d'accord car certes je suis reparti de ton code mais j'ai fait l'effort de le comprendre et de le modifier...
    C'est vrai...
    Je t'accorde le fait qu'il fallait comprendre le code pour pouvoir copier-coller la BONNE partie !

    Montre-nous ton code corrigé
    "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. #82
    Membre émérite

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

    Par défaut

    La proposition de JefReb au post #79 est intéressante, mais pas sûr que ça marche avec la correction que j'ai dû apporter :
    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
     #navMain > ul > li ul {/* tous les ul 2e ou 3e niveau */
        position : absolute;
        width:100%;  
      }
     
     #navMain > ul > li > ul > li {
                position : relative; 
                width:100%;
    	 }
     
      /*SPECIAL : SOUS-SOUS-MENU à droite*/
    #navMain > ul > li > ul > li > ul {
        left:100%;/*SOUS-SOUS-MENU à droite*/
        top:0; 
    	}
    Les lignes 6 à 9 pour que le top:0; de la ligne 14 se réfère au li du menu de niveau 2 et non au ul.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     #navMain > ul > li > ul > li {
                position : relative; 
                width:100%;
    	 }
    • à quoi sert cette partie ?
    • en a-t-on vraiment besoin ?
    • que se passe-t-il si on l'enlève ?
    • peut-on s'en passer ?
    • ...


    Laurent, je constate que tu ne comprends toujours pas pourquoi on positionne un élément.
    Pourtant, tout a été dit.

    Tant que tu ne comprendras pas, tu ne dois pas continuer les exercices : tu ne feras que t'enfoncer dans le flou.

    Sur cette page, il y a des explications, et même des codepen : CSS : position

    • -> LIS TOUT !
    • -> TESTE TOUS les exemples !


    (extrait)
    Positionnement relatif

    Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document.

    Positionnement absolu

    En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments.
    • COMPRENDS-TU ce que ça veut dire ? OUI ou NON ?
    "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. #84
    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

    Bonjour Jreaux62,
    J'ai été intrigué par ton affirmation:
    Mais si on en ajoute un suivant, là ça n'ira plus, car tu ne cibles plus précisément un niveau de menu,
    et il faudra des contre-instructions pour les niveaux suivants, ce que je ne veux pas.
    J'ai donc voulu tester le code que j'avais soumis et mettant jusqu'à 5 sous-niveaux.
    Mais je suis d'accord avec toi,
    *Pour moi, c'est LARGEMENT suffisant !
    En ajouter encore un serait anti-ergonomique
    et j'ajouterais, insupportable.

    Mais
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #navMain > ul ul {
        position : absolute;
        width:100%;
        top:100%
        left:0;  
      }
     /*SPECIAL : SOUS-SOUS-MENU à droite*/
    #navMain > ul  ul  ul {
        left:100%;      /*SOUS-SOUS-MENU à droite*/
        top:0;  
      }
    fonctionne parfaitement.
    J'ai rajouté au sous-menu 1.3 ...
    https://codepen.io/JefReb/pen/yPpJNM

    Le problème de la compréhension passe par l'exercice et les essais pour comprendre et surtout comprendre le principe de la cascade.
    Et pourtant quelques essais avec des fichiers html temporaires pour tester la cascade avec les enfantts directs ou non direct ou héritage et descendants, est très facile à comprendre.
    Mais j'en suis passé aussi par là ... il n'y a même pas très longtemps

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

    Par défaut

    Citation Envoyé par JefReb Voir le message
    Le problème de la compréhension passe par l'exercice et les essais pour comprendre et surtout comprendre le principe de la cascade.
    C'est tout-à-fait ça !
    C'est en forgeant qu'on devient forgeron !
    Et en se mouchant qu'on devient moucheron...


    Quant à la question...
    Chaque niveau est différent des autres !
    Néanmoins, certaines instructions sont COMMUNES, d'autres des cas particuliers.

    • Le menu de niveau 1 : on l'affiche tantôt à l'horizontal, tantôt à la vertical
    • Le sous-menu de niveau 2 : on l'affiche en dessous
    • Le sous-menu de niveau 3 : on l'affiche tantôt à droite, tantôt à gauche

    Mais si on ajoute ENCORE un niveau.... ben là je ne sais plus où l'afficher !
    en dessous ? encore à coté ? par dessus le niveau précédent ?...
    C'est trop !

    CELA DIT, le problème se pose surtout avec :hover : ça devient cite une galère sans nom d'arriver à "attraper le menu" !

    "Au clic" (cf mon autre code "au clic", avec jQuery), plus de souci !
    On met autant de sous-sous-sous-....-menu qu'on veut :

    "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. #86
    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

    Exact!
    Rien à ajouter. Merci.

  7. #87
    Membre émérite

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

    Par défaut

    Coucou, me revoilou

    D'abord, merci jreaux62 de m'avoir incité à réviser le positionnement (j'avais déjà vu tout ça, mais ça a renforcé mes connaissances). (D'ailleurs, en faisant des essais, je suis tombé sur une incompréhension qui va générer une nouvelle discussion)(pour ne pas rester idiot toute ma vie selon Einstein).
    Merci aussi de m'avoir fait prendre conscience que je risquais de me transformer en moucheron (post #85) (j'ai la crève donc suis fortement concerné).

    Pour revenir aux choses sérieuses, je répond au post #83 :
    • cette partie sert à positionner les <li> des sous-menus de niveau 2 donc que le top:0; des <ul> de niveau 3 se réfère au <li> de niveau 2 correspondant
    • oui
    • si on ne la met pas, le le top:0; des <ul> de niveau 3 se réfère au <ul> de niveau 1 (1e ancêtre positionné) et aussi le top: 14px; des flèches des sous-menus de niveau 2 indiquant un sous-sous-menus de niveau 3 : https://codepen.io/laurentsc/pen/gXoGmd/
    • non
    • ...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Bonjour Laurent.
    J'ai pas compris ce que tu demandes.... Fais des phrases complètes...

    Concernant ta "V6 buggué".
    Il manque quelque chose pour que ça fonctionne.

    SI tu as COMPRIS le positionnement, tu dois pouvoir le trouver toi-même.
    Sinon........ Relis la documentation, fais les exercices,....


    N.B. ton code ressemble de plus en plus à une poubelle : NETTOIE-LE !

    • OPTIMISE ! Mets JUSTE ce qui est NECESSAIRE
    • supprime ce qui est inutile
    • et quand je te donne des corrections, utilise mon 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

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

    Par défaut

    Pour mémoire :

    Citation Envoyé par jreaux62 Voir le message
    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

    Phone : on OUBLIE ! C'est le comportement normal. Donc RIEN A ECRIRE ICI !

    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

  10. #90
    Membre émérite

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

    Par défaut

    Bonjour Jérôme,

    la V6 débuggée, je l'avais déjà faite, mais ce que j'avais fait était à l'intérieur du media-querie pour le desktop, donc j'ai amélioré la correction car il fallait l'appliquer dans tous les cas : https://codepen.io/laurentsc/pen/gXoGmd/

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0; /* marge extérieure */
      padding: 0; /* marge intérieure */
      border: 0; /*bordure*/
      box-sizing: border-box;
    }
     
     
    /* ------------------------------------------------------ */
    /* MENU - style général */
    /* ------------------------------------------------------ */
    #navMain ul, #navMain li {
      list-style: none; /* pas de style de liste (puces,...) */
    }
     
    /* ------------------------------- */
    /* fleche, avec rotation */
    #navMain li.hasSub:after  {
      position: absolute;
      content: "\25BC";
      display: block;
      font-size: 0.7em;
      color: #fff;
      top: 14px;
      right: 10px;
     
      -o-transform: rotate(0deg);
      -o-transition: -o-transform 0.5s;
      -ms-transform: rotate(0deg);
      -ms-transition: -ms-transform 0.5s;
      -moz-transform: rotate(0deg);
      -moz-transition: -moz-transform 0.5s;
      -webkit-transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.5s;
      transform: rotate(0deg);
      transition: transform 0.5s;
    }
     
    #navMain li.hasSub:hover:after {
      -o-transform: rotate(180deg);
      -o-transition: -o-transform 0.5s;
      -ms-transform: rotate(180deg);
      -ms-transition: -ms-transform 0.5s;
      -moz-transform: rotate(180deg);
      -moz-transition: -moz-transform 0.5s;
      -webkit-transform: rotate(180deg);
      -webkit-transition: -webkit-transform 0.5s;
      transform: rotate(180deg);
      transition: transform 0.5s;
      color: yellow;
    }
    /* pour tous les liens */
    #navMain a {
      display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
      padding:10px;
      font-family:Arial, sans-serif;
      color: #fff;
      background: #2980b9;
      text-decoration: none; /* ne pas souligner les liens */
    }
    #navMain ul li > ul {
      display:none;/* menu niveau 2 caché */
    }
    #navMain ul li:hover > ul {
      display:block;/* si on survole un élément de niveau 1 du menu, on affiche le menu de niveau 2 */
    }
    #navMain a:hover {
      background: #20638f; /*change la couleur de fond*/
    }
     
     #navMain li {
       position : relative;          
       width:100%;
    }/* positionner tous les li */
     
     
    /* ------------------------------------------------------ */
    /* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
    /* on utilise les media queries pour modifier les styles  */
    /* ------------------------------------------------------ */
    /* MENU HORIZONTAL, centré - largeur 50% (mini : 640px) */
    @media screen and (min-width: 641px) 
    {
      #navMain> ul {/* slt niveau 1 */
        display:table; /* se comporte comme une table */
        width:50%; /* largeur du menu */
        min-width:640px; /* largeur mini du menu */
        margin:0 auto; /* menu centré dans son parent */
      }
      #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 */
      }
      #navMain > ul > li ul {/* tous les ul 2e ou 3e niveau */
        width:100%;  
      }
     
     
     
      /*SPECIAL : SOUS-SOUS-MENU à droite*/
    #navMain > ul > li > ul > li > ul {
        position : absolute;
        left:100%;/*SOUS-SOUS-MENU à droite*/
        top:0; 
    	}
    #navMain > ul > li:last-child > ul > li > ul { 
        position : absolute; width:100%;
        left:-100%; /*dernier SOUS-SOUS-MENU à gauche*/
        top:0;
    	}
    }
    }
    /* ------------------------------------------------------ */
    La correction apportée se situe aux lignes 72 à 75

    Au post #88, tu dis ne pas comprendre ce que je demande : normal car je ne demande rien !
    Elles sont où les phrases incomplètes ?
    Je ne vois pas en quoi mon code est une poubelle...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    OK.

    Met de l'ordre dans ton code :
    • ul
    • puis li
    • puis a

    • d'abord cas général (OK)
    • puis cas particulier(s) (1 niveau parès l'autre)



    ex. :
    • #navMain li { vient avant #navMain a {.
    • #navMain> ul { : met un espace : #navMain > ul {.



    C'est pour être plus CLAIR, mais aussi et surtout pour respecter l'ordre de la CASCADE (héritage,...).
    "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. #92
    Membre émérite

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

    Par défaut

    quand j'ai entendu ta réponse en allant manger, je me suis demandé qu'est-ce que j'avais encore fait de mal ; ça me change !
    OK pour respecter l'ordre pour la cascade et je vais passer au 7.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  13. #93
    Membre émérite

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

    Par défaut

    Voici la V7 : https://codepen.io/laurentsc/details/qVpMOe/

    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
     
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0; /* marge extérieure */
      padding: 0; /* marge intérieure */
      border: 0; /*bordure*/
      box-sizing: border-box;
    }
     
     
    /* ------------------------------------------------------ */
    /* MENU - style général */
    /* ------------------------------------------------------ */
    #navMain ul, #navMain li {
      list-style: none; /* pas de style de liste (puces,...) */
    }
     #navMain li {
       position : relative;          width:100%;
    }/* positionner tous les li */
     
    /* ------------------------------- */
    /* fleche, avec rotation */
    #navMain li.hasSub:after  {
      position: absolute;
      content: "\25BC";
      display: block;
      font-size: 0.7em;
      color: #fff;
      top: 14px;
      right: 10px;
     
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
     
    #navMain li.hasSub:hover:after {
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
      color: yellow;
    }
     
    #navMain ul li > ul {
      display:none;/* menu niveau 2 caché */
    }
    #navMain ul li:hover > ul {
      display:block;/* si on survole un élément de niveau 1 du menu, on affiche le menu de niveau 2 */
    }
     
    #navMain a {
      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 50% (mini : 640px) */
    @media screen and (min-width: 641px) 
    {
      #navMain > ul {/* slt niveau 1 */
        display:table; /* se comporte comme une table */
        width:50%; /* largeur du menu */
        min-width:640px; /* largeur mini du menu */
        margin:0 auto; /* menu centré dans son parent */
      }
      #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 */
      }
      #navMain > ul > li ul {/* tous les ul 2e ou 3e niveau */
        width:100%;  
      }
     
     
     
      /*SPECIAL : SOUS-SOUS-MENU à droite*/
    #navMain > ul > li > ul > li > ul {
        position : absolute;
        left:100%;/*SOUS-SOUS-MENU à droite*/
        top:0; 
    	}
     #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%; /*dernier SOUS-SOUS-MENU à gauche*/
        top:0;
    	}
     
      #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:hover: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:after {
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
    }  
    }
    /* ------------------------------------------------------ */

    J'ai identifié les lignes à récupérer ! Néanmoins pour que ça soit utile, il faut que je comprenne ; or, il y a 2 lignes, bien que visiblement nécessaires, que je ne comprend pas : les lignes 109 et 119.
    Signification selon moi de #navMain ul ul li : les éléments (li) de liste dont un ancêtre est une liste qui a elle-même pour ancêtre l'élément d'identifiant navMain, soit les li de niveau 2 ou plus. D'abord, est-ce bien ça et de plus pouquoi la ligne 109 ne peut-elle remplacer les lignes 107 à 109 et la ligne 119 les lignes 117 à 119 ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Je répète : les copier-coller ne t'apprendront rien.
    D'autant que mon code est plus complet - et complexe - que les exercices demandés.


    ECRIS toi-même chaque ligne de code...
    Et contente-toi de faire ce qui est demandé dans chaque exercice.
    Ni plus, ni moins.

    Et si tu ne comprends pas une ligne.... ne l'écris pas !
    "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. #95
    Membre émérite

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

    Par défaut

    Voici la V7.2 : https://codepen.io/laurentsc/pen/BmJEQZ/

    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
    /* ce qu'on applique à tous les éléments html */
    * {
      margin: 0; /* marge extérieure */
      padding: 0; /* marge intérieure */
      border: 0; /*bordure*/
      box-sizing: border-box;
    }
     
     
    /* ------------------------------------------------------ */
    /* MENU - style général */
    /* ------------------------------------------------------ */
    #navMain ul, #navMain li {
      list-style: none; /* pas de style de liste (puces,...) */
    }
     #navMain li {
       position : relative;          width:100%;
    }/* positionner tous les li */
     
    /* ------------------------------- */
    /* fleche, avec rotation */
    #navMain li.hasSub:after  {
      position: absolute;
      content: "\25BC";
      display: block;
      font-size: 0.7em;
      color: #fff;
      top: 14px;
      right: 10px;
     
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
     
    #navMain li.hasSub:hover:after {
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
      color: yellow;
    }
    /* pour tous les liens */
     
    #navMain ul li > ul {
      display:none;/* menu niveau 2 caché */
    }
    #navMain ul li:hover > ul {
      display:block;/* si on survole un élément de niveau 1 du menu, on affiche le menu de niveau 2 */
    }
     
    #navMain a {
      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 50% (mini : 640px) */
    @media screen and (min-width: 641px) 
    {
      #navMain > ul {/* slt niveau 1 */
        display:table; /* se comporte comme une table */
        width:50%; /* largeur du menu */
        min-width:640px; /* largeur mini du menu */
        margin:0 auto; /* menu centré dans son parent */
      }
      #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 */
      }
      #navMain > ul > li ul {/* tous les ul 2e ou 3e niveau */
        width:100%;  
      }
     
    /* gestion de la flèche */
      #navMain ul ul > li.hasSub:after,#navMain ul > li:last-child > ul > li.hasSub:hover:after,#navMain > ul > li:nth-last-child(2) > ul > li.hasSub:hover:after {
      -o-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      }
       #navMain ul ul > li.hasSub:hover:after,#navMain > ul > li:last-child > ul > li.hasSub:after,#navMain > ul > li:nth-last-child(2) > ul > li.hasSub:after {
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      } 
      /*SPECIAL : SOUS-SOUS-MENU à droite*/
    #navMain > ul > li > ul > li > ul {
        position : absolute;
        left:100%;/*SOUS-SOUS-MENU à droite*/
        top:0; 
    	}
    #navMain > ul > li:last-child > ul > li > ul { 
        position : absolute; width:100%;
        left:-100%; /*dernier SOUS-SOUS-MENU à gauche*/
        top:0;
    	}
    }
    }
    /* ------------------------------------------------------ */
    Le code de gestion de la flèche (lignes 93 à 106) est plus simple que le tien (la preuve, je le comprend encore heureux pour un code que j'ai écrit !)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

    Par défaut

    Ah enfin !

    Tu écris ENFIN ton propre code !
    C'est très bien.

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* gestion de la flèche */
    #navMain ul ul > li.hasSub:after,
    #navMain ul > li:last-child > ul > li.hasSub:hover:after,
    #navMain > ul > li:nth-last-child(2) > ul > li.hasSub:hover:after {
      -o-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    1- Du coup, tu vas pouvoir M'EXPLIQUER, clairement et précisément, à quoi servent ces lignes (= quels éléments elles CIBLENT) :
    • 1a- #navMain ul ul > li.hasSub:after.
    • 1b- #navMain ul > li:last-child > ul > li.hasSub:hover:after.
    • 1c- #navMain > ul > li:nth-last-child(2) > ul > li.hasSub:hover:after.

    ex. :
    • :after = (la flèche)
    • li.hasSub:after = (la flèche) du (li avec sous-menu)
    • li.hasSub:hover:after = (la flèche) du (li avec sous-menu) (au survol du li)


    N.B. Ce qui m'intéresse le plus, c'est de savoir à quoi servent (= quels éléments elles CIBLENT) :
    • #navMain ul > li:last-child
    • #navMain > ul > li:nth-last-child(2)
    • et pourquoi a-t-on :hover sur les 2 dernières instructions (1b, 1c) et pas sur la première (1a) ?


    2- Pour les flèches, suite à ta simplification du code :
    • as-tu remarqué un changement ?
    • Si oui, lequel ?
    • comment rétablir ce qui manque ?


    3- Question subsidiaire :
    • si je veux que la flèche du sous-menu du menu "D" soit positionnée à DROITE de "D.2", que dois-je ajouter ?


    4- Question plus simple (?)
    Actuellement, tous les menus / sous-menus ont la même couleurs de fond (bleu).
    Que dois-t-on ajouter pour que :
    • les sous-menus de niveau 2 aient un fond gris #333
    • les sous-menus de niveau 3 (et suivants) aient un fond gris #444

    ?

    @JefReb : si tu veux participer...
    "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. #97
    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 de m'invité. J'ai peu de temps aujourd'hui, mais voici ce que je trouve.
    :last-child et nth-last-child(2) n'apportent rien.
    Il suffit de mettre:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #navMain ul ul > li.hasSub::after,
    #navMain ul > ul > li.hasSub:hover::after  {
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    }
    #navMain ul ul > li.hasSub:hover::after, 
    #navMain ul > ul > li.hasSub::after   {
    	-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
    }
    Pour la position à droite de D2 je ne vois pas trop du moins rapidement sauf:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #navMain > ul > li:last-child li.hasSub::after {
    	right:80%;	/* A droite de D2 */
    }
    Il y a un problème de fuite du sous-niveau 3 A.2.1 et A.2.2
    Il faut:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* Position sous-menu niveau 2*/
    nav > ul ul {
    	position: absolute; 			 
    	top: 100%; 						
    	left: 0; 							
    }
    /* Position sous-menu niveau 3*/
    nav > ul ul ul {			
    	top: 0;						
    	left: 100%; 					
    }

    Pour les couleur des sous-menu 2 et 3:
    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
     
    /* simple */
    #navMain li li a {
    	background:#333;
    }
    #navMain li li li a {
    	background:#444;
    }
    /* ou compliqué */
    #navMain li > ul > li a {
    	background:#333;
    }
    voili voilou ...
    #navMain li > ul ul > li a {
    	background:#444;
    }

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

    Par défaut

    Merci JefReb pour ta participation
    On va attendre la réponse de laurentSc...

    Néanmoins :

    1- :last-child : tu n'as pas vu ce que ça change ? avec / sans ? regarde mieux...
    :nth-last-child(2) : j'y reviendrai plus tard
    2- right:80%; : on peut mieux faire !
    3- on va TOUJOURS prendre la solution LA PLUS SIMPLE.
    "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. #99
    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

    Effectivement, j'ai zappé faute de temps le petit triangle à l'horizontal et le cumule de 90° + 90° et le retournement à 180°
    Toutefois, si l'on veut que le code soit correcte pour un menu de 4 li avec 2 sous-menus chacun, il faut cibler aussi l'avant dernier. Sinon il part sur la droite.
    Donc il faut remplacer:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    #navMain > ul > li:last-child > ul > li > ul {
    	position : absolute;
    	width: 100%;
    	left: -100%; /*dernier SOUS-SOUS-MENU à gauche*/
    	top: 0;
    }
    Par:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #navMain > ul > li:last-child > ul > li > ul,
    #navMain > ul > li:nth-last-child(2) > ul > li > ul {
    	position : absolute;
    	width: 100%;
    	left: -100%; /*dernier SOUS-SOUS-MENU à gauche*/
    	top: 0;
    }
    pour:
    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
    <nav id="navMain">
      <ul>
        <li class="active hasSub"><!-- active : menu EN COURS --> 
          <a href="#">A - One</a>
          <ul>
            <li><a href="#">A.1</a></li>
            <li class="hasSub"><a href="#">A.2</a>
              <ul>
                <li><a href="#">A.2.1</a></li>
                <li><a href="#">A.2.2</a></li>
              </ul>
            </li>
            <li><a href="#">A.3</a></li>
          </ul>
        </li>
        <li class="hasSub" > <a href="#">B - Two</a>
          <ul>
            <li><a href="#">B.1</a></li>
            <li><a href="#">B.2</a></li>
          </ul>
        </li>
        <li class="hasSub"> <a href="#">C - Three</a>
          <ul>
            <li class="hasSub"><a href="#">C.1</a>
              <ul>
                <li ><a href="#">C.1.1</a></li>
                <li><a href="#">C.1.2</a></li>
              </ul>
            </li>
            <li class="hasSub"><a href="#">C.2</a>
              <ul>
                <li ><a href="#">C.2.1</a></li>
                <li><a href="#">C.2.2</a></li>
              </ul>
            </li>
            <li class="hasSub"><a href="#">D.3</a>
              <ul>
                <li ><a href="#">C.3.1</a></li>
                <li><a href="#">C.3.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="hasSub"> <a href="#">D - Four</a>
          <ul>
            <li class="hasSub"><a href="#">D.1</a>
              <ul>
                <li ><a href="#">D.1.1</a></li>
                <li><a href="#">D.1.2</a></li>
              </ul>
            </li>
            <li class="hasSub"><a href="#">D.2</a>
              <ul>
                <li ><a href="#">D.2.1</a></li>
                <li><a href="#">D.2.2</a></li>
              </ul>
            </li>
            <li class="hasSub"><a href="#">D.3</a>
              <ul>
                <li ><a href="#">D.3.1</a></li>
                <li><a href="#">D.3.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    Mais il est vrai qu'intellectuellement, c'est quand même un défi intéressant et pas toujours bien compris ...
    mais je reste persuadé qu'on doit pouvoir simplifier encore pas mal.

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

    Par défaut

    Hello JefReb,

    si le défi t’intéresse, je t'invite à réaliser CHAQUE EXERCICE, et à créer UN codepen PAR exercice.

    Le défi ?
    • 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.

    -> Envoie-moi les liens de tes codepen en MP (car laurentSc a la fâcheuse tendance à copier-coller ! )

    * Plusieurs solutions sont possibles, mais on reste dans l'optique "mobile first".
    **(Note à LaurentSc)
    Inutile de copier-coller mon propre code : il n'est pas optimisé !
    "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