28111 sujets

CSS et mise en forme, CSS3

TD et display

Bonjour,

je cherche a faire apparaître des "TD" d'un tableau via des boutons radio.

Après beaucoup de recherche, je sèche Smiley decu . j'arrive juste à faire disparaître les cellules mais pas l'inverse.

Ci dessous mon code php 

...
<input type="radio" id="maintenance2" name="CT" />Maintenance (8-16)
<input type="radio" id="intervention" name="CT" />Intervention (10-18)
<input type="radio" id="astreinte" name="CT" />astreinte
...
echo '<td class="Calendaraffichecheck" bgcolor='.$Couleurfond.'><input type="checkbox"></td>'; // Astreinte
...


et le css correspondant :


TD.Calendaraffichecheck {
	display: none;
}
#astreinte:checked + .Calendaraffichecheck {
	display: block;
	border: 1px solid #000000;

}


Merci d'avance pour votre aide Smiley cligne

Xavier
Bonjour Xavier_91,

Je ne vois pas de solution 100% css avec ton code html
il faut passer par le Javascript
Modifié par aliasdmc (03 Sep 2018 - 19:31)
Administrateur
Bonjour,

Ton code HTML et CSS sont corrects et devraient en théorie parvenir au bon résultat.

Par contre, le modèle tabulaire HTML est très spécial : des éléments sont générés automatiquement autour de ton <td> (un <tr> au minimum est généré autour) : https://www.alsacreations.com/tuto/lire/1525-le-modele-tabulaire-en-css.html

Du coup, ton sélecteur d'adjacente "+" ne fonctionne pas, mais cela fonctionne avc le sélecteur d'adjacence général ainsi :


<table>
<tr>
  <input type="radio" id="maintenance2" name="CT" />
  <label for="maintenance2">Maintenance (8-16)</label>
<input type="radio" id="intervention" name="CT" />
  <label for="intervention">Intervention (10-18)</label>
<input type="radio" id="astreinte" name="CT" />
  <label for="astreinte">Astreinte</label>

<td class="Calendaraffichecheck">  
  <p>plopplop</p>
</td>
</tr>
</table>


.Calendaraffichecheck {
	display: none;
  border: 1px solid #000000;
  background: tan;
}
#astreinte:checked ~ * .Calendaraffichecheck {
	display: table-cell;
}
Bonjour Aliasdmc,

Je te remercie, mais je préférerais ne pas passer par Javascript.

Bonjour Raphael,

merci pour ta proposition de script.
Comme pour le mien, les cellules n'apparaissent pas mais quand je sélectionne le 'radio' rien ne se passe.

Je vais lire le tuto que tu as fait et je te fais un retour si je trouve (tout seul Smiley sweatdrop ) ou pas la solution.

Xavier
Modifié par Xavier_91 (04 Sep 2018 - 19:48)
Je crois comprendre pourquoi.
Je n'avais pas vu que tu as intégré les 'radio' dans la 'table'.

Sur mon projet, les 'radio' sont au dessus.
Je modifie mon script tout à l'heure pour vérifier.
Alors, j'ai intégré les 'radio' dans le tableau mais aucun changement.

J'ai relu ton script et j'ai vue que le 'menu' est intégré au '<tr>' avant le '<td>'.
Dans mon cas, le '<td>' est dans un autre '<tr>'.(voir la capture d'écran)

upload/1536156172-72290-sanstitre.png

Cela viendrait de là ?

merci pour ton aide
Administrateur
J'ai l'impression que ton architecture semble bien différente de ce que tu demandes au départ.

Effectivement, avec les sélecteurs CSS tu ne peux pas remonter la branche pour cibler un élément complètement ailleurs (pas avec les sélecteurs d'adjacence + et ~ en tout cas).

Je tente une autre approche, je reviens...
Administrateur
Pour remonter dans la branche en CSS, il faut utiliser la pseudo-classe :focus-within (non reconnue par IE pour le moment).

Voici un exemple fonctionnel :
<div class="plop">
  <input type="radio" id="maintenance2" name="CT" />
  <label for="maintenance2">Maintenance (8-16)</label>
  <input type="radio" id="intervention" name="CT" />
  <label for="intervention">Intervention (10-18)</label>
  <input type="radio" id="astreinte" name="CT" />
  <label for="astreinte">Astreinte</label>
</div>

<div class="kiwi">
  <p>je ne m'affiche que lorsqu'un champ dans .plop est coché</p>
</div>


.kiwi {
	display: none;
  border: 1px solid #000000;
  background: tan;
}
.plop:focus-within ~ .kiwi {
  display: block;
}


Je ne suis pas sûr que cela corresponde mieux à ton besoin.

Au final si cela ne fonctionne pas comme tu le souhaites (soit par compatibilité soit par complexité de la structure), il faudra bien passer par JavaScript.
Bonjour Xavier_91,

Perso, je pense que cela ne changera pas le pb, tu seras toujours obligé de passer par JS
Tu ne pourras pas le faire en 100% CSS
Mais peut être que je me trompe, en tout cas si tu a une solution 100% CSS
n'hésite pas à la partager
Bonsoir tout le monde,

Comme dit plus haut, je vais me passer du 'table' et passer par des 'div' 'ul' ...
Par contre, je suis très nul en css. Malgré l'aide de Raphael, il n'y a pas grand chose qui fonctionne Smiley decu

le code :


<div id="formulaire"><p>
<input type="radio" id="maintenance1" name="CT" checked />
<label for="maintenance1">Maintenance (7-15)</label>
<input type="radio" id="maintenance2" name="CT" />
<label for="maintenance2">Maintenance (8-16)</label>
<input type="radio" id="intervention" name="CT" />
<label for="intervention">Intervention (10-18)</label>
<input type="radio" id="astreinte" name="CT" />
<label for="astreinte">Astreinte</label>
<input type="radio" id="formation" name="CT" />
<label for="formation">Formation</label>
<input type="radio" id="conge" name="CT" />
<label for="conge">Congé</label>
<input type="radio" id="am" name="CT" />
<label for="am">Arrêt maladie</label>
<input type="radio" id="at" name="CT" />
<label for="at">Accident de travail</label>
<input type="radio" id="deleg" name="CT" />
<label for="deleg">Délégation</label>
</p></div>
<div class="afficheastreinte">&nbsp;</div>
<div class="afficheastreinte2">&nbsp;</div>


le css :


#astreinte:checked + label {font-weight: bold; color: red;}
#astreinte:checked ~ * .afficheastreinte {display: block;}
div#formulaire{
	height: 40px;
	display: flex;
	border-bottom: 1px solid #000000;
	margin: 0 auto;
	width: 100%;
	background-color: #2E2EFE;
	text-align: center;
	color: #FFFFFF;
}
p { margin: auto;}
.afficheastreinte{
	display: none;
	height:100px;
	margin: 0 auto;
	width: 95%;
	background-color: red;
}
.afficheastreinte2{
	height:100px;
	display: flex;
	margin: 0 auto;
	width: 95%;
	background-color: green;
}


Quand je sélectionne 'Astreinte' la police change bien mais le 1er 'div' n’apparaît pas ...

Merci pour votre aide
Sujet clos
Aller à