572 tutoriels disponibles
Chercher un tutoriel
Bienvenue
sur Shareannonce
 
Ecrit par: Shareannonce
Date création:  08-04-2011
Nombre de vues:  8978
Catégorie:  informatique > developpement > html
Note: 
 
   Tutoriel N° 73

Creation damier echec 8x8 en div html


Ce tutoriel vous explique comment réaliser un damier d'echec 8x8 avec des cases de 40x40 pixels.
Nous remplirons ce damier avec une piece de 40x40 superposée sur le damier.

Voila le résultat que nous obtiendrons:

Voici le damier vierge sans pièce superposée:

Voici le cavalier:


Explication:
Nous créeons un 1er div avec le damier en fond d'ecran en position relative 100 à gauche et à 100 de top.

Ensuite en position absolute nous encapsulons les divs de chaque piece.

Voici le code html avec les div:

<div id="casea1b1" style="position:relative;left:100;top:100;width:320px;height:320px;background-image:url(damier.png);">
<!-- ligne 1 de 8 pieces -->
<div id="exemple" style="position:absolute;left:0;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:0"><img src="cav.gif" width="40" height="40"></div>

<div id="piececasea1b1" style="position:absolute;left:200;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:0"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 1 de 8 pieces -->

<!-- ligne 2 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:40"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 2 de 8 pieces -->

<!-- ligne 3 de 8 pieces -->

<div id="piececasea1b1" style="position:absolute;left:0;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:80"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 3 de 8 pieces -->

<!-- ligne 4 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:120"><img src="cav.gif" width="40" height="40"></div>

<div id="piececasea1b1" style="position:absolute;left:240;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:120"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 4 de 8 pieces -->

<!-- ligne 5 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:160"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 5 de 8 pieces -->

<!-- ligne 6 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:200"><img src="cav.gif" width="40" height="40"></div>

<div id="piececasea1b1" style="position:absolute;left:40;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:200"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 6 de 8 pieces -->

<!-- ligne 7 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:240"><img src="cav.gif" width="40" height="40"></div>

<div id="piececasea1b1" style="position:absolute;left:280;top:240"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 7 de 8 pieces -->

<!-- ligne 8 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:280"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 8 de 8 pieces -->

</div>




Télécharger les sources de ce tutoriel

 
 
   Autres tutoriels de la même catégorie >
 
ShareAnnonce version 2.0 Tous droits reserves. | Condition d'utilisation | Contact