Discussion :

[bahh66]

Bonjour,

ce post fait suite à de nombreux autres messages avec comme objectif de réaliser un jeu pour mes élèves.

La partie conception du jeu semble enfin terminé (en tout cas je l'espère), mais j'ai un soucis d'affichage, je n'arrive pas à obtenir l'emplacement des éléments comme je le souhaite.

https://codepen.io/cyril-gomez/pen/rNrmjOG?editors=1000

J'aimerais avoir ceci :


- en haut à gauche, les boutons gérant les fonctions populate(), effacer() et verifier() - en haut à droite, d'abord les boutons gérant nbrApresDiz et nbrAvantDiz puis boxdiz (avec au-dessus de cet affichage img1), puis boxuni (avec au-dessus de cet affichage img2), les boutons gérant nbrApresUni et nbrAvantUni et enfin le bouton gérant validNombre()- en dessous de tout ça, l'affichage des images contenues dans la tableJ'espère que c'est assez clair.
Mer par avance pour l'aide apportée.

[bahh66]

Après réflexion, je pense que je préfèrerai avoir la table d'images en haut et les boutons/affichage en bas.

Mes élèves ayant 6 ans, il vaut mieux que les boutons soient en bas du tableau.

[NoSmoking]

Bonjour,

... je n'arrive pas à obtenir l'emplacement des éléments comme je le souhaite.

tu n'as pas poussé le regroupement assez loin et je pense que c'est faute de connaissance suffisante du CSS, lacune qu'il va te falloir combler si tu veux pouvoir continuer « sereinement ».

Je te propose cette structure, le noms des classes n'est pas forcément bien représentatif :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="bandeau-cde">
 
  <div class="bandeau-cde-left">
    <button onclick="populate()">Jouer</button>
    <button onclick="effacer()">Effacer</button>
    <button onclick="verifier()">Vérifier</button>
  </div>
 
  <div class="bandeau-cde-right">
    <div class="bandeau-cde-right-groupe">
      <img src="https://culturehumaniste66.ac-montpellier.fr/ART_TICE/img/dizaine.jpg" alt="">
 
      <div class="groupe-area">
        <div class="groupe-bouton-dizaine">
          <button onclick="nbrApresDiz()">▲</button>
          <button onclick="nbrAvantDiz()">▼</button>
        </div>
        <output id="affichagediz">0</output>
      </div>
    </div>
 
    <div class="bandeau-cde-right-groupe">
      <img src="https://culturehumaniste66.ac-montpellier.fr/ART_TICE/img/unite.jpg" alt="">
 
      <div class="groupe-area">
        <output id="affichageuni">0</output>
        <div class="groupe-bouton-unite">
          <button onclick="nbrApresUni()">▲</button>
          <button onclick="nbrAvantUni()">▼</button>
        </div>
      </div>
    </div>
 
    <div class="bandeau-cde-right-groupe">
      <button class="btn-valid" onclick="validNombre()">✔</button>
    </div>
  </div>
</div>

tu pourras remarquer que tu n'en était pas loin

Maintenant il faut bien évidemment appliquer du CSS pour obtenir ce que tu souhaites et là encore il faut un minimum de connaissance en CSS pour savoir réorganiser les éléments.

Voilà ce que te propose pour application et analyse :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
.bandeau-cde {
  display: flex;
  justify-content: space-between;
  padding: 0.25em;
  border: 1px solid #888;
}
.bandeau-cde-left {
}
.bandeau-cde-right {
  display: flex;
  align-items: flex-end;
  text-align: center;
}
/*------------------------------*/
.groupe-area {
  display: flex;
  font-size: 4em;
  font-weight: 700;
}
.bandeau-cde-right img {
  width: 100px;
  height: 45px;
  margin-left: auto;
}
.bandeau-cde-right button {
  display: block;
  height: 1.25em;
  margin: 2px;
  padding: 0;
  border: 1px solid #888;
  font-size: 0.5em;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  aspect-ratio: 1 /1;
}
.bandeau-cde-right output {
  display: block;
  width: 1.25em;
  margin: 2px;
  border-radius: 0.125em;
  text-align: center;
  font-weight: 700;
}
/*------------------------------*/
#affichageuni {
  color: #00bfff;
  background-color: #00f;
}
#affichagediz {
  color: #8b0000;
  background-color: #f00;
}
.groupe-bouton-dizaine button {
  background-color: #f00;
}
.groupe-bouton-unite button {
  background-color: #00f;
}
.bandeau-cde-right .btn-valid {
  font-size: 4em;
  color: #080;
}

... c'est une des façons de faire les solutions n'étant pour ainsi dire jamais uniques !

[bahh66]

Alors autant côté html, j'en étais pas loin en effet, autant côté css va falloir que je bosse parce que j'étais à des lieux de ce que tu m'as proposé (même si comme tu le dis on doit pouvoir le faire autrement).

Dernière question (mais peut-être dois-je la poser ailleurs).

Est-il possible de centrer le tableau/table dans lequel sont contenus les images?
J'ai du réduire la taille des images afin qu'il n'y ait pas de barre défilement (complexe pour les élèves) mais du coup mon tableau est tout à gauche et j'aimerais qu'il soit au centre (je trouve ça plus joli).

Merci pour tout.

[NoSmoking]

Est-il possible de centrer le tableau/table dans lequel sont contenus les images?

un simple :

Code :

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

1
2
3
table {
  margin: auto;
}

devrait suffire !

[bahh66]

J'avais essayé avec .table et #table sans succès.