JeuWeb Créez votre jeu par navigateur !

Daynos · (Modification du message : 09-04-2010, 11:16 PM par Daynos.)

Pour faire simple, il faut pour commencer un "cadre" avec l'attribut "position:relative". Tous les calques avec la propriété "position:absolute" situés à l'intérieur de ce "cadre" auront pour référentiel l'angle haut gauche du cadre. Après le cadre, tu peux le mettre où tu veux dans ta page, les calques à l'intérieur suivront.

Petit exemple très basique pour tracer une diagonale de tuiles grises sur un cadre de fond bleu :

Code PHP :
<?php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Document sans nom</title>

<style type="text/css">

#cadre { position:relative; width:100px; height:100px; margin:150px; border:1px solid #000; background:#66CCFF; }

.tuile    { position:absolute; width:10px; height:10px; background:#CCC; }

#tuile1 { top:0px; left:0px; }

#tuile2 { top:10px; left:10px; }

#tuile3 { top:20px; left:20px; }

#tuile4 { top:30px; left:30px; }

#tuile5 { top:40px; left:40px; }

#tuile6 { top:50px; left:50px; }

#tuile7 { top:60px; left:60px; }

#tuile8 { top:70px; left:70px; }

#tuile9 { top:80px; left:80px; }

#tuile10 { top:90px; left:90px; }

</style>

</head>

<body>

    <div id="cadre">

        <div id="tuile1" class="tuile"></div>

        <div id="tuile2" class="tuile"></div>

        <div id="tuile3" class="tuile"></div>

        <div id="tuile4" class="tuile"></div>

        <div id="tuile5" class="tuile"></div>

        <div id="tuile6" class="tuile"></div>

        <div id="tuile7" class="tuile"></div>

        <div id="tuile8" class="tuile"></div>

        <div id="tuile9" class="tuile"></div>

        <div id="tuile10" class="tuile"></div>

    </div>

</body>

</html>