Discussion :

[Artemus24]

Salut à tous.

J'ai une page contenant plein de boutons qui sont tous dans un formulaire.
Comme il y en a un peu trop, j'ai décidé d'ajouter une balise select afin d'afficher ceux du thème (firmware) et non tous les boutons.
Le thème est définie par la balise "<div>".
Pour l'instant, celle balise "<div>" n'englobe pas toutes les subdivisions du thèmes.

J'aimerai une solution sans JavaScript, si cela est possible.

Par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<select>
<option value="1">Fimware 4</option>
<option value="2">Fimware 3</option>
<option value="3">Fimware 2</option>
<option value="4">Fimware 1</option>
</select>
 
 
<form action="/Ex_27/PHP/methode.php" method="post">
	<div>backup3g</div>
	<button type="submit" name="val" value="02011">forceDataLink = on</button>
	<button type="submit" name="val" value="02012">forceDataLink = off</button>
	<button type="submit" name="val" value="02013">forceDataLink = auto</button>
	<button type="submit" name="val" value="02021">forceVoipLink = on</button>
	<button type="submit" name="val" value="02022">forceVoipLink = off</button>
	<button type="submit" name="val" value="02030">getPinCode</button>
	<button type="submit" name="val" value="02040">setPinCode = 1234</button>
	<div>ddns</div>
	<button type="submit" name="val" value="03010">disable</button>
	<button type="submit" name="val" value="03020">enable</button>
	<button type="submit" name="val" value="03030">forceUpdate</button>
	<button type="submit" name="val" value="03040">getInfo</button>
	<button type="submit" name="val" value="03050">setService</button>
</form>

Le document html est en cours de finalisation. Ce que je vous donne correspond à l'affichage d'un extrait de tous mes boutons.
S'il y a des points à améliorer, je suis preneur.

En ce qui concerne la feuille de style :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/*-----------------------*/
/*     Sept colonnes     */
/*-----------------------*/
 
form {
		column-count		: 7;
		column-gap		: 0px;
		column-rule		: 1px solid black;
		text-align			: center;
		height			: 100%;
}
 
/*--------------------*/
/*     Séparateur     */
/*--------------------*/
 
div {
		display			: inline-block;
		margin			: 10px 0px 0px 0px;
		padding			: 5px 0px;
		width			: 170px;
 
		background-color	: pink;
		border			: 1px solid pink;
		border-radius		: 25px;
}
 
/*-----------------*/
/*     Boutons     */
/*-----------------*/
 
button {
		display			: inline-block;
		margin			: 10px 0px 0px 0px;
		padding			: 5px 0px;
		width			: 170px;
 
		background-color	: dodgerblue;
		border			: 1px solid dodgerblue;
		border-radius		: 25px;
 
		cursor			: pointer
}
 
#a {
		background-color	: red;
}

Ce document HTML est pour mon propre usage et n'a pas vocation a être mis sur la toile.

Ce que j'aimerai obtenir, devrait correspondre à l'affichage des thèmes suivants :
--> firmware 1 : --> thème 1
--> firmware 2 : --> thème 1+2
--> firmware 3 : --> thème 1+2+3
--> firmware 4 : --> thème 1+2+3+4

Merci.
@+

[Invité]

Bonjour,

Avec un select, non.

Par contre, avec des checkbox, on peut utiliser :checked.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<input type="radio" name="check-fimware" id="check-1" /><label for="check-1">Fimware 1</label>
<input type="radio" name="check-fimware" id="check-2" /><label for="check-2">Fimware 2</label>
<input type="radio" name="check-fimware" id="check-3" /><label for="check-3">Fimware 3</label>
<input type="radio" name="check-fimware" id="check-4" /><label for="check-4">Fimware 4</label>
 
<form action="" method="post">
  <div class="theme">Fimware 1
    .....
  </div>
  <div class="theme">Fimware 2
    .....
  </div>
  <div class="theme">Fimware 3
    .....
  </div>
  <div class="theme">Fimware 4
    .....
  </div>
 
</form>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* ----------------- */
.theme { display:none; }
#check-1:checked ~ form .theme:nth-child(1) {
  display:block; 
}
#check-2:checked ~ form .theme:nth-child(1),
#check-2:checked ~ form .theme:nth-child(2) {
  display:block; 
}
#check-3:checked ~ form .theme:nth-child(1),
#check-3:checked ~ form .theme:nth-child(2),
#check-3:checked ~ form .theme:nth-child(3) {
  display:block; 
}
#check-4:checked ~ form .theme:nth-child(1),
#check-4:checked ~ form .theme:nth-child(2),
#check-4:checked ~ form .theme:nth-child(3),
#check-4:checked ~ form .theme:nth-child(4) {
  display:block; 
}

[psychadelic]

pas certain d'avoir vraiment compris la question,
le premier select affiche une série "A" de boutons,
le second select affiche les séries A et B
le 3e A + B + C
et le quatrième tous ??

ça ne semble pas très logique ??

--> firmware 1 : --> thème 1
--> firmware 2 : --> thème 1+2
--> firmware 3 : --> thème 1+2+3
--> firmware 4 : --> thème 1+2+3+4

Je verrai plutôt un système par onglets, il en existe beaucoup en css pur

et tant qu'a faire utiliser bootstrap, ça permet de créer des interfaces cohérents et rapide à mettre en œuvre...
https://codepen.io/wizly/pen/BlKxo

[NoSmoking]

Bonjour,

et tant qu'a faire utiliser bootstrap, ...

la demande initiale est quand même

J'aimerai une solution sans JavaScript, si cela est possible.

En contre partie l'utilisation d'une approche par onglet est tout à fait opportune, j'ai même l'impression que c'est ce qu'à réalisé jreaux62, sorry pas regardé plus avant le code proposé

[Invité]

Hello,

Pour faire des onglets, il suffit d'ajouter à mon code précédent :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* ------- */
/* onglets */
input[name=check-fimware] {
  position:absolute;
  visibility:hidden;
  left:-9999px;
}
input[name=check-fimware] + label {
  display:inline-block;
  padding:5px 10px;
  border:1px solid #ccc;
  border-radius:10px 10px 0 0;
  cursor:pointer;
}
input[name=check-fimware]:checked + label {
  border:1px solid #000;
  border-bottom:transparent;
}
/* ------- */

[Artemus24]

Salut à tous.

Merci pour vos réponses.

Avec un select, non.

J'ai testé votre exemple et il fonctionne parfaitement. C'est ce que j'attendais comme solution.
Dommage que l'on ne puisse pas le faire avec un "select".

ça ne semble pas très logique ??

Pourtant ça l'est. Chaque nouveau firmeware (micro logiciel) englobe les précédents en ajoutant des nouvelles fonctionnalités.

@+