Bonjour Les amis
Comment créez le carré dans un carré dans une page html et comment les donnés les dimensions sur la page css?
Bonjour Les amis
Comment créez le carré dans un carré dans une page html et comment les donnés les dimensions sur la page css?
tu parles de quoi?? d'un div dans un div, un tableau dans un tableau? d'un div dans un tableau? d'un paragraphe dans un div? c'est quoi au juste la notion de "carré" ??
la vie n'est pas cirrhose des foies ...
Avant de poster un message Rechercher n'est pas qu'une option.
FAQ Web - Tuto Web
Bonjour
Le voici mon code
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 <!DOCTYPE html> <html> <head> <title>Puzzle</title> <meta charset="utf-8"> <link rel="stylesheet" href="projet.css"> </head> <body> <div class="c"> <div class="c1"> <h1>Bienvenu dans votre Jeu Puzzle</h1> </div> <div class="c2"> <table> <tr> <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> </tr> <tr> <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> </tr> </div> </table> <div class="c3"> <input type="submit" value="Nouveau"> <input type="submit" value="Vérifier"> <input type="submit" value="Réinitialiser"> <script type="text/javascript" src="projet.js"> </script> </body> </html>
Je voudrai insérer les chiffres dans mon tableau en javascript, je ne sais pas comment faire.
En vanilia JavaScript , il faut donner un identifiant (id) à chaque case, et ensuite récupérer une case avec la fonction getElementById (*, <- lien en français MDN) et ensuite écrire dedans avec l'attribut innerHTML (<- lien en français MDN)
Et je pense , qu'il faut mieux générer la grille en JavaScript au lieu de l'hardcoder en HTML.
* : tester le retour if ((elt != null) && (typeof elt != "undefined")) { }
Utiliser un ID pour chaque cellule n'est pas obligatoire, l’élément table a des propriétés qui permettent d'accéder à chaque cellule d'une manière moins fastidieuse que celle avec l'usage d'ID...
Où se trouvent ces chiffres ? Et dans quel ordre tu veux les insérer dans la table (table et non tableau, non ?).
un truc comme ça ?
(testé sur Chrome, FireFox rejette le drag/ drop en code simple)
et pas besoin de <table> pour dessiner des carrés
ni de mettre des id partout...
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 <!DOCTYPE HTML> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Puzzle</title> <style> #grand-Carré { margin : 20px; width : 400px; height : 400px; } #grand-Carré > i { box-sizing : border-box; display : block; float : left; width : 100px; height : 100px; border : 1px solid orangered; background-color: orange; font-size : 20px; text-align : center; line-height: 85px; cursor : pointer; } .hovered { background-color: yellow !important } </style> </head> <body> <div class="c"> <div class="c1"> <h1>Bienvenu dans votre Jeu Puzzle</h1> </div> <div id="grand-Carré"></div> <div class="c3"> <input type="submit" value="Nouveau"> <input type="submit" value="Vérifier"> <input type="submit" value="Réinitialiser"> </div> <script> "use strict" let Grd_Carre = document.getElementById('grand-Carré'); for (let i=0; i<16; i++) { let nv_Carre = document.createElement('i'); nv_Carre.draggable = true; nv_Carre.textContent = i; Grd_Carre.appendChild(nv_Carre); } let Node_Depla = null; Grd_Carre.ondragstart = function(e) { Node_Depla = e.target; } Grd_Carre.ondragover = function(e) { e.preventDefault(); } Grd_Carre.ondragenter = function(e) { e.target.className = 'hovered'; } Grd_Carre.ondragleave = function(e) { e.target.className = ''; } // Grd_Carre.ondragend = function(e) { } Grd_Carre.ondrop = function(e) { e.target.className = ''; Grd_Carre.insertBefore(Node_Depla, e.target); Node_Depla = null; } </script> </body> </html>
«La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager