1. #1
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 293
    Points : 168
    Points
    168

    Par défaut Utilisation de clear:both en fin de menu horizontal

    Bonjour,
    J'ai récupéré un exemple de menu horizontal qui contient:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .menuH li
    { 
    	float : left; 
    	/* pour IE qui ne reconnaît pas "transparent" */
    	border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
    }
    Cette écriture provoque l'écriture de l'élément suivant le menu sur la même ligne que ce dernier.
    J'ai essayé de jongler avec des :: after et des clear:both mais je n'arrive pas à mon but.
    La seule modification que j'ai apportée à ce style a été de remplacer un id par une classe.

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur multimédia
    Inscrit en
    juillet 2004
    Messages
    686
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur multimédia
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2004
    Messages : 686
    Points : 1 149
    Points
    1 149

    Par défaut

    Salut peut être en cherchant dans le css ou dans le js ou dans le html si ce fameux id est utilisé et le remplacer par cette class sachant qu'au niveau js si tu change id (un seul élément) par une class (plusieurs éléments), les répercutions peux avoir lieu...

  3. #3
    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

    La seule modification que j'ai apportée à ce style a été de remplacer un id par une classe.
    ben ça c'est pas rien! Quelle est la différence entre l'utilisation d'un ID (#) et d'une classe (.)??

    La moindre des choses aurait été de nous donner un MINIMUM de css et de html pour comprendre.

    c'est pas méchant de ma part, mais écrire
    J'ai récupéré un exemple de menu horizontal qui contient:
    Copier c'est bien, mais comprendre ce que l'on copie, c'est mieux.
    Si j'écris cela c'est que tu parles de ... ::after !! ça vient faire quoi dans le problème.
    Qu'est-ce qu'un pseudo élément vient faire dans cette galère? Tu as cherché à comprendre l'utilisation de ::after ou ::before et du clear:both?

    Mais j'écris tout ça pour que tu nous exposes un peu mieux avec des données.
    Amicalement bien sûr!
    De plus, regardes dans les forums, il y a beaucoup d'exemples.
    Pourquoi utiliser une classe, alors que l'on peut s'en passer.
    Pourquoi utiliser float, qui ou était très bien (autrefois) alors que l'on peut utiliser flex.
    Regardes le travail qui ce fait en ce moment sur https://www.developpez.net/forums/d1.../menu-flex-ie/
    Exemple de code qui nous aurait aidé:
    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
     
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    html, body {
    	font-family: Arial, sans-serif;
    	fonts-size: 100%;
    	font-size: 100%;
    }
    /*=========== définition commune =======================================*/
    #navMain ul, #navMain li {
    	list-style-type: none;
    }
    #navMain a {
    	width: 100%;
    	display: block;
    	padding: 10px 15px;
    	background-color: #2980b9;
    	color: #fff;
    	text-decoration: none;
    }
    #navMain a:hover {
    	background: #20638f;
    	text-decoration: underline;
    }
    #navMain > ul ul {
    	display: none;
    }
    #navMain li:hover > ul {
    	display: block;
    }
    #navMain li li a {
    	background: #333;
    }
    /*======================================================*/
    /*=============== Pour desktop et >640px ===============*/
    /*======================================================*/
    @media screen and (min-width: 641px) {
    /*==== Utilisation de flex pour rendre horizontal ======*/
    #navMain > ul {
    	display: -webkit-flex;
    	display: flex;
    	-webkit-justify-content: center;
    	justify-content: center;		/* centrons le texte */
    }
    #navMain > ul > li {
    	-webkit-flex: 1 1 auto;
    	flex: 1 1 auto;
    }
    #navMain > ul {
    	width: 50%;
    	min-width: 640px;
    	margin: 0 auto;
    }
    /*================= Définition du niveau 2 ==============*/
    #navMain li {
    	position: relative;
    	min-width: 180px;
    }
    #navMain > ul ul {
    	width: 100%;
    	position: absolute;
    	top: 100%;
    	left: 0;
    }
    }
    /*======================================================*/
    /*=============== Pour phone et < 640px  ===============*/
    /*======================================================*/
    @media screen and (max-width: 640px) {
    }

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

  4. #4
    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

    Je rajoute car headmax n'a pas tord dans sa réponse.
    Tout dépend de ce que l'on veut faire avec un menu horizontal.
    Si il n'y a pas d'effets spéciaux, pas besoin de javascript, avec uniquement css3 on peut faire de beaux effets, et surtout très simple.
    Par contre sur des phones, il faudra peut être utiliser du JQuery pour avoir du menu vertical au clic.
    Mais sans spécifications précises, rien à dire de plus.

  5. #5
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 293
    Points : 168
    Points
    168

    Par défaut Je joins mes codes css et html

    HTML:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <ul class="menuH"><li><a href="editAccomp.php?stage=1">1 - Accompagnement</a></li><li><a href="editAccomp.php?stage=2">2 - Etat-civil, adresses</a></li><!-- suite 3 à 5 --></ul>
    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
    .menuH, .menuH ul {
    	padding : 0;
    	margin : 0;
    	list-style : none;		/* on supprime le style par défaut de la liste */
    	line-height : 21px;		/* on définit une hauteur pour chaque élément */
    	text-align : center;	/* on centre le texte qui se trouve dans la liste */
    }
     
    .menuH {
    	font-weight : bold; /* on met le texte en gras */
    	font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    	font-size : 12px; /* hauteur du texte : 12 pixels */
    }
     
    .menuH a {
    	display : block;
    	padding : 0;
    	background : #000;
    	color : #fff;
    	text-decoration : none;
    	width : 144px;
    }
     
    .menuH li
    { 
    	float : left; 
    	/* pour IE qui ne reconnaît pas "transparent" */
    	border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
    }
     
    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body .menuH li
    {
    	border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
    }

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

    Par défaut

    Bonjour,

    Je t'invite à faire les exercices proposés ici.

    Ce sera mieux que ton vieux code...



    N.B. puisque tu as UN SEUL menu comme ça, c'est un id qu'il faut utiliser.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 293
    Points : 168
    Points
    168

    Par défaut

    Merci. Dans un premier temps, j'ai fait un bricolage qui me permet d'avancer sur mon projet. Mais je garde tes exercices pour quand j'aurais avancé.

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

    Par défaut

    Ca ne sert à rien de faire du "bricolage".
    tu penses gagner du temps, alors que c'est au contraire une perte de temps.


    Lis au moins ce message.
    Et le code donné par JefReb fait le job.
    "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. #9
    DMC
    DMC est déconnecté
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2002
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : avril 2002
    Messages : 5
    Points : 7
    Points
    7

    Par défaut

    Bonjour,
    Essaye cela :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .menuH:after{
      content:"";
      display:block;
      clear:both;
    }
    mais à mon avis un display:inline-block à la place de float:left du LI devrait suffire pour faire la même chose

  10. #10
    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

    Désolé, mais avec ce bout de code de rien du tout pour pas dire autre chose de méchant, que veux-tu que l'on puisse tester ton problème de float et de menu horizontal???
    Déjà, en rajoutant un niveau 2 on commence à voir un peu.
    Et donc DMC avec son :after qui devrait être ::after puisque pseudo element n'a rien pu voir et résoudre.

    Pour le peu de code que tu as donné, il suffit de cibler uniquement le premier niveau, les enfants directs de UL
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .menuH > li {
    	float : left;
    }

    et voici le code d'après ton mini-code ...
    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
    .menuH, .menuH ul {
    	padding : 0;
    	margin : 0;
    	list-style : none;		/* on supprime le style par défaut de la liste */
    	line-height : 21px;		/* on définit une hauteur pour chaque élément */
    	text-align : center;	/* on centre le texte qui se trouve dans la liste */
    }
    .menuH {
    	font-weight : bold; /* on met le texte en gras */
    	font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    	font-size : 12px; /* hauteur du texte : 12 pixels */
    }
    .menuH a {
    	display : block;
    	padding : 0;
    	background : #000;
    	color : #fff;
    	text-decoration : none;
    	width : 144px;
    }
    .menuH > li {
    	float : left;
    	/* pour IE qui ne reconnaît pas "transparent" */
    	border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
    }
    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body .menuH li {
    	border-right: 1px solid transparent; /* on met une bordure transparente à droite de chaque élément */
    }
    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
     
    <ul class="menuH">
      <li><a href="editAccomp.php?stage=1">1 - Accompagnement</a>
        <ul>
          <li> <a href="#">1</a> </li>
          <li> <a href="#">2</a> </li>
          <li> <a href="#">3</a> </li>
          <li> <a href="#">4</a> </li>
        </ul>
      </li>
      <li><a href="editAccomp.php?stage=2">2 - Etat-civil, adresses</a>
        <ul>
          <li> <a href="#">1</a> </li>
          <li> <a href="#">2</a> </li>
          <li> <a href="#">3</a> </li>
          <li> <a href="#">4</a> </li>
        </ul>
      </li>
      <!-- suite 3 à 5 -->
    </ul>
    Après, bien sûr il faut jouer avec la position absolute et les display des niveau 2 et plus...
    Mais essayes de cerner un peu plus le code que tu donnes. nous ne sommes pas voyant.

    PS: un fait la même chose que
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    border-right: 1px solid transparent ;
    et c'est compatible IE

  11. #11
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 293
    Points : 168
    Points
    168

    Par défaut

    Je me suis inspiré de ton premier exemple ce qui me donne un code court mais sans bricolage mais suffisant. Et pour ma fierté personnelle, il a fonctionné du premier coup sans une erreur. Je ferai les autres exercices plus tard: J'ai mis le lien dans mes favoris.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CSS 3] Enlever un symbole à la fin du menu horizontal
    Par med1985 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/03/2015, 05h50
  2. Un clear:both qui marche pas ?!
    Par bblampain dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 16/08/2007, 10h20
  3. Limiter la portée d'un style="clear:both"
    Par Bizen-Ya dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 05/04/2007, 17h13
  4. [IE] clear:both ignoré
    Par Bisûnûrs dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 21/03/2007, 09h53
  5. Probleme de clear:both
    Par intrud3r dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 11/12/2005, 11h42

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