28172 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 :
(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)
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 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 Smiley biggrin


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
Meilleure solution
Modérateur
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 Smiley cannelle Smiley cannelle

Amicalement,
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
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>
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".
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".
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;
}
Modérateur
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,
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;
}
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
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>
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;
}
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à