Partage
  • Partager sur Facebook
  • Partager sur Twitter

liste à puces imbriquées

problème css

Sujet résolu
    13 juin 2018 à 8:00:08

    Bonjour à tous

    J'ai un souci de CSS avec une liste imbriquée dont voici le code:

    <! DOCTYPE html>
    <html>
    	<head>
    	<meta charset='utf-8' />
    	<link rel="stylesheet" href="style.css">
    	</head>
    	<ul class="listeActivite">
    		<li class="categorie"><span>Cyclisme</span>
    			<ul class="listeActivite2">
    				<li>Vélos</li>
    				<li>casques</li>
    				<li>outillages</li>
    			</ul>
    		</li>
    		<li class="categorie"><span>Randonnée</span>
    			<ul class="listeActivite2">
    				<li>Chaussures</li>
    				<li>Vestes</li>
    				<li>matériel</li>
    			</ul>
    		</li>
    	</ul>
    </html>

    le css:

    .listeActivite .categorie
    {
    	list-style-type: none;
    }
    
    .categorie span
    {
    	font-size: 1.3em;
    	font-weight: bold;
    }
    .listeActivite2 li
    {
    	list-style-type: disc;
    	color: blue;
    }

    Le résultat fait exactement ce que je veux c à d 'Randonnée' et 'Cyclisme' en gras et noirs sans puces et les autre listes en bleu avec puces et un font-size normal. Mon problème est que je n'ai réussi à résoudre mon problème qu'en mettant mes premier <li> dans des <span> et que si je les retire, et bien mes autres listes sont en caractères gras , ce dont je ne veux pas. Y  a t il selon vous une autre solution pour éviter les <span> ? Le but étant après de générer automatiquement mes listes dans une boucle PHP pour un projet.

    merci pour votre aide


    • Partager sur Facebook
    • Partager sur Twitter
      13 juin 2018 à 8:19:02

      Yo, 

      Tu enferme ta deuxieme liste dans les elements de ta premiere, donc le style s'applique a toute la liste, ferme le <li> de la premiere liste avant le <ul> et c'est good :) 

      <html>
          <head>
          <meta charset='utf-8' />
          <link rel="stylesheet" href="style.css">
          </head>
          <ul class="listeActivite">
              <li class="categorie">Cyclisme</li>
                  <ul class="listeActivite2">
                      <li>Vélos</li>
                      <li>casques</li>
                      <li>outillages</li>
                  </ul>
              
              <li class="categorie">Randonnée</li>
                  <ul class="listeActivite2">
                      <li>Chaussures</li>
                      <li>Vestes</li>
                      <li>matériel</li>
                  </ul>
              
          </ul>
      </html>
      
      .listeActivite .categorie
      {
          list-style-type: none;
          font-weight:bold
      }
       
      .categorie span
      {
          font-size: 1.3em;
          font-weight: bold;
      }
      .listeActivite2 li
      {
          list-style-type: disc;
          color: blue;
      }



      • Partager sur Facebook
      • Partager sur Twitter
        13 juin 2018 à 9:06:28

        Bonjour,

        Avant tou ne tient pas compte de la réponse précédente car, en plus de ne pas répondre à ta question, elle ne respecte pas les normes du W3C.

        Ce que tu demandes est faisable mais compliqué en passant uniquement par des sélecteurs car il faudra passer par des contre-règles.

        La meilleure solution est d'ajouter des classes dans ton code. C'est la solution la plus propre, la plus légère et la plus flexible.

        Tu peux parfaitement faire quelque chose comme ceci :

        <nav>
        	<ul class="group">
        	    <li class="group__item">Premier groupe
        	        <ul class="subgroup">
        	            <li class="subgroup__item">1er élément</li>
        	            <li class="subgroup__item">2e élément</li>
        	            <li class="subgroup__item">3e élément</li>
        	        </ul>
        	    </li>
        	    <li class="group__item">Deuxième groupe
        	        <ul class="subgroup">
        	            <li class="subgroup__item">1er élément</li>
        	            <li class="subgroup__item">2e élément</li>
        	        </ul>
        	    </li>
        	    <li class="group__item">Troisième groupe
        	        <ul class="subgroup">
        	            <li class="subgroup__item">1er élément</li>
        	            <li class="subgroup__item">2e élément</li>
        	        </ul>
        	    </li>
        	</ul>
        </nav>

         Et dans ton CSS :

        group {
        
        	// Ton code CSS...
        }
         
        .group__item {
        
        	// Ton code CSS...
        }
         
        .subgroup {
        
        	// Ton code CSS...
        }
         
        .subgroup__item {
        
        	// Ton code CSS...
        }

        Au passage, tu peux en profiter pour corriger ton code HTML :

        - ton doctype n'est pas bon,

        - la déclaration de ton charset n'est pas correcte,

        - il te manque une balise <body>.


        • Partager sur Facebook
        • Partager sur Twitter
        Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
          Staff 13 juin 2018 à 9:08:12

          PaulTanné > euh bin non. La syntaxe de l'OP est correcte, la tienne est fausse : on ne met pas de ul dans un ul directement.

          Akira28 > pour ça, pas d'autre solution que de surcharger : rajoute font-weight: normal sur .listeActivite2 li, pour annuler le bold du parent.

          Edit après l'intervention de Mewen_bzh : la surcharge peut se faire avec ou sans classes, ça ne change pas grand chose techniquement :) (mais de jolies classes en mode BEM, c'est très bien !)

          -
          Edité par Lamecarlate 13 juin 2018 à 9:10:56

          • Partager sur Facebook
          • Partager sur Twitter
          Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
            14 juin 2018 à 8:50:50

            Bonjour

            Désolé pour cette réponse tardive mais hier j'étais trop occupé pour me connecter. Mais merci à ceux qui m'ont répondu.

            Le post de Mewen_bzh a fait tilt lorsqu’il à parlé de norme du w3c et là j'ai pensé au validateur du w3c ! j'ai testé mon code après l'avoir corrigé à juste titre (ben oui quand on veut aller trop vite :) ) et bonne nouvelle le validateur ne le jette pas: ouf ! par contre je confirme il refuse celui de Paul Tanné.

            J'ai testé les deux autres solutions qui fonctionnent très bien , pour celle de Lamecarlate , il m'a fallu ajouter en plus un 

             font-size: 0.8em


            dans

            .listeActivite2 li


            , sinon les listes secondaires restent de la même taille que les catégories.

            :euh:  Lamecarlate STP : que veulent dire les abréviations OP et BEM quand tu dis : "La syntaxe de l'OP est correcte.... " et  "...de jolies classes en mode BEM,.... " ?





            • Partager sur Facebook
            • Partager sur Twitter
              14 juin 2018 à 9:01:49

              OP : auteur du premier message ouvrant la discussion. En l’occurrence ici c'est toi. ;)

              BEM : c'est une méthodologie en front-end, tu trouveras plus de détails ici : http://getbem.com

              • Partager sur Facebook
              • Partager sur Twitter
              Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
                14 juin 2018 à 9:49:10

                MadameStaff -> Ah bah je prend note, je ferais plus comme ca maintenant. Merci :)
                • Partager sur Facebook
                • Partager sur Twitter
                  14 juin 2018 à 11:38:09

                  Ok merci pour  ces précisions. Comme quoi on on a jamais fini d'apprendre :)

                  • Partager sur Facebook
                  • Partager sur Twitter
                    Staff 18 juin 2018 à 9:57:44

                    Ah pardon, j'ai trop tendance à utiliser l'acronyme OP, alors que je devrais simplement copier le nom de l'auteur ou de l'autrice ^^' (et désolée de ma réponse tardive, je n'ai plus accès au net chez moi et j'ai eu un week-end prolongé)
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                    liste à puces imbriquées

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                    • Editeur
                    • Markdown