Php tableau div/css

Pook -  
 Pook -
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. Anoen Messages postés 200 Statut Membre 25
     
    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
  2. Pook
     
    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
  3. Pook
     
    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
  4. Anoen Messages postés 200 Statut Membre 25
     
    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
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Pook
     
    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
  7. Pook
     
    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