Php tableau div/css

Version imprimable

Php tableau div/css

Bonjour,
debutant en php je viens de commencer a coder un tableau dynamique avec des div et du css, dans ce tableau j'affiche un certain nombre d'éléments récupéré de ma bdd, seulement voilà:
- j'aimerais obtenir ce resultat:

Code:

1
2
3
4
5
6
7
<div id="conteneurtableau">
<div id="lignes" style="clear: both;">
<div id="colonnes" style="float: left;">News1</div>
<div id="colonnes" style="float: left;">News2</div>
<div id="colonnes" style="float: left;">News3</div>
<div id="colonnes" style="float: left;">News4</div>
</div></div>

et j'obtiens ceci:

Code:

1
2
3
4
5
6
7
<div id="conteneurtableau">
<div id="lignes" style="clear: both;">
<div id="colonnes" style="float: left;">News1 News2 News3 News4</div>
<div id="colonnes" style="float: left;">News1 News2 News3 News4</div>
<div id="colonnes" style="float: left;">News1 News2 News3 News4</div>
<div id="colonnes" style="float: left;">News1 News2 News3 News4</div>
</div></div>

voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div id="conteneurtableau">
<?php
for ($r=1; $r<=$NbrLignes; $r++){
echo'<div id="lignes" style="clear:both;">';
for ($c=1; $c<=($NbrColonnes); $c++){
echo'<div id="colonnes" style="float:left;">';
foreach ($list as $item) :
echo $item->title;
endforeach;
echo '</div>';
}
echo '</div>';
}
 
?>
 
</div>

Merci d'avance.

Si je devine bien ton tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="conteneurtableau">
<?php
for ($r=1; $r<=$NbrLignes; $r++){
 
echo'<div id="lignes" style="clear:both;">';
foreach ($list as $item) :
   echo'<div id="colonnes" style="float:left;">' . $item->title . '</div>';
endforeach;
 
}
echo '</div>';
?>

Ca marche aussi mais..

Bonjour sabotage, ta proposition marche, mais enfaite ça ne resout pas tout parceque j'ai omis des point important dans le post:

-j'essaie enfaite de faire un systeme de tableau comme tu l'a bien compris mais ou je definis moi-même le nombre de lignes et de colonnes.

voici ce que j'ai cette fois-ci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<?php 
for ($r=1; $r<=$NbrLignes; $r++){
echo'<div class="lignes" style="clear:both;">';
for ($c=1; $c<=($NbrColonnes); $c++){
foreach ($list as $item) :
echo '<div class="colonnes" style="float:left;">'.$item->title.'</div>';
endforeach;
}
echo '</div>';
}
 
?>

avec mes variables $NbrLignes=2 et $NbrColonnes=4

j'obtient comme résultat mes colonnes multiplié par 4,

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
38
<div id="conteneurtableau">
<div class="lignes" style="clear: both;">
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
</div>
<div class="lignes" style="clear: both;">
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
</div>
</div>

alors que ce que je voudrais vraiment à la fin c'est quelque chose dans cette idee là :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="lignes" style="clear: both;">
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
</div>
<div id="lignes" style="clear: both;">
<div class="colonnes" style="float: left;">News5</div>
<div class="colonnes" style="float: left;">News6</div>
<div class="colonnes" style="float: left;">News7</div>
<div class="colonnes" style="float: left;">News8</div>
</div>

J'espère être suffisament clair : )

Il faut faire tes boucles dans l'autre sens alors :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$colonne = 1;
$newline = '<div class="lignes" style="clear:both;">';
 
echo $newline;
 
foreach ($list as $item) {
 
if ($colonne > $NbrColonnes) {
   $colonne = 1;
   echo "</div>\n" . $newline;
}
else {
  $colonne++;
}
 
echo '<div class="colonnes" style="float:left;">'.$item->title.'</div>';
 
}
 
echo "</div>\n";
?>

Je ne t'ai pas fais l'arret sur $NbrLignes

Bonjour sabotage, j'ai essayé et voici ce que j'obtiens avec la variable $NbrColonnes=2 et 10 elements:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="lignes" style="clear: both;">
<div class="colonnes" style="float: left;">News1</div>
<div class="colonnes" style="float: left;">News2</div>
</div>
<div id="lignes" style="clear: both;">
<div class="colonnes" style="float: left;">News3</div>
<div class="colonnes" style="float: left;">News4</div>
<div class="colonnes" style="float: left;">News5</div>
</div>
<div id="lignes" style="clear: both;">
<div class="colonnes" style="float: left;">News6</div>
<div class="colonnes" style="float: left;">News7</div>
<div class="colonnes" style="float: left;">News8</div>
</div>
<div id="lignes" style="clear: both;">
<div class="colonnes" style="float: left;">News9</div>
<div class="colonnes" style="float: left;">News10</div>
</div>

Bizarre bizarre..

22/08/2010, 11h57
sabotage

C'est un toute bête erreur dans le comptage des colonnes, je te laisse le corriger.

Youhouuu !

Re bonjour, c'est ok j'ai trouvé la solution, la voici pour ceux que ça peut aider (on sait jamais):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <?php $colonne = 0; $newline = '<div class="lignes" style="clear:both;">'; echo $newline; foreach ($list as $item) { if ($colonne >= $NbrColonnes) { $colonne = 1; echo "</div>\n" . $newline; } else { $colonne++; } echo '<div class="colonnes" style="float:left;">'.$item->title.'</div>'; } echo "</div>\n"; ?>
En tout cas, un GRAND MERCI à toi : ) !

J'aurais juste un derniere question:
J'aimerais bien pouvoir récuperer le premier element séparement de la liste, pour faire quelque chose dans ce genre:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="conteneur"> <div id="entete">News1</div> <div class="lignes" style="clear:both;"> <div class="colonnes" style="float:left;">News2</div> <div class="colonnes" style="float:left;">News3</div> <div class="colonnes" style="float:left;">News4</div> <div class="colonnes" style="float:left;">News5</div> </div> <div class="lignes" style="clear:both;"> <div class="colonnes" style="float:left;">News6</div> <div class="colonnes" style="float:left;">News7</div> <div class="colonnes" style="float:left;">News8</div> <div class="colonnes" style="float:left;">News9</div> </div> </div>
en gros, une présentation comme dans les sites de news, aurais-tu un tutoriel qui explique, ou un quelconque lien ? Encore merci à toi : )

23/08/2010, 16h39
husomaniac

C'est bon, j'ai egalement trouvé la solution à ce probleme aussi, il fallait donc utiliser des array_slice. :P