Positionner des Div grâce à une boucle
Bonjours à tous!
Je dispose de l'image suivante (vu qu'elle est de grande taille, je met juste le lien): http://upload.is.free.fr/upload/5j3f2rkl.png.
Je cherche à mettre dans chaque case 10 zéro, répartis sur deux lignes:
00000
00000
(oui, je sais, dis comme ça, ça à l'air très con XD)
Pour éviter de me taper 64 fois le code à taper, j'ai eu l'idée de faire une double boucle.
Code:
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
| <style type="text/css">
div#test { <!-- on a une première division qui à l'image comme image de fond -->
background-image: url(plateau_de_jeu.php);
background-repeat: no-repeat;
height: 600px;
width: 600px;
}
</style>
<div id="test">
<?php
$left = 5;
$top = 6; //ces valeurs sont les valeurs de bases pour centrer a peu près les zéros dans les cases.
$nom_left_1 = "u";
while($left < 600)
{
echo '
<style type="text/css">
div#'.$nom_left_1.' {
position: relative;
height: auto;
width: auto;
left: '.$left.'px;
top: '.$top.'px;
}
</style>
<div style="display: inline;" id="'.$nom_left_1.'"><span class="select_grand"><font color="black">00000</font><div class="info_grand">
<form method="post" action="combat.php">
<input type="submit" value="avancer">
</form>
</div></span>
</div>';
$left = $left + 50;
$nom_left_1 .= 'u';
}
?>
</div> |
Dans le souci de ne pas trop complexifier le code, je n'ai mis que la boucle qui écrit horizontalement les zéro.
Il suffira de la répéter en augmentant la verticalité pour avoir toutes les cases de remplies, mais je en m'y risque pas tan que la première boucle ne marche pas.
Voilà le résultat que j'obtenais: http://upload.is.free.fr/upload/u0ahxu10.jpg
J'en ai déduis que c'étais le saut de ligne <div> qui posait problème, vu que la distance horizontale était bonne. J'ai donc inclus le display: inline;, qui n'étais pas là au départ, avec le résultat à été le suivant:
http://upload.is.free.fr/upload/wagzxbgu.jpg
Bon, non seulement le problème de saut de ligne n'étais pas résolu, mais en plus certains zéros c'étaient décalés. J'ai essayé de voir si cela fonctionnais si on enlevais une ligne de 0 et le <br>; voilà le résultat:
http://upload.is.free.fr/upload/8xm45zqk.jpg
Si quelqu'un a des idées sur ce que ça pourrait être... Ce serais sympa de combler mon ignorance:mrgreen:
Merci d'avance=)
