Non application du background-color sur une liste

Sujet résolu

6 novembre 2024 à 13:53:12

Bonjour,

Je ne comprends pas vraiment pourquoi mon background-color ne s'applique que si je lie chaque <li> d'un <ul> à une class définie, si je mets celle-ci sur le <ul>, mes <li> se retrouvent dans un fond blanc.

Je me demande dans quelle mesure le *{} dans mon CSS prend la priorité sur le reste.

Je vous remercie d'avance pour votre aide.

<head>
		<meta charset="utf-8">
		<title>Enjeux/Objectifs</title>
		<link rel="stylesheet" type="text/css" href="style_mindmap.css">
	</head>	
<body>
	<div class="main">
		<h1 class="root titles">Secteurs P.A.R.I.S.</h1>
	</div>
		<svg width="1314px" height="150px" xmlns="http://www.w3.org/2000/svg">
			<line x1="657" y1="0" x2="657" y2="100"fill="none" stroke="black" stroke-width="5"/>  <!--le bloc mesure 1314px (tient compte du padding du titre "F12 est ton amie")-->
			<polyline points="657,100 69,100 69,150" fill="none" stroke="black" stroke-width="5"/> <!--x1,y1 x2,y2 x3,y3 vers la gauche-->
			<line x1="455" y1="100" x2="455" y2="150" fill="none" stroke="black" stroke-width="5"/> <!--ligne milieu gauche-->
			<polyline points="657,100 1245,100 1245,150" fill="none" stroke="black" stroke-width="5"/> <!--x1,y1 x2,y2 x3,y3 vers la droite-->
			<line x1="840" y1="100" x2="840" y2="150"fill="none" stroke="black" stroke-width="5"/>
		</svg>
	<ul class="flex_hor">
		<li class="enjeu_B titles">
			<input type="checkbox" id="open" type="checkbox">
			<label for="open" class="enjeu_B">Enjeu biodiversité</label>
			<div class="test" id="obj_B">
				<ul>
					<li class="enjeu_B">Objectif 1</li>
					<li class="enjeu_B">Objectif 2</li>
				</ul>
			</div>
		</li>
		<li class="enjeu_I titles">
			<input type="checkbox" id="open" type="checkbox">
			<label for="open" class="enjeu_I">Enjeu inindation</label>
			<div class="test" id="obj_I">
				<ul class="enjeu_I">
					<li >Objectif 1</li>
					<li class="enjeu_I">Objectif 2</li>
				</ul>
			</div>
		</li>
		<li class="enjeu_S titles">
			<input type="checkbox" id="open" type="checkbox">
			<label for="open" class="enjeu_S">Enjeu Socio-culturel</label>
			<div class="test" id="obj_S">
				<ul>
					<li class="enjeu_S">Objectif 1</li>
					<li class="enjeu_S">Objectif 2</li>
				</ul>
			</div>
		</li>
		<li class="enjeu_E titles">
			<input type="checkbox" id="open" type="checkbox">
			<label for="open" class="enjeu_E">Enjeu économique</label>
			<div class="test" id="obj_E">
				<ul>
					<li class="enjeu_E">Objectif 1</li>
					<li class="enjeu_E">Objectif 2</li>
				</ul>
			</div>
		</li>
	</ul>
</body>

*{
	
	margin: 0 0 0 0; /*haut, droite,bas, gauche*/
	padding: 0 0 0 0;
	background-color: white;
	text-align:center;
	list-style: none;
}

.main{
	width: auto;
	height:auto;
	background-color: purple;
	margin: auto;
}

.titles{
	/* width: auto; */
	padding: 1em 1em 1em 1em;
	color: white;
}

.flex_hor{
	display: flex;
	justify-content: space-between;
	width: 1314px;
	height: 3em;
	margin: auto;
}

.test{
	display: none;
	margin-top: 20px;
}

input:checked ~ .test{
	display: block;
	/* background-color: green; */
	color: black;
}

/* .flex_ver{ */
	/* display: flex; */
	/* flex-direction: column; */
	width: auto;
/* } */

.enjeux_objectifs{
	width: 1314px;
	margin: auto;
}

/*===============================
LISTE DES COULEURS SPECIFIQUES
=================================*/

.root{
	width: 1250px; /*1314px avec le padding de 1em*/
	background-color: purple;
	margin: auto;
	/* width: auto; */
}

.enjeu_B{
	background-color: green;
}



.enjeu_I{
	background-color: red;
}

#obj_I{
	background: red;
}

.enjeu_E{
	background-color: yellow;
	color: black;
}

.enjeu_S{
	background-color: blue;
}

-
Edité par vangoeth 6 novembre 2024 à 13:54:18

AbcAbc6

6 novembre 2024 à 14:39:00

Bonjour,

Passez votre code au validateur pour voir et corriger vos erreurs :

Validateur HTML => https://validator.w3.org/
Validateur CSS => https://jigsaw.w3.org/css-validator/

Un identifiant est unique dans le document, vous ne pouvez avoir plusieurs id="open". => Si vous cliquer sur le label rouge, bleu, ou jaune, c'est la liste verte qui est déployée!!!

Vous avez un double attribut type sur vos input.

Question sémantique <div class="main"> pourrait être <header class="main">

Pour ceci c'est NON, mauvaise pratique!! :

    * {

      margin: 0 0 0 0;
      /*haut, droite,bas, gauche*/
      padding: 0 0 0 0;
      background-color: white;
      text-align: center;
      list-style: none;
    }

Car tous les éléments n'ont pas de marge, les mettre à zéro quand il n'y en à pas cela n'a pas de sens. Idem pour le style de liste, tous les élément ne sont pas des listes. Reset au cas par cas ou utilisez une feuille de style par défaut style normalize Lire :

Note que margin: 0 0 0 0; peut s'écrire margin: 0;

L45 de la CSS vous avez une propriété qui se promène toutes seule.

~~Pour le problème principal je n'ai pas bien compris de quoi il s'agissait.~~

Édit : Je viens de voir le problème en déployant la liste rouge. Oui c'est un problème de spécificité, comme vous définissez un baground blanc pour tout les éléments si vous souhaitez une autre couleur vous devez la définir quelque par.

Solution : supprimer les propriétés que vous avez actuellement dans le sélecteur universel.

Note que vous pouvez voir les spécificités dans l'inspecteur des éléments (F12) dans la partie centrale ou les styles sont affichés, laisser la souris sur le sélecteur une infobulle apparait avec la spécificité.

-
Edité par AbcAbc6 6 novembre 2024 à 15:00:01

vangoeth

6 novembre 2024 à 16:39:29

Bonjour,

Merci pour cette réponse, j'ai en effet corrigé les ID, et les petites erreurs qui trainaient entre-temps.
Après une dizaine d'années sans faire du HTML/CSS brute en connaissant les possibilités Java et PHP c'est du bricolage... Mais pas le choix.

Je travaille en effet avec le DevTool du navigateur (ça permet également de voir la réaction de l'affichage au changement de taille d'écran), mais je ne comprends pas pourquoi mes <lli> réagissent aux styles mais pas mes <ul> ou <div>. j'essaie par exemple d'appliquer un cadre plus grand à ma div contenant l'arborescence <ul><li> mais les enfants ne veulent pas hériter :'(

Selon un des sites que tu m'as partagé, et si j'ai bien compris, dans les listes il faut utiliser la "inherit". Je commence à me demander à quel point je n'aurais pas dû travailler en <DIV> plutôt que liste, mais si l'on suit la logique... C'est une liste vu qu'il y a une arborescence.

Merci en tout cas pour tes petites corrections précédentes, je ne suis pas tout les jours sur mon code du coup je loupe des détails.

AbcAbc6

6 novembre 2024 à 16:58:39

>> si j'ai bien compris, dans les listes il faut utiliser la "inherit".

oui cela indique que l'élément enfant prendra la valeur (pour cette propriétés) de son parent car la propriété background-color n'est pas héritée

=> https://developer.mozilla.org/fr/docs/Web/CSS/background-color#d%C3%A9finition_formelle

vangoeth

13 novembre 2024 à 14:49:59

Bonjour,

Je suis de retour sur mon code qui a subi des adaptations depuis. Merci pour les infos, j'ai fait un peu de nettoyage dans mon code et c'est déjà plus cohérent.