[Résolu] liste à puces imbriquées - problème css par Akira28 - page 1

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

PaulTanné

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;
}

Mewen_bzh

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

Je ne réponds pas aux messages privés.

Lamecarlate

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

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Akira28

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,.... " ?

Mewen_bzh

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

Je ne réponds pas aux messages privés.

PaulTanné

14 juin 2018 à 9:49:10

MadameStaff -> Ah bah je prend note, je ferais plus comme ca maintenant. Merci

Akira28

14 juin 2018 à 11:38:09

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

Lamecarlate

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é)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

liste à puces imbriquées

problème css

Supprimer

Modérer

Signaler le message aux modérateurs