[Résolu] Une série de petit DIV dans un DIV tous l'un en dessous de l'

Bonjour,

EDIT: finalement, j'ai effacé ma réponse car on partait dans la mauvaise direction.

Le problème est dans le html. Il faut remplacer les attributs "classe" par "class".

Amicalement,
Modifié par parsimonhi (30 May 2023 - 21:03)

@parsimonhi

+1 Ca m'était passé aussi sous le nez

Merci à tous ! c'est surtout uniuc qui résous le problème sans compter les classe et autre remarques ! SUPER !

J'ai retiré le résolu car ça ne va pas à la ligne
Je vous ai remis la version corrigé ça tient à un rien je le sent mais rien à faire !
Je ne peux même pas mettre un lien pour tester, une panne entre Marseille et Paris cette nuit !!!
désolé je cherche encore
A bientôt les Amis.
Jean-Pierre
Modifié par Fox-infograp (31 May 2023 - 15:54)

Je me suis dit que tu partais sur la base d'un jeux d'échec.

Et je me rend compte que je suis peut-être partis un peux loin

Le problème semble venir de ta class div min-height: 100vh;

Je me suis permis de trafiquer l'ensemble au vu de ce que j'ai compris par contre tu va rencontrer un problème sur les images src="echec/*32.gif" au fait elles correspondent à quoi ?
(Fait un test sans tes gif en modifiant par exemple le nom du dossier echec par echecs)
J'ai repensé l'agencement des case et leurs aient données une couleur avec opacité ce qui permet de placer une image en fond par exemple, et je les aient disposées dans l'ordre numérique d'un échiquier.
J'ai fait sauté le id="le0" je l'ai commencé par id="le1", si ça pose problème je t'ai grisé deux autre lignes pour y remédier.
J'ai intégré l'image l-echiquier, à l’intérieur de ton ensemble, autant que cela ne fasse qu'un groupe.

Dit moi si tu veux un quelconque changement.

html {  
  height: 100%; 
}

/*div {  
  min-height: 100vh; Ca casse tout, le problème viens de là
}*/
body {font-size: 20px; 
  font-family :Georgia, "Times New Roman", Times, serif; 
  color: #000000; 
  /* Ici je voulais voir si ça collais à l'ensemble avec l'image tu peux l'enlever*/
  /* j'ai rajouté ceci */
  display: flex; /* j'ai rajouté ceci */
  justify-content: center;/* j'ai rajouté ceci */
  align-items: center;/* j'ai rajouté ceci */
  width: 400px;/* j'ai rajouté ceci */
  height: 418px;/* j'ai rajouté ceci */
  /* fin de changement*/
}
img.ImgEchiq {
 /*position :fixed;*/
 position: absolute;/* j'ai rajouté ceci */
 /*top :20px; 
 left :10px; */
 width: 336px;
 height: 336px; /* j'ai rajouté ceci */
 z-index:48;  
}
.Lechiquier {
/* position :fixed;
  top :20px; 
  left :10px;*/ 
  width:336px; 
  height: 336px; /* j'ai rajouté ceci */
  z-index:50;  
  display: inline-flex; 
  flex-wrap: wrap; 
  border: solid 1px brown; /* j'ai rajouté ceci */
  justify-content: center;
  align-items: center;
}
  /*  .lechiquier>* {  flex: 1 1 160px;    }*/ /*Pourquoi ?*/

div.LAcase { 
  width: 42px;
  height: 42px; 
  z-index :50;  
}
/* j'ai rajouté ceci */
.cw{
  background-color: rgba(255, 255, 255, 0.5);
}
.cb{
  background-color: rgba(0, 0, 0, 0.4);
}

<div  class="Lechiquier">


  <!--<img alt="l-echiquier" class="ImgEchiq" src="echec/echiquier.jpg" /> --><!-- je me suis permis de l’intégrer à ton ensemble -->

<img alt="l-echiquier" class="ImgEchiq" src="https://cdn.pixabay.com/photo/2018/03/11/20/25/wooden-3217987_1280.jpg" />

<!--<div class="LAcase cb" ><img alt=" "  id="le0" src="echec/cn32.gif" /></div>-->
<div class="LAcase cb" ><img alt=" "  id="le1" src="echec/cn32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le2" src="echec/fn32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le3" src="echec/dn32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le4" src="echec/rn32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le5" src="echec/fn32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le6" src="echec/cn32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le7" src="echec/tn32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le8" src="echec/pn32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le9" src="echec/pn32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le10" src="echec/pn32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le11" src="echec/pn32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le12" src="echec/pn32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le13" src="echec/pn32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le14" src="echec/pn32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le15" src="echec/pn32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le16" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le17" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le18" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le19" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le20" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le21" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le22" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le23" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le24" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le25" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le26" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le27" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le28" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le29" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le30" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le31" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le32" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le33" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le34" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le35" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le36" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le37" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le38" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le39" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le40" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le41" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le42" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le43" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le44" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le45" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le46" src="echec/vd32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le47" src="echec/vd32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le48" src="echec/pb32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le49" src="echec/pb32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le50" src="echec/pb32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le51" src="echec/pb32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le52" src="echec/pb32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le53" src="echec/pb32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le54" src="echec/pb32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le55" src="echec/pb32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le56" src="echec/tb32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le57" src="echec/cb32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le58" src="echec/fb32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le59" src="echec/db32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le60" src="echec/rb32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le61" src="echec/fb32.gif" /></div>
<div class="LAcase cb" ><img alt=" "  id="le62" src="echec/cb32.gif" /></div>
<div class="LAcase cw" ><img alt=" "  id="le63" src="echec/tb32.gif" /></div>
<!--ligne à supprimer si tes ID commence par 0 -->
<div class="LAcase cb" ><img alt=" "  id="le64" src="echec/vd32.gif" /></div>

</div>

Modifié par uniuc (31 May 2023 - 19:46)

Bonjour,

S'il y a bien un cas où un display:grid est indiqué, c'est celui-ci.

Une petite page complète qui affiche un échiquier avec un display grid, totalement responsive, et qui se passe d'images (sérieusement, on est en 2023, tu ne vas quand même pas mettre des images gif pour représenter les pièces ?) :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="&Eacute;chiquier">
<title>&Eacute;chiquier</title> 
<style>
body
{
	display:flex;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
}
.echiquier
{
	margin: auto;
	display: grid;
	grid-template-columns: repeat(8,1fr);
	width: 88vmin;
	grid-gap: 0.5vmin;
	background: #000;
	border: 0.5vmin solid #000;
	font-size: 9vmin;
}
.echiquier>div
{
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
} 
.echiquier>div.cn
{
	background: #090;
}
.echiquier>div.cb
{
	background: #fff;
}
</style> 
</head>
<body>
<div class='echiquier'>
<div class="cb">&#9820;</div><div class="cn">&#9822;</div>
<div class="cb">&#9821;</div><div class="cn">&#9819;</div>
<div class="cb">&#9818;</div><div class="cn">&#9821;</div>
<div class="cb">&#9822;</div><div class="cn">&#9820;</div>

<div class="cn">&#9823;</div><div class="cb">&#9823;</div>
<div class="cn">&#9823;</div><div class="cb">&#9823;</div>
<div class="cn">&#9823;</div><div class="cb">&#9823;</div>
<div class="cn">&#9823;</div><div class="cb">&#9823;</div>

<div class="cb"></div><div class="cn"></div>
<div class="cb"></div><div class="cn"></div>
<div class="cb"></div><div class="cn"></div>
<div class="cb"></div><div class="cn"></div>

<div class="cn"></div><div class="cb"></div>
<div class="cn"></div><div class="cb"></div>
<div class="cn"></div><div class="cb"></div>
<div class="cn"></div><div class="cb"></div>

<div class="cb"></div><div class="cn"></div>
<div class="cb"></div><div class="cn"></div>
<div class="cb"></div><div class="cn"></div>
<div class="cb"></div><div class="cn"></div>

<div class="cn"></div><div class="cb"></div>
<div class="cn"></div><div class="cb"></div>
<div class="cn"></div><div class="cb"></div>
<div class="cn"></div><div class="cb"></div>

<div class="cb">&#9817;</div><div class="cn">&#9817;</div>
<div class="cb">&#9817;</div><div class="cn">&#9817;</div>
<div class="cb">&#9817;</div><div class="cn">&#9817;</div>
<div class="cb">&#9817;</div><div class="cn">&#9817;</div>

<div class="cn">&#9814;</div><div class="cb">&#9816;</div>
<div class="cn">&#9815;</div><div class="cb">&#9813;</div>
<div class="cn">&#9812;</div><div class="cb">&#9815;</div>
<div class="cn">&#9816;</div><div class="cb">&#9814;</div>
</div>
</body> 
</html>

Amicalement,
Modifié par parsimonhi (31 May 2023 - 20:44)

Bonjour,

En ce qui concerne la "grid", il n'y a que 2 lignes importantes (le reste, c'est juste pour décorer) :

.echiquier {
	display: grid;
	grid-template-columns: repeat(8,1fr);
}

Amicalement,

Oui c'est ce que je viens de voir en jouant un peut avec le code.
Va vraiment falloir que je me penche sur Grid un de ces jours, et surtout prendre le reflex de le penser quand j'aborde un sujet.
J'ai un petit coté flemmard, je le reconnais, j'ai tendance à toujours penser Flex dans mes placements.

Au passage les class cn et cb, c'est moi qui les aient rajoutées elle n’étais pas la de base,plus ça va plus le projet Fox se transforme.

Cordialement

@Fox-infograp

Mais c'est clair Grid fait bien le job.
Je me suis amusé à modifier une petite chose.
J'ai changé le fond, avec une belle image genre marbre, bois, ou autres ça passerais bien je pense.

.echiquier
{
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8,1fr);
  width: 88vmin;
  grid-gap: 0.5vmin;
  /*background: #000;*/
  background-image: url(https://cdn.pixabay.com/photo/2017/06/01/02/19/marble-2362262_1280.jpg);
  opacity: 0.9;
  border: 0.5vmin solid #000;
  font-size: 9vmin;
}
.echiquier>div.cn
{
  background: rgba(255, 255, 255, 0.5);
}
.echiquier>div.cb
{
  background: rgba(0, 0, 0, 0.5);
}

L'échiquier va être fonctionnel et géré par un code ?

[EDIT] Mais lol ça ne s’arrête plus, c'est trop fun va falloir symétriser les versions
Modifié par uniuc (31 May 2023 - 22:46)

Je ne sais comment vous remercier tous, j'avais écris un peut sommairement ce programme il y a prés de 20 ans pour le site de mon frère (décédé d'un cancer) oui le "Moteur" que j'ai développé permettait de récupérer les parties du fameux logiciel Allemand ChessBase.
Voila pourquoi cette affichage est si curieux,
J'en ai gardé l'ancienne version et le fils de mon frère voulant reprendre ce site à l'époque très coté je le réécrit de façon bien plus perforante.
une version; tourne encore sur mon site en attendant la nouvelle version ou il ne me reste plus qu'a résoudre notre problème de ce sujet, vous serait au générique de cette version !
https://fox-infographie.com/echec/wblog_echec_006.php
j'ai expliqué en tant que rédacteur chez "Développez" (rôle que j'ai abandonné, trop vieux et trop fatigué ...)
Vous trouverez tout les codes ici (si vous avez accès
https://christele.developpez.com/
Encore merci, je vous tiendrais au courent !

Bonjour,

Olivier C a écrit :

Alors je suis désolé mais je n'ai pas pu m'empêcher (le CodePen)

Hahaha ! C'est vrai que c'était trop tentant.

J'aime bien ton idée pour colorier les cases qui permet de se passer complètement de classe (je n'aime vraiment pas les codes html qui sont envahis par des classes en tout genre qui ne servent à quasi-rien la plupart du temps, et ça me chagrinait d'avoir eu à utiliser des class="cb" et class="cn"). Voici ci-dessous une petite amélioration qui réduit encore la taille du code nécessaire. Au passage, il me semble que le grid-template-rows est inutile, et pour l'aspect-ratio, la valeur 1 n'est pas conforme (c'est ce que dit le validateur du w3c). Il semble qu'il faille utiliser 1/1.

Je me demande si on peut réduire à un seul sélecteur le coloriage des cases blanches ! Quelqu'un saura-t-il faire ça ?

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="https://forum.alsacreations.com/topic-4-90489-1.html">
<title>https://forum.alsacreations.com/topic-4-90489-1.html</title> 
<style>
body {
	display:flex;
	margin: 0;
	padding: 0;
	height: 100vh;
}
body>div {
	margin: auto;
	display: grid;
	grid-template-columns: repeat(8,1fr);
	width: 88vmin;
	font-size: 9vmin;
}
div>div {
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #1117;
}
div>div:nth-child(16n+1),
div>div:nth-child(16n+10),
div>div:nth-child(16n+3),
div>div:nth-child(16n+12),
div>div:nth-child(16n+5),
div>div:nth-child(16n+14),
div>div:nth-child(16n+7),
div>div:nth-child(16n+16) {background: #eee7;}
</style>
</head>
<body>
<div>
<div>&#9820;</div><div>&#9822;</div><div>&#9821;</div><div>&#9819;</div>
<div>&#9818;</div><div>&#9821;</div><div>&#9822;</div><div>&#9820;</div>
<div>&#9823;</div><div>&#9823;</div><div>&#9823;</div><div>&#9823;</div>
<div>&#9823;</div><div>&#9823;</div><div>&#9823;</div><div>&#9823;</div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div>&#9817;</div><div>&#9817;</div><div>&#9817;</div><div>&#9817;</div>
<div>&#9817;</div><div>&#9817;</div><div>&#9817;</div><div>&#9817;</div>
<div>&#9814;</div><div>&#9816;</div><div>&#9815;</div><div>&#9813;</div>
<div>&#9812;</div><div>&#9815;</div><div>&#9816;</div><div>&#9814;</div>
</div>
</body>
</html>

Je n'ai pas repris l'idée de mettre une image de fond comme proposé par uniuc (l'image est un peu longue à charger), mais je la trouve bien elle-aussi.

Amicalement,
Modifié par parsimonhi (01 Jun 2023 - 05:52)

@parsimonhi : bravo pour ta solution sur le coloriage des cases blanches. Je me demande moi aussi si l'on peu encore faire mieux que ça.

@Fox-infograp : c'est vrai que c'est intéressant cette histoire de jeux d'échecs et l'histoire familiale est émouvante. En tout les cas 'est très tentant de se lancer dans un projet de ce genre pour s'entrainer.

Bonjour,

7 sélecteurs (au lieu de 8 précédemment) :

div>div:nth-child(9n+1),
div>div:nth-child(9n+17),
div>div:nth-child(9n+33),
div>div:nth-child(9n+49),
div>div:nth-child(-9n+16),
div>div:nth-child(-9n+32),
div>div:nth-child(-9n+48) {background: #eee7;}

Amicalement,

Salut,

en 8 intervalles (plus simple niveau logique je trouve):

div>div:nth-child(odd):nth-child(n):nth-child(-n+7),
div>div:nth-child(even):nth-child(n+9):nth-child(-n+16),
div>div:nth-child(odd):nth-child(n+17):nth-child(-n+24),
div>div:nth-child(even):nth-child(n+25):nth-child(-n+32),
div>div:nth-child(odd):nth-child(n+33):nth-child(-n+40),
div>div:nth-child(even):nth-child(n+41):nth-child(-n+48),
div>div:nth-child(odd):nth-child(n+49):nth-child(-n+56),
div>div:nth-child(even):nth-child(n+57):nth-child(-n+64){background: #eee7;}

Et on peut essayer de regrouper avec :is mais l’intérêt m'a l'air limité :

div>div:nth-child(odd):is(:nth-child(n):nth-child(-n+7), :nth-child(n+17):nth-child(-n+24), :nth-child(n+33):nth-child(-n+40), :nth-child(n+49):nth-child(-n+56)),
div>div:nth-child(even):is(:nth-child(n+9):nth-child(-n+16), :nth-child(n+25):nth-child(-n+32),:nth-child(n+41):nth-child(-n+48), :nth-child(n+57):nth-child(-n+64)){background: #eee7;}

ou

div>:is(div:nth-child(odd):is(:nth-child(n):nth-child(-n+7), :nth-child(n+17):nth-child(-n+24), :nth-child(n+33):nth-child(-n+40), :nth-child(n+49):nth-child(-n+56)) , div:nth-child(even):is(:nth-child(n+9):nth-child(-n+16), :nth-child(n+25):nth-child(-n+32),:nth-child(n+41):nth-child(-n+48), :nth-child(n+57):nth-child(-n+64))){background: #eee7;}

Edit : Pour complément d'info :nth-child(n) et :nth-child(-n+64) ne servent à rien, c'est juste pour avoir à chaque fois les 2 bornes de l'intervalle à chaque fois
Modifié par Mathieuu (01 Jun 2023 - 15:11)