Discussion :

[identifiant_bidon]

Bonjour à tous,

Je voudrais afficher un ensemble de div de manière ordonnée. Les divs doivent être placés l'un à côté de l'autre et les uns au dessus des autres. Enfin bref, ils doivent former un tableau (j'espère que je suis assez clair).

Voici où j'en suis. Mon souci actuel est que les div sont décalés. Cet exemple doit afficher un "tableau" de 3 lignes et 2 colonnes.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<div style="position:absolute; top:28%; width:59%;height:60%;left:24%; z-index:9; border:1px solid #FFFF00;">
 
		<?php
                        for ($indice = 0; $indice < 3; $indice++ ) {
                        
                                echo "<div style=\"position:relative; top:20px; left:20px; width:80px; height:80px;  z-index:9; background-color:#FF0;\">1</div>";
                        
                                echo "<div style=\"position:relative; top:20px; left:200px; width:80px; height:80px;  z-index:10; background-color:#0f0;\">2</div>";
                        }
                ?>   
 
	</div>

Merci beaucoup

[NoSmoking]

Bonjour,
indépendamment du fait que il vaut mieux mettre le code HTML généré et en aucun cas le code PHP ( Les règles incontournables d'utilisation de ce forum), tu peux faire quelque chose de simple

Code html :

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

1
2
3
4
5
6
7
8
<div id="div_table">
  <div class="col_1">ligne 1<br>colonne 1</div>
  <div class="col_2">ligne 1<br>colonne 2</div>
  <div class="col_1">ligne 2<br>colonne 1</div>
  <div class="col_2">ligne 2<br>colonne 2</div>
  <div class="col_1">ligne 3<br>colonne 1</div>
  <div class="col_2">ligne 3<br>colonne 2</div>
</div>

avec le CSS associé

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
#div_table{
  position:absolute;
  top:28%;
  left:24%;
  width:59%;
  z-index:9;
  border:1px solid #FFFF00;
}
#div_table div{
  font-family : Verdana, Arial;
  font-size:0.8em;
  float:left;
  width:50%;
  height:80px;
  text-align:center;
}
.col_1{
  background-color:#FF0;
}
.col_2{
  background-color:#0F0;
}

Sinon il existe bien sûr la propriété display et ses déclinaisons Propriétés Display