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

Question

Pages :

Mathieuu

1 Jun 2023 à 15:06

(reprise du message précédent)

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)

Fox-infograp

1 Jun 2023 à 15:33

Mathieuu a écrit :
Salut,

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

[code=css]
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), ETC....
ne servent à rien, c'est juste pour avoir à chaque fois les 2 bornes de l'intervalle à chaque fois

C'est gentil à toi mais si j'ai mis le code de mon premier message tel qu'il est, c'est parce que
ce tableau sert au java-script car tout les éléments y sont utilisés !
Merci tout de même Smiley biggrin

Fox-infograp

1 Jun 2023 à 15:39

Merci encore à vous ! et au prochain sujet Smiley ohwell

Mathieuu

1 Jun 2023 à 16:09

Fox-infograp a écrit :

C'est gentil à toi mais si j'ai mis le code de mon premier message tel qu'il est, c'est parce que
ce tableau sert au java-script car tout les éléments y sont utilisés !
Merci tout de même

Je suppose que je n'étais pas claire dans mon message, je n'ai pas touché a la structure de tes divs.
C'est juste la façon de raisonner en css qui simule un fonctionnement par intervalle : https://jsfiddle.net/tjz380mh/

En gros cette portion la de css :

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))

on peut voir ça comme les cases qui ont un numéro impair et qui sont compris entre 1 et 7 ou entre 17 et 24 ou entre 33 et 40 ou entre 49 et 56.

C'est pour ça que je disais que je trouve que cela "simplifie" la logique

parsimonhi

Modérateur

1 Jun 2023 à 21:25

Bonjour,

gcyrillus a écrit :
...on peut aussi dessiner le fond de l’échiquier depuis le conteneur principal avec un gradient conique...

Il fallait le trouver celui-là. Après ça, on ne peut guère espérer faire mieux ! Respects ! Smiley cannelle

Amicalement,

Fox-infograp

1 Jun 2023 à 23:54

Mathieuu a écrit :
Salut,

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

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

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

Oui je comprends ce que tu proposes !mais c'est un minuscule morceau de mon programme, puisqu'il fait jouer une partie avancer et reculer ou cliquer directement au milieu d'une variante,
Sais tu alors comment je me repères pour jouer un roque ? ou une prise en passant car il faut alors que je joues deux Pieces ! non ma seule question ici était de faire cet échiquier , par d'en changer le contenu, en attendant mille mercis Smiley smile

Fox-infograp

2 Jun 2023 à 00:49

Voila c'est bien mérité Smiley smile

https://fox-infographie.com/echec/damier.htm
avec ces codes:


html {  height: 100%;font-size:100%;} 
body {  min-height: 100%; margin: 0;  padding: 0;position: relative;}
body {font-size: 20px; font-family :Georgia, "Times New Roman", Times, serif; color: #000000; background-color: #ffffff;}
div.LechecX { position :fixed; top :20px; left :20px;width:400px;height:380px; z-index:50; display:inline-flex; flex-wrap: wrap;border: thick double #32a1ce; }
div.LechecX {  background-image: url("echec/echiquier2.jpg");  background-repeat: no-repeat;background-size: 393px 393px;}
div.LAcase { width: 42px;height: 42px;border:1px solid #ffffff;text-align: center; z-index :50; }

Et le HTML


<!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> 
<div  class="LechecX">
<div class="LAcase" ><img alt=" "  id="le73" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le0" src="echec/tn42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le1" src="echec/cn42.gif" /></div><div class="LAcase" ><img alt=" "  id="le2" src="echec/fn42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le3" src="echec/dn42.gif" /></div><div class="LAcase" ><img alt=" "  id="le4" src="echec/rn42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le5" src="echec/fn42.gif" /></div><div class="LAcase" ><img alt=" "  id="le6" src="echec/cn42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le7" src="echec/tn42.gif" /></div><div class="LAcase" ><img alt=" "  id="le74" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le8" src="echec/pn42.gif" /></div><div class="LAcase" ><img alt=" "  id="le9" src="echec/pn42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le10" src="echec/pn42.gif" /></div><div class="LAcase" ><img alt=" "  id="le11" src="echec/pn42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le12" src="echec/pn42.gif" /></div><div class="LAcase" ><img alt=" "  id="le13" src="echec/pn42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le14" src="echec/pn42.gif" /></div><div class="LAcase" ><img alt=" "  id="le15" src="echec/pn42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le75" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le16" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le17" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le18" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le19" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le20" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le21" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le22" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le23" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le76" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le24" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le25" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le26" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le27" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le28" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le29" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le30" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le31" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le77" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le32" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le33" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le34" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le35" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le36" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le37" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le38" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le39" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le78" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le40" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le41" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le42" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le43" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le44" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le45" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le46" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le47" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le79" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le48" src="echec/pb42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le49" src="echec/pb42.gif" /></div><div class="LAcase" ><img alt=" "  id="le50" src="echec/pb42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le51" src="echec/pb42.gif" /></div><div class="LAcase" ><img alt=" "  id="le52" src="echec/pb42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le53" src="echec/pb42.gif" /></div><div class="LAcase" ><img alt=" "  id="le54" src="echec/pb42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le55" src="echec/pb42.gif" /></div><div class="LAcase" ><img alt=" "  id="le80" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le56" src="echec/tb42.gif" /></div><div class="LAcase" ><img alt=" "  id="le57" src="echec/cb42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le58" src="echec/fb42.gif" /></div><div class="LAcase" ><img alt=" "  id="le59" src="echec/db42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le60" src="echec/rb42.gif" /></div><div class="LAcase" ><img alt=" "  id="le61" src="echec/fb42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le62" src="echec/cb42.gif" /></div><div class="LAcase" ><img alt=" "  id="le63" src="echec/tb42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le64" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le65" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le66" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le67" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le68" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le69" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le70" src="echec/vd42.gif" /></div><div class="LAcase" ><img alt=" "  id="le71" src="echec/vd42.gif" /></div>
<div class="LAcase" ><img alt=" "  id="le72" src="echec/vd42.gif" /></div>
</div>
</body></html>

alain_47

2 Jun 2023 à 13:41

Bonjour,

Sur l'ancienne version, j'avais remarqué que sur petit écran, l'échiquier n'apparaissait plus.

Je suppose que c'est à cause du "position : fixed".

alain_47

2 Jun 2023 à 13:42

alain_47

2 Jun 2023 à 13:48

En modifiant un peu, on peut avoir l'echiquier et le texte mais avec une barre de scroll par tres esthetique. Il pourrait faire un "overflow : hidden" et faire avancer le schroll en JS en fonction de l'avancement de la partie ... mais j'avoue je n'ai pas essayé.

Pour la scrollbar, dommage de Firefox n'accepte pas (encore) "::-webkit-scrollbar".

alain_47

2 Jun 2023 à 13:49

upload/1685706551-61012-modiffirefox.gif

alain_47

2 Jun 2023 à 13:50

alain_47

2 Jun 2023 à 14:09

PS :
j'étais parti sur le code de Parsimonhi pour ajouter à la grille les numéros et lettres.

Ca fonctionne bien sur grand ecran mais en petit ecran, mon code n'est plus responsive !

Il va falloir que j'apprenne le Grid Smiley biggrin


<!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>Modif. Echiquier Parsimonhi</title> 
<link rel="stylesheet" href="style.css">
</head>
<body>
    <!--   https://forum.alsacreations.com/topic-4-90489-1.html  - mai 2023  -->
    <div class="echiquier">
        <div>8</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>7</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>6</div>
        <div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div>
        <div>5</div>
        <div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div>
        <div>4</div>
        <div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div>
        <div>3</div>
        <div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div>
        <div>2</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>1</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> </div>
        <div>a</div><div>b</div><div>c</div><div>d</div>
        <div>e</div><div>f</div><div>g</div><div>h</div>
    </div>
</body>
</html>


body {
	display:flex;
	margin: 0;
	padding: 0;
	height: 100vh;
	font-size: 16px;
}

body>div {
	margin: auto;
	display: grid;
	grid-template-columns: repeat(9,1fr);
	width: 88vmin;
	font-size: 4rem;
}

div>div {
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #1117;
}

div>div:nth-child(2n+2){background-color: white;}


.echiquier div:nth-child(9n+1)
, .echiquier div:nth-child(1n+73){
	background-color: white; font-size: 1rem;
}

alain_47

2 Jun 2023 à 14:09

parsimonhi

Modérateur

2 Jun 2023 à 14:47

Bonjour,

alain_47 a écrit :
PS :
J'étais parti sur le code de Parsimonhi pour ajouter à la grille les numéros et lettres.

Ca fonctionne bien sur grand ecran mais en petit ecran, mon code n'est plus responsive

Il faudrait utiliser l'unité vmin partout.

Amicalement,

alain_47

2 Jun 2023 à 22:57

Bonsoir,

ok, merci beaucoup Parsimonhi.

alain_47

2 Jun 2023 à 23:23

Magnifique, ca marche umpec ! Smiley biggrin


body {
	display:flex;
	margin: 0; padding: 0;
	height: 100vh;
}

body>div {
	margin: auto;
	display: grid;
	grid-template-columns: repeat(9,1fr);
	width: 88vmin;
	font-size: 8vmin;
}

div>div {
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #1117;
}

div>div:nth-child(2n+2){background-color: white;}


.echiquier div:nth-child(9n+1)
, .echiquier div:nth-child(1n+73){
	background-color: white; font-size: 2vmin;
}

Fox-infograp

3 Jun 2023 à 01:01

Mathieuu a écrit :

Je suppose que je n'étais pas claire dans mon message, je n'ai pas touché a la structure de tes divs.
C'est juste la façon de raisonner en css qui simule un fonctionnement par intervalle : https://jsfiddle.net/tjz380mh/
En gros cette portion la de css : ETC..
C'est pour ça que je disais que je trouve que cela "simplifie" la logique

Pour moi si tu peux me donner le code Javascript (pas jquery !) qui avance un pion c'est de loin la meilleur solution et 100% responsive
CHAPEAU ! j'avais découvert grâce à mon fils cette écriture des pièces trop TOP Smiley cligne

alain_47

3 Jun 2023 à 18:45

Bonjour,

Sinon, en revenant sur <table>, on pourrait faire :


<!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>plateau du 03 Juin</title> 
<link rel="stylesheet" href="style.css">
</head>
<body>
    <!--   https://forum.alsacreations.com/topic-4-90489-1.html  - mai 2023  -->
    <div class="plateau">
        <button>Move</button>
        <table>
        <tr id="r8">
            <td>8</td><td>&#9820;</td><td>&#9822;</td><td>&#9821;</td><td>&#9819;</td><td>&#9818;</td><td>&#9821;</td><td>&#9822;</td><td>&#9820;</td>
            </tr>
        <tr id="r7">
            <td>7</td><td>&#9823;</td><td>&#9823;</td><td>&#9823;</td><td>&#9823;</td><td>&#9823;</td><td>&#9823;</td><td>&#9823;</td><td>&#9823;</td>
            </tr>
        <tr id="r6">
            <td>6</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
            </tr>
        <tr id="r5">
            <td>5</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
        <tr id="r4">
            <td>4</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
            </tr>
        <tr id="r3">
            <td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
        <tr id="r2">
            <td>2</td><td>&#9817;</td><td>&#9817;</td><td>&#9817;</td><td>&#9817;</td><td>&#9817;</td><td>&#9817;</td><td>&#9817;</td><td>&#9817;</td>
            </tr>
        <tr id="r1">
            <td>1</td><td>&#9814;</td><td>&#9816;</td><td>&#9815;</td><td>&#9813;</td><td>&#9812;</td><td>&#9815;</td><td>&#9816;</td><td>&#9814;</td>
            </tr>
        <tr id="r0">
            <td></td><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td>
            </tr>
        </table>
    </div>



<script>
    let button = document.querySelector('button');
    let movesCollection = [
        ['d2', 'd4'],
        ['g8', 'f6'],
        ['c2', 'c4'],
        ['e7', 'e6'],
        ['b1', 'c3'],
        ['f8', 'b4']
    ]
    let moveIndex = 0

    button.addEventListener("click", () => {
        if(moveIndex < 6){
            [moveOrigine, moveDestination] = movesCollection[moveIndex] 
            let rowOrigine = moveOrigine[1]; 
            let colOrigine = moveOrigine.charCodeAt(0)-95
            let caseOrigine  = document.querySelector(`#r${rowOrigine} td:nth-of-type(${colOrigine})`)
            let rowDestination = moveDestination[1];
            let colDestination = moveDestination.charCodeAt(0)-95
            let caseDestination = document.querySelector(`#r${rowDestination} td:nth-of-type(${colDestination})`)
            caseDestination.textContent = caseOrigine.textContent
            caseOrigine.textContent = "" 

            moveIndex++
        } else {return}
    });
</script>

</body>
</html>

alain_47

3 Jun 2023 à 18:46

avec le CSS


body {
	display:flex;
	margin: 0; padding: 0;
	height: 100vh; 
}

.plateau{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto;
}

button{
	margin: 5px;
	background-color: rgb(17, 146, 189);
	color: white;
	border-radius: 5px;
}

td{
	width: 60px; height: 60px;
	font-size: 8vmin;
	border: 0;
	text-align: center;
}

tr:nth-of-type(2n):not(:nth-of-type(9)) td:nth-of-type(2n){
	background-color: #1117;}
tr:nth-of-type(2n+1):not(:nth-of-type(9)) td:nth-of-type(2n+1):not(:nth-of-type(1)){
	background-color: #1117;}

tr td:nth-of-type(1), tr#r0 td{
	text-align: center;
	font-size: 3vmin;
}

alain_47

3 Jun 2023 à 18:53

ce qui donne upload/1685811284-61012-move.png

Modifié par alain_47 (03 Jun 2023 - 18:54)

Prévenir un modérateur

Pages :

Répondre au sujet

CSS et mise en forme, CSS3

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