Réalisation d'un dessin sous forme de grille

**Nexter73** · 31/08/2018, 19h37

Bonjour,

Je dois faire un dessin pixelisé comme sur cet exemple : Nom : Canard_pixel_art.png
Affichages : 11573
Taille : 15,7 Ko

Le dessin doit etre responsive et etre identique du smarthpone a l'ecran pc et il fait 11 "pixel" de large à son maximum.
Je dois utiliser BootstrapCDN pour acceder a bootstrap.

J'ai lu des guides bootstrap mais je suis completement a la rue malgré tout, avec du texte j'arrive a manipuler tout ça mais vu que mes col sont juste remplies avec de la couleur, je suis paumé, rien ne se passe comme je voudrais.

Je ne sais pas comment faire des cubes parfait pour qu'ils restent responsive, j'ai tenté en mettant une div dans les div d'items avec un background-color et une taille width et height en "em" mais apres une marge blanche enorme se fait entre chaque pixel malgré mon "no-gutter" dans les row.
Du coup j'ai enlevé ces div et mis une seconde class a mes col pour leur attribué taille et couleur dans un fichier css, mais ce n'est pas responsive non plus je crois....

Je ne demande pas que vous me fassiez le code, mais est-ce que vous pourriez m'expliquer le fonctionnement ou la logique que je devrai avoir svp ?

Pour le moment j'ai ça:

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
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>L'oeil !!!</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-9"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-3"></div>                 
                <div class="col-1 orange"></div>
                <div class="col-1 yellow"></div>
                <div class="col-1 orange"></div>
                <div class="col-3"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-2"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 yellow"></div>
                <div class="col-1 dark"></div>
                <div class="col-1 yellow"></div>
                <div class="col-1 orange"></div>
                <div class="col-2"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 yellow"></div>
                <div class="col-1 dark"></div>
                <div class="col-1 yellow"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 dark"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 orange"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 yellow"></div>
                <div class="col-1 orange"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
 
            </div>
            <div class="row no-gutters">
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-3"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>  
            </div>
            <div class="row no-gutters">
                <div class="col-2"></div>
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-2"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-3"></div>
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-3"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-4"></div>
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-4"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-4"></div>
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-1 noir"></div> 
                <div class="col-4"></div>
            </div>
        </div>
 
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Invité · 31/08/2018, 21h25

Bonjour,

1- il faut nous donner le code CSS de style.css.

2- Le dessin de ton canard est dans une grille de 20 x 20 cases.
Je vois mal comment on peut le réduire à 11 pixels !

D'autre part, le système de grid Bootstrap fait 12 colonnes....
Du coup... je me demande aussi quel est l’intérêt de Bootstrap ici.

3- Pour adapter la hauteur : peux-tu utiliser JavaScript/jQuery ou pas ?
Auquel cas ce n'est pas très compliqué.

**Nexter73** · 31/08/2018, 21h55

L'image exact que je dois représenter est celle ci:
Nom : integration_oeil.png
Affichages : 2406
Taille : 6,0 Ko

Quant à mon code css:

J'ai juste attribué au class "noir" "yellow" et "orange" une bordure, un background color et une taille (height et width) en rem.
J'avoue ne vraiment pas savoir comment m'y prendre, c'est pour ça que j'ai besoin d'etre conseillé

Je ne suis pas sur mon ordi, je ne peux pas mettre le code exact en balise.

Il s'agit d'un exercice je ne suis pas censé maitrisé js/jquery mais utilisé bootstrap en l'apelant avec BootstrapCDN.
Je n'ai jamais fais de grid avant, j'avoue que j'aurai preferé commencé avec des div ayant un texte plutot que ce genre de "pixel"... mais c'est l'exercice d'introduction.

Invité · 31/08/2018, 22h19

C'est malin...

J'avais commencé à écrire un code pour le canard, à base de <table>, de CSS et jQuery

Invité · 31/08/2018, 22h30

1- Voilà le début de ton "oeil de Sauron" : https://codepen.io/jreaux62/pen/GXrLWB

[EDIT]Bon, finalement, je l'ai terminé ! (ce n'était pas bien long)

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
<table class="grid-square grid-oeil-sauron">
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
</table>

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
.grid-oeil-sauron { width:100%; max-width:200px; border-collapse:collapse; }
.grid-oeil-sauron tr td { width:5%;/*100/20*/ height:10px; border:1px solid #ddd; }
/* cases noires */
.grid-oeil-sauron tr:nth-child(1) td:nth-child(1),
.grid-oeil-sauron tr:nth-child(1) td:nth-child(11),
 
.grid-oeil-sauron tr:nth-child(2) td:nth-child(1),
.grid-oeil-sauron tr:nth-child(2) td:nth-child(11),
 
.grid-oeil-sauron tr:nth-child(3) td:nth-child(1),
.grid-oeil-sauron tr:nth-child(3) td:nth-child(6),
.grid-oeil-sauron tr:nth-child(3) td:nth-child(11),
 
.grid-oeil-sauron tr:nth-child(4) td:nth-child(1),
.grid-oeil-sauron tr:nth-child(4) td:nth-child(2),
.grid-oeil-sauron tr:nth-child(4) td:nth-child(6),
.grid-oeil-sauron tr:nth-child(4) td:nth-child(10),
.grid-oeil-sauron tr:nth-child(4) td:nth-child(11),
 
.grid-oeil-sauron tr:nth-child(5) td:nth-child(1),
.grid-oeil-sauron tr:nth-child(5) td:nth-child(2),
.grid-oeil-sauron tr:nth-child(5) td:nth-child(6),
.grid-oeil-sauron tr:nth-child(5) td:nth-child(10),
.grid-oeil-sauron tr:nth-child(5) td:nth-child(11),
 
.grid-oeil-sauron tr:nth-child(6) td:nth-child(1),
.grid-oeil-sauron tr:nth-child(6) td:nth-child(2),
.grid-oeil-sauron tr:nth-child(6) td:nth-child(3),
.grid-oeil-sauron tr:nth-child(6) td:nth-child(9),
.grid-oeil-sauron tr:nth-child(6) td:nth-child(10),
.grid-oeil-sauron tr:nth-child(6) td:nth-child(11),
 
.grid-oeil-sauron tr:nth-child(7) td:nth-child(2),
.grid-oeil-sauron tr:nth-child(7) td:nth-child(3),
.grid-oeil-sauron tr:nth-child(7) td:nth-child(4),
.grid-oeil-sauron tr:nth-child(7) td:nth-child(8),
.grid-oeil-sauron tr:nth-child(7) td:nth-child(9),
.grid-oeil-sauron tr:nth-child(7) td:nth-child(10),
 
.grid-oeil-sauron tr:nth-child(8) td:nth-child(3),
.grid-oeil-sauron tr:nth-child(8) td:nth-child(4),
.grid-oeil-sauron tr:nth-child(8) td:nth-child(5),
.grid-oeil-sauron tr:nth-child(8) td:nth-child(6),
.grid-oeil-sauron tr:nth-child(8) td:nth-child(7),
.grid-oeil-sauron tr:nth-child(8) td:nth-child(8),
.grid-oeil-sauron tr:nth-child(8) td:nth-child(9),
 
.grid-oeil-sauron tr:nth-child(9) td:nth-child(4),
.grid-oeil-sauron tr:nth-child(9) td:nth-child(5),
.grid-oeil-sauron tr:nth-child(9) td:nth-child(6),
.grid-oeil-sauron tr:nth-child(9) td:nth-child(7),
.grid-oeil-sauron tr:nth-child(9) td:nth-child(8),
 
.grid-oeil-sauron tr:nth-child(10) td:nth-child(5),
.grid-oeil-sauron tr:nth-child(10) td:nth-child(6),
.grid-oeil-sauron tr:nth-child(10) td:nth-child(7),
 
.grid-oeil-sauron tr:nth-child(11) td:nth-child(5),
.grid-oeil-sauron tr:nth-child(11) td:nth-child(6),
.grid-oeil-sauron tr:nth-child(11) td:nth-child(7)/*pas de virgule*/
{ background:black; }
 
/* cases jaunes */
.grid-oeil-sauron tr:nth-child(2) td:nth-child(6),
 
.grid-oeil-sauron tr:nth-child(3) td:nth-child(5),
.grid-oeil-sauron tr:nth-child(3) td:nth-child(7),
 
.grid-oeil-sauron tr:nth-child(4) td:nth-child(5),
.grid-oeil-sauron tr:nth-child(4) td:nth-child(7),
 
.grid-oeil-sauron tr:nth-child(5) td:nth-child(5),
.grid-oeil-sauron tr:nth-child(5) td:nth-child(7),
 
.grid-oeil-sauron tr:nth-child(6) td:nth-child(6)/*pas de virgule*/
{ background:gold; }
 
/* cases oranges */
.grid-oeil-sauron tr:nth-child(2) td:nth-child(5),
.grid-oeil-sauron tr:nth-child(2) td:nth-child(7),
 
.grid-oeil-sauron tr:nth-child(3) td:nth-child(4),
.grid-oeil-sauron tr:nth-child(3) td:nth-child(8),
 
.grid-oeil-sauron tr:nth-child(4) td:nth-child(3),
.grid-oeil-sauron tr:nth-child(4) td:nth-child(4),
.grid-oeil-sauron tr:nth-child(4) td:nth-child(8),
.grid-oeil-sauron tr:nth-child(4) td:nth-child(9),
 
.grid-oeil-sauron tr:nth-child(5) td:nth-child(4),
.grid-oeil-sauron tr:nth-child(5) td:nth-child(8),
 
.grid-oeil-sauron tr:nth-child(6) td:nth-child(5),
.grid-oeil-sauron tr:nth-child(6) td:nth-child(7)/*pas de virgule*/
{ background:darkorange; }

Code JavaScript :

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

1
2
3
4
5
6
7
8
/* jQuery */
function square_grid() {
  $('.grid-square tr td').height( $('.grid-square tr td').width() );
};
 
$(window).on('load resize', function() {
  square_grid();
});

2- Le même, avec cette fois des <div> : https://codepen.io/jreaux62/pen/YONMJj

**Nexter73** · 31/08/2018, 22h45

C'est gentil jreaux mais j'ai pas le droit d'utiliser tout ça

je suis juste censé utilisé la grid de bootstrap donc html et css only, je n'ai pas droit au reste car on valide mon exercice, je te rassure c'est pas noté ou autre chose, c'est pour apprendre a maitriser.
C'est pour ça que j'ai besoin de conseils et d'explications

dans tous les cas, merci de ton implication

Invité · 31/08/2018, 23h26

Sans JavaScript, la seule méthode que je connaisse pour contrôler la hauteur d'une case en CCS pur est de mettre une image (.png, carré, transparente) dans la case :

Code :

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

<div><img src="../icones/ico24_vide.png"/></div>

ex. : https://codepen.io/jreaux62/pen/zJNQNR

Quant à Bootstrap, encore une fois ce n'est pas adapté.

**Nexter73** · 01/09/2018, 09h41

Merci jreaux, je te montre l'enoncé de l'exo:

-Installer Bootstrap 4
Maintenant que tu as pris connaissance de FlexBox, tu vas pouvoir attaquer le framework CSS Bootstrap qui travaille avec. Pour l'installer, il te faut ajouter une simple feuille de style fournie par Bootstrap. Mais tu devras aussi ajouter un fichier Javascript également fourni par Bootstrap, ainsi que la librairie Jquery dont Bootstrap dépend, afin d'utiliser certaines classes comme les modales, tooltips, dropdown etc... Tu trouveras toutes les informations d'installation sur le site officiel de Bootstrap. Comme tu peux le constater, il existe plusieurs méthodes pour installer le framework, concentre-toi pour l'instant plus spécifiquement sur la partie Bootstrap CDN.

Rappel : Il est conseillé d'appeler les fichiers javascript à la fin de ta page HTML.

-Pour que cette quête soit validée, tu devras :
Reproduire le Grand Œil sur sa tour de Barad-Dûr en fonction de l'image ci-dessus (positionnement des cases et couleurs).
Faire un code organisé et propre, Bootstrap étant correctement appelé.
Les grilles Bootstrap doivent être utilisées.
Le résultat doit être responsive, il doit être cohérent sur tablette, pc et téléphone, il convient donc d'utiliser les bons breakpoints et de justifier le tout à l'aide des classes FlexBox.

Ils parlent effectivement de Jquery mais comme je le comprends, c'est pour une utilisation future.

Invité · 01/09/2018, 09h49

Bonjour,

1- je t'ai donné une solution sans jQuery : https://codepen.io/jreaux62/pen/zJNQNR
avec une image transparente carrée (qui permet de garder la forme carré des cases).
Tout ce qu'il te faut, c'est créer une image png transparente, et carrée.

J'ai appliqué les classes Bootstrap dans le code HTML

Code html :

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

1
2
3
4
<div class="container grid-square grid-oeil-sauron"> 
  <div class="row"> 
        <div class="col"><img src="icones/ico24_vide.png"/></div>
.....

2- Mais si tu peux utiliser un peu de JavaScript/jQuery, alors plus besoin d'image carrée.

Code html :

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

1
2
3
4
<div class="container grid-square grid-oeil-sauron"> 
  <div class="row"> 
        <div class="col"></div>
.....

Il faut ajouter :

Code JavaScript :

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

1
2
3
4
5
6
7
function square_grid() {
  $('.grid-square > div > div').height( (Math.floor($('.grid-square').width())/$('.grid-square > div').length)+'px' );
};
 
$(window).on('load resize', function() {
  square_grid();
});

3- Dans les 2 cas, le code CSS est le même :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/* grille de 11 x 11 cases */
.grid-square { width:50%; max-width:600px; border-collapse:collapse; margin:0 auto; }
 
.grid-square > div > div { padding:0; border:1px solid #ddd; background:white; }
.grid-square > div > div img { display:block; width:100%; height:auto; }
 
 
/* cases noires */
.grid-oeil-sauron > div:nth-child(1) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(1) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(2),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(10),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(2),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(10),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(2),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(3),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(9),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(10),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(2),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(3),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(8),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(9),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(10),
 
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(3),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(7),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(8),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(9),
 
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(7),
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(8),
 
.grid-oeil-sauron > div:nth-child(10) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(10) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(10) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(11) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(11) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(11) > div:nth-child(7)/*pas de virgule*/
{ background:black; }
 
/* cases jaunes */
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(6),
 
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(6)/*pas de virgule*/
{ background:gold; }
 
/* cases oranges */
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(8),
 
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(3),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(8),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(9),
 
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(8),
 
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(7)/*pas de virgule*/
{ background:darkorange; }

L'avantage de gérer les couleurs des cases en CSS, c'est de :

pouvoir réutiliser le code HTML tel quel pour dessiner d'AUTRES motifs de 11 x 11 cases,
en changeant juste le nom de la class ("grid-oeil-sauron").

Invité · 01/09/2018, 10h22

Cela dit : RIEN ne t'empêche d'écrire TON PROPRE CODE !

Par exemple :

Au lieu de gérer les couleurs en CSS, fais comme tu avais commencé, en mettant des classes "noir", "jaune", orange" dans le code HTML, aux bons endroits.

Astuce : il suffit de reprendre mon code CSS .grid-oeil-sauron > div:nth-child(Y) > div:nth-child(X) :

Y = numéro de ligne (rangée)
X = numéro de colonne

...il convient donc d'utiliser les bons breakpoints et de justifier le tout à l'aide des classes FlexBox...

Là, en utilisant simplement <div class="col"> (comme je l'ai fait), ça n'est pas tributaire des breakpoints ! (voir : grid system Bootstrap)
Donc, pas besoin de faire quoi que ce soit.

**Nexter73** · 01/09/2018, 10h28

Super, ça marche nickel.
Merci beaucoup jreaux, j'avoue que j'aurai jamais été capable de le faire.

Je vais regardé tout ça pour essayer de tout comprendre, je suis etonné qu'ils nous demandent quelque chose d'aussi complet pour une mise en bouche

.

**Nexter73** · 01/09/2018, 10h31

Mais class="col" ça ne correspond pas aux reglages pour un smartphone et donc aussi aux tailles d'ecrans superieurs ?
https://getbootstrap.com/docs/4.0/layout/grid/

Invité · 01/09/2018, 10h31

Envoyé par Nexter73

...Mais class="col" ça ne correspond pas aux reglages pour un smartphone et donc aussi aux tailles d'ecrans superieurs ?...

Regarde à "Auto-layout columns".

Avec <div class="col">, toutes les cases de la ligne auront la même largeur.
Même avec seulement 11 cases alors que le grid system fait 12 colonnes ! (la largeur des cases fait 12/11ème de colonne !)

Par contre, il ne faut PAS mettre <div class="col-1">.
Car là, tu imposes une largeur d'1 colonne (au sens Bootstrap).
Tu peux TESTER, pour t'en rendre compte.

Envoyé par Nexter73

...je suis etonné qu'ils nous demandent quelque chose d'aussi complet pour une mise en bouche

.

Oui, moi aussi.

A moins que je sois passé à coté d'une solution "simpliste" ou "simplissime" ?

Cela dit, ce n'était pas très compliqué à réaliser.
Le fait de conserver les cases carrées tout en étant "responsive" était la principale difficulté.

Bonne continuation.

**Nexter73** · 01/09/2018, 11h19

Ok merci de tes explications.
Je vais essayer de faire tout ça à ma façon de jeune newbie mais avec tes conseils, mais en fin d'apres midi, j'ai trop de choses a faire pour preparer ma rentrée

Du coup je risque de revenir te voir si ça ne te dérange pas, j'ai beaucoup à apprendre

**Nexter73** · 02/09/2018, 17h37

Salut jreaux,

Du coup un éleve qui a eu son exercice de validé m'a dit ça:

En fait tu fait comme tu veux, soit tu décide de 'faire' le dessin' en 'ligne par ligne' ou 'colonne par colonne'. Tes carrés seront forcément des divs (avec du css). Tu peux aussi considéré le 'vide' comme des carrés blanc ou transparent.

J'ai donc fait ça:

Code :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>L'oeil !!!</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="teststyle.css">
    </head>
    <body>
        <div class="container">
            <div class="row no-gutters"> 
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
 
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
                <div class="col"><div class="color"></div></div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>

et ça:

Code :

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
.container
{
    width:580px;
    height:580px;
}
.color
{
    border: 1px solid darkgrey;
    background-color:orange;
    width: 50px;
    height: 50px;
}
 
.row.no-gutters
{
    margin-right: 0;
    margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] 
{
    padding-right: 0;
    padding-left: 0;
}

c'est une ébauche mais je me suis dis que si mes carrés s'espacaient, c'est que je n'avais pas donné de taille a mon container, alors j'ai donné une taille pour que ça passe juste selon la taille que j'ai donné à mes divs
Vu ce que ça donne je me suis dis qu'on etait pas loin de solution, sauf que ben... c'est pas responsive.
Pourquoi les carrés diminuent pas de taille en même temps que les dimensions de l'ecran ? -_-
Je comprends pourquoi alors que j'ai tout comme dans les tuto

Invité · 02/09/2018, 17h58

Bonjour,

1- à partir du moment où tu définis les dimensions en pixels, ce ne sera forcément pas "responsive".

C'est bien là le problème :

autant il est facile de définir les largeurs en %, car la "référence" est la largeur de la fenêtre,
par contre, définir les hauteurs en % est difficile, car, par définition, une page HTML peut s'étendre en hauteur à l'infini (selon le contenu).

2- à quoi sert <div class="color"></div> ?
A rien.
On peut mettre plusieurs classes (en les séparant par un espace) sur un même div :

Code :

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

                 <div class="col color"></div>

**Nexter73** · 02/09/2018, 18h02

J'ai fais ça et ça a l'air de fonctionner:

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
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>L'oeil !!!</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="teststyle.css">
    </head>
    <body>
        <div class="container">
            <div class="row no-gutters"> 
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="jaune"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="jaune"></div></div>
                <div class="col-1"><div class="noir"></div></div>
                <div class="col-1"><div class="jaune"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="jaune"></div></div>
                <div class="col-1"><div class="noir"></div></div>
                <div class="col-1"><div class="jaune"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="jaune"></div></div>
                <div class="col-1"><div class="noir"></div></div>
                <div class="col-1"><div class="jaune"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="jaune"></div></div>
                <div class="col-1"><div class="orange"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="gris"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
                <div class="col-1"><div class="blanc"></div></div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>

Code :

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
.container
{
    width: 620px;
    height: 620px;
}
 
.blanc
{
    border: 0.5px solid transparent;
    background-color: transparent;
    width: 50px;
    height: 50px;
}
 
.gris
{
    border: 0.5px solid darkgrey;
    background-color:#4F5B5A;
    width: 50px;
    height: 50px;
}
 
.noir
{
    border: 0.5px solid darkgrey;
    background-color:black;
    width: 50px;
    height: 50px;
}
 
.orange
{
    border: 0.5px solid darkgrey;
    background-color:orange;
    width: 50px;
    height: 50px;
}
 
.jaune
{
    border: 0.5px solid darkgrey;
    background-color:yellow;
    width: 50px;
    height: 50px;
}
.row.no-gutters
{
    margin-right: 0;
    margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] 
{
    padding-right: 0;
    padding-left: 0;
}

ça donne un résultat pas trop mal avec le simulateur chrome.
Après vu ce que tu me dis ça doit être du code bricole que j'ai fais la....

Invité · 03/09/2018, 11h03

Bonjour,

un bon code est un code SIMPLE.

On peut simplifier le HTML et le CSS :

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
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
        <div class="container">
            <div class="row no-gutters"> 
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 orange"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 orange"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 orange"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1 orange"></div>
                <div class="col-1 jaune"></div>
                <div class="col-1 orange"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
            </div>
            <div class="row no-gutters">
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1 noir"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
                <div class="col-1"></div>
            </div>
        </div>

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
.container
{
    width: 620px;
    height: 620px;
}
.row.no-gutters,
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] 
{
    padding: 0;
    margin: 0;
}
.container .row div
{
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    background-color: #fff;
}
 
.container .row div.noir
{
    background-color:black;
}
 
.container .row div.orange
{
    background-color:orange;
}
 
.container .row div.jaune
{
    background-color:yellow;
}

On obtient (à peu près) le même résultat que le tien (sauf que j'ai remplacée le gris par du noir).

**TalRino** · 15/02/2019, 14h49

Bonjour,

Petite remonte du sujet car je bosse sur le même exo de pré-rentré et je bloque au niveaux de la partie responsive.

Voici mon code : https://codepen.io/TalRino/pen/oQbXPY

D'ailleurs je tiens à préciser sur Code Pen j'ai aucun soucis au niveau de l'affichage mais sur mon navigateur ça s'affiche différemment : Voir mon problème.

Merci d'avance pour l'aide.

Invité · 15/02/2019, 15h40

J'avais réalisé plusieurs version.

1- Version 1 ( full CSS, AVEC image* ) : https://codepen.io/jreaux62/pen/zJNQNR

* L'astuce est d'utiliser une image transparente (.png), carrée (à rapatrier sur ton propre site !).

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
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<base href="https://www.jerome-reaux-creations.fr/ART/template/img/">
<div class="container grid-square grid-oeil-sauron">
  <div class="row"> 
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
 
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
  <div class="row">
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
        <div class="col"><img src="icones/ico24_vide.png"/></div>
  </div>
</div>

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
.grid-square { width:50%; max-width:400px; border-collapse:collapse; margin:0 auto; }
.grid-square > div { display:flex; flex-direction:row; }/* déjà dans CSS Bootstrap*/
 
.grid-square > div > div { padding:0; border:1px solid #ddd; background:white; }
.grid-square > div > div img { display:block; width:100%; height:auto; }
 
/* cases grises */
.grid-oeil-sauron > div:nth-child(1) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(1) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(2),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(10),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(2),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(10),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(1),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(2),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(3),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(9),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(10),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(11),
 
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(2),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(3),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(8),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(9),
.grid-oeil-sauron > div:nth-child(7) > div:nth-child(10),
 
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(3),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(7),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(8),
.grid-oeil-sauron > div:nth-child(8) > div:nth-child(9),
 
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(7),
.grid-oeil-sauron > div:nth-child(9) > div:nth-child(8),
 
.grid-oeil-sauron > div:nth-child(10) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(10) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(10) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(11) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(11) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(11) > div:nth-child(7)/*pas de virgule*/
{ background:grey; }
 
/* cases noires */
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(6),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(6)/*pas de virgule*/
{ background:black; }
 
/* cases jaunes */
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(6),
 
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(6)/*pas de virgule*/
{ background:gold; }
 
/* cases oranges */
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(2) > div:nth-child(7),
 
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(3) > div:nth-child(8),
 
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(3),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(8),
.grid-oeil-sauron > div:nth-child(4) > div:nth-child(9),
 
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(4),
.grid-oeil-sauron > div:nth-child(5) > div:nth-child(8),
 
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(5),
.grid-oeil-sauron > div:nth-child(6) > div:nth-child(7)/*pas de virgule*/
{ background:darkorange; }

2- Version 2 ( CSS + jQuery, SANS image ) : https://codepen.io/jreaux62/pen/YONMJj

Réalisation d'un dessin sous forme de grille

Grille CSS (CSS Grid)

Discussions similaires

Partager

Partager