28182 sujets

CSS et mise en forme, CSS3

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

Pages :
Bonjour,
J'ai du perdre la mémoire, car j'ai juste une série de petit DIV dans un DIV
et ils s'affichent tous l'un en dessous de l'autre Smiley decu
Alors c'est ou l'erreur? je veux juste qu'ils wrapent dés qu'une ligne est pleine.

html {  height: 100%;}
body {  min-height: 100%;  margin: 0;  padding: 0;}
div {  min-height: 100vh;}
body {font-size: 20px; font-family :Georgia, "Times New Roman", Times, serif; color: #000000; background-color: #ffffff;}
/* __________ça c'est le top du patron d aldacreation ! __________________   **
/* ____img de l echiquier en -index=40__________  */
img.ImgEchiq {position :fixed; top :20px; left :10px; z-index:48;  }
/* ____LE DIV contenant les images des pieces TOUTES LES CASES ONT UNE img donc vide (transparent) ou une piéce de 42x42px en  z-index=50__________  */
/* ____donc ça va bien à la ligne normalement ? _____ */
div.Lechiquier { position :fixed; top :20px; left :10px;width:378px; z-index:50;  display: flex; flex-wrap: wrap;  }
    .lechiquier>* {  flex: 1 1 160px;    }
/* ___LES DIV de chaque case contenant les données des img des pieces TOUTES LES CASES ONT UNE img ou vide (gif ou png)  
     soit 40ou une piéce de 42x42px en  z-index=50__________  */
div.LAcase { width: 42px;height: 42px; z-index :50; }




<!DOCTYPE html><html lang="fr"><head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>Echiquier</title>
</head><body> 

<img alt="l-echiquier" class="ImgEchiq"     src="echec/echiquier.jpg" />


<div  class="Lechiquier">
<div class="LAcase" ><img alt=" "  id="le73" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le0" src="echec/tn32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le1" src="echec/cn32.gif" /></div><div class="LAcase" ><img alt=" "  id="le2" src="echec/fn32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le3" src="echec/dn32.gif" /></div><div class="LAcase" ><img alt=" "  id="le4" src="echec/rn32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le5" src="echec/fn32.gif" /></div><div class="LAcase" ><img alt=" "  id="le6" src="echec/cn32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le7" src="echec/tn32.gif" /></div><div class="LAcase" ><img alt=" "  id="le74" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le8" src="echec/pn32.gif" /></div><div class="LAcase" ><img alt=" "  id="le9" src="echec/pn32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le10" src="echec/pn32.gif" /></div><div class="LAcase" ><img alt=" "  id="le11" src="echec/pn32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le12" src="echec/pn32.gif" /></div><div class="LAcase" ><img alt=" "  id="le13" src="echec/pn32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le14" src="echec/pn32.gif" /></div><div class="LAcase" ><img alt=" "  id="le15" src="echec/pn32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le75" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le16" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le17" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le18" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le19" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le20" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le21" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le22" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le23" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le76" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le24" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le25" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le26" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le27" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le28" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le29" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le30" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le31" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le77" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le32" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le33" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le34" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le35" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le36" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le37" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le38" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le39" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le78" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le40" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le41" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le42" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le43" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le44" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le45" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le46" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le47" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le79" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le48" src="echec/pb32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le49" src="echec/pb32.gif" /></div><div class="LAcase" ><img alt=" "  id="le50" src="echec/pb32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le51" src="echec/pb32.gif" /></div><div class="LAcase" ><img alt=" "  id="le52" src="echec/pb32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le53" src="echec/pb32.gif" /></div><div class="LAcase" ><img alt=" "  id="le54" src="echec/pb32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le55" src="echec/pb32.gif" /></div><div class="LAcase" ><img alt=" "  id="le80" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le56" src="echec/tb32.gif" /></div><div class="LAcase" ><img alt=" "  id="le57" src="echec/cb32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le58" src="echec/fb32.gif" /></div><div class="LAcase" ><img alt=" "  id="le59" src="echec/db32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le60" src="echec/rb32.gif" /></div><div class="LAcase" ><img alt=" "  id="le61" src="echec/fb32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le62" src="echec/cb32.gif" /></div><div class="LAcase" ><img alt=" "  id="le63" src="echec/tb32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le64" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le65" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le66" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le67" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le68" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le69" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le70" src="echec/vd32.gif" /></div><div class="LAcase" ><img alt=" "  id="le71" src="echec/vd32.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le72" src="echec/vd32.gif" /></div>
</div>
</body></html>

Merci d'avance Smiley smile
Modifié par Fox-infograp (31 May 2023 - 15:21)
bonsoir,

Dans ce cas le flex devrait peut-être être dans div.LechecX 


div.LechecX { 
    width:430px;
    z-index:50;  
    display:inline-flex;
     flex-wrap: wrap; }

Modifié par uniuc (30 May 2023 - 20:53)
Modérateur
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)
J'ai retiré le résolu car ça ne va pas à la ligne Smiley decu
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)
Modérateur
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)
@parsimonhi

+1 du Grid pour une grille c'est ultra logique.
Mais pour ma part ne le maitrisant pas je ne l'utilise pas surtout pour conseiller les gens.
Mais je suis curieux pour le coup je vais regarder ton code de plus près
Modérateur
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 Smiley langue va falloir symétriser les versions Smiley lol
Modifié par uniuc (31 May 2023 - 22:46)
parsimonhi a écrit :
le reste, c'est juste pour décorer

Alors je suis désolé mais je n'ai pas pu m'empêcher (le CodePen) :
.chess {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  max-width: 90vh;
  aspect-ratio: 1;
  background-color: #000;
}
.chess div:nth-child(-2n+7),
.chess div:nth-child(9) ~ :nth-child(-2n+16),
.chess div:nth-child(15) ~ :nth-child(-2n+23),
.chess div:nth-child(24) ~ :nth-child(-2n+32),
.chess div:nth-child(32) ~ :nth-child(-2n+39),
.chess div:nth-child(41) ~ :nth-child(-2n+48),
.chess div:nth-child(48) ~ :nth-child(-2n+55),
.chess div:nth-child(57) ~ :nth-child(-2n+64) {
  background-color: #fff;
}

Modifié par Olivier C (31 May 2023 - 22:33)
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 ! Smiley ravi
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 !
Modérateur
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. Smiley cligne

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 ? Smiley lol 
<!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)
Modérateur
Bonjour,

Fox-infograp a écrit :
... j'avais écris un peut sommairement ce programme il y a prés de 20 ans ... une version tourne encore sur mon site ...

Très intéressant.

Amicalement,
@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.
Modérateur
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,
Modérateur
Bonjour,

on peut aussi dessiner le fond de l’échiquier depuis le conteneur principal avec un gradient conique :
.chess{
  display:grid;
  grid-template-columns: repeat(8,1fr);
  grid-template-rows: repeat(8,1fr);
  aspect-ratio:1;/* on veut un carré */
  max-height:100vh;/* on veut tout voir */
  max-width:100%;/* on veut tout voir */
  background:repeating-conic-gradient(#000 0% 25%, ivory 0% 50%) 0 0 / calc(100 / 4 * 1% ) calc(100 / 4 * 1% ); /* on dessine l'echiquier */
}


exemple possible https://codepen.io/gc-nomade/pen/eYPwxQa

cdt
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)
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à