je coince un peu avec la checkbox (je vois que je pourrais faire un bouton), j'essaie d'utiliser les superclass (si je ne me trompe) et les affichages via 'dispay block et none" j'ai également tenté avec collapse... Mes <li> respecte le display none mais celui-ci ne change pas quand je check la box :'(
Merci pour l'aide, je dois avoir zappé un truc...
<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><span class="enjeu_B titles">
<input type="checkbox" id="open" type="checkbox">
<label for="open" class="enjeu_B">Enjeu biodiversité</label>
</span>
<span id="bio" class="test"> <!-- J'ai mis un span pour voir, je pense que DIV est mieux mais pas nécessaire-->
<ul>
<li>Objectif 1</li>
<li>Objectif 2</li>
</ul>
</span>
</li>
<li><span class= "enjeu_I titles">Enjeu inondation</span>
<ul>
<li>Objectif 1</li>
<li>Objectif 2</li>
</ul>
</li>
<li><span class="enjeu_E titles">Enjeu économique</span>
<ul>
<li>Objectif 2</li>
<li>Objectif 1</li>
</ul>
</li>
<li><span class="enjeu_s titles">Enjeu Socio-culturel</span>
<ul>
<li>Objectif 1</li>
<li>Objectif 2</li>
</ul>
</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: auto;
margin: 1em auto auto auto; /*compense le paddind de la <span> suivante et fixe au centre de la page*/
}
.test{
Display: none;
}
input:checked ~ .test{
display: block;
color: red;
}
.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;
}
.enjeu_E{
background-color: yellow;
color: black;
}
.enjeu_S{
background-color: blue;
}
première chose, tu notes en commentaire qu'un div serait mieux pour encapsuler ta liste. C'est vrai, parce que span ne peut contenir que des contenus de type phrasé. Cependant, tu peux aussi carrément t'en passer et mettre ta classe "test" sur le ul.
Pour le CSS : il y a quelques années, la réponse à ton problème était « CSS ne peut pas remonter le courant, donc ne peut pas cibler son oncle (le frère de son élément-père) ». Ce n'est plus vrai Maintenant nous avons :has. Tu peux résoudre ton problème en disant « je veux cibler tout élément de classe "test" (.test) qui est frère (~) d'un élément qui contient (:has) un input coché (input:checked) ». Tu peux aussi sortir ton input et son label de leur span, et il te faudra alors styler le li, mais au vu de ton design, ça peut être complexe.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Merci pour cette réponse, en effet le <span> du <label> n'était pas nécessaire, peut-être un reliquat de mes manoeuvres afin de centrer correctement le tout sans qu'un décalage n'apparaisse.
Par contre je ne suis pas sûr de comprendre la phrase entre guillemets... Pour moi les <li> sont des enfants de la class .test et donc cocher la checkbox devrait pouvoir modifier l'affichage de ses enfants?
Pour le moment, si je comprends bien, je lui demande que "si le input est check il faut appliquer appliquer à tous les éléments frères de la class test le display: block? du coup je me dis que le "~" n'est pas forcément nécessaire mais ça ne change rien.
Merci d'avance pour l'éclaircissement.
UPDATE
J'ai modifié en supprimant les <span> qui étaient en effet mal choisies, j'ai l'impression que le problème venait de là... Maintenant ce qui va être amusant c'est de faire en sorte que lorsque l'on check une box, une nouvelle <div> s'ouvre en-dessous sans être collée tout en évitant l'extension des autres.
Pas d'aide concernant le code par MP, le forum est là pour ça :)