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:
<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>

et j'obtiens ceci:

<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>

voici mon code:

<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>

Pouvez-vous m'aider s'il vous plait ? Tout type d'interventions de votre part est la bienvenue. Merci d'avance à vous.

6 réponses

  1. Bonjour,
    Il faut que tu ferme ta div dans le foreach :)
    for ($c=1; $c<=($NbrColonnes); $c++){
    foreach ($list as $item) :
    echo '<div id="colonnes" style="float:left;">'.$item->title.'</div>';
    endforeach;
    } 
    1
    1. Merci pour ta reponse anoen, mais j'ai un autre souci maintenant x D, le résultat est multiplie par le nombre de colonnes ?

      ca donne ca:
      <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 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 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 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>

      et quand j'ajoute par exemple la valeur 2 à la variable $NbrLignes il me multiplie le résultat ci-dessus par 2:

      <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 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 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 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 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 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 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 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>

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

      <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 id="lignes" style="clear: both;">
      <div id="colonnes" style="float: left;">News5</div>
      <div id="colonnes" style="float: left;">News6</div>
      <div id="colonnes" style="float: left;">News7</div>
      <div id="colonnes" style="float: left;">News8</div>
      </div>

      Merci d'avance : )
      0
      1. Merci ! 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:

        <?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,

        <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à :

        <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 et encore merci pour ta réponse : )
        0
        1. Effectivement, je pense que c'est parce que tu as 2 for, le foreach récupère déjà tes colonnes mais ton for juste avant les multiplient.
          Le foreach va parcourir ta bdd et renvoyer tous les résultats correspondants à la requête un par un, tu n'as pas besoin de l'inclure dans une boucle supplémentaire pour créer tes colonnes il le fera tout seul.

          <?php 
          for ($r=1; $r<=$NbrLignes; $r++){
          echo'<div class="lignes" style="clear:both;">';
          foreach ($list as $item) :
          echo '<div class="colonnes" style="float:left;">'.$item->title.'</div>';
          endforeach;
          echo '</div>';
          }
          


          Ca devrait être bon avec ça, dis moi si tu as un problème ;)
          0
          1. Bonjour Anoen, resultat du test avec ta propostion:
            <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;">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>


            entretemps j'ai essayé ceci, qui marche "presque" parfaitement:

            <?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";
            ?>


            - Si ce n'est que le resultat est un peu bizarre:
            <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>


            Merci encore : )
            0
            1. Re bonjour, j'ai fini par trouver la solution à mon probleme, merci encore : )

              Je la donne pour ceux que ça interesse:

              <?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";
              ?>
              0