Mise en page éléments BDD Résolu

Question

Bonjour, J'enregistre les articles de mon site dans une BDD. Jusqu'à présent, je les affichais sous la forme d'un tableau simple :

texte de l'article

Avec la bonne requête et le bon code, mes articles étaient affichés l'un sous l'autre. Tout allait bien. Aujourd'hui, je souhaiterais les afficher sous forme de grille (2 lignes, 3 vignettes par ligne), comme sur le wordpress suivant : http://wpexplorer-demos.com/pronto/ Plus concrètement, j'aimerais que le dernier article publié s'affiche dans la vignette en haut à gauche, l'avant-dernier dans la suivante... Je n'arrive pas à envisager de quelle manière ça pourrait se faire sans que je décale tout manuellement à chaque nouvel article. J'espère avoir été assez claire dans ma demande... Merci d'avance à ceux qui pourront m'aider ! :) Configuration: Windows 7 / Firefox 43.0

jordane45 · Answer

Bonjour,

Pour afficher le dernier en premier .. etc....  il te suffit de jouer avec un ORDER BY DESC (je te laisse chercher sur le net)

jordane45 · Answer

Je vais essayer de reformuler autrement car là .. ça ne me semble pas clair ....
Tu veux, simplement, afficher 3 "vignettes" par ligne ?

- pour ce qui est de la "vignette" en elle même... il peut s'agir d'une simple div contenant ton tableau par exemple

- Pour ensuite passer à la ligne après 3 vignettes... il te suffit d'utiliser un modulo 3 et une variable que tu incrémentes au fur et à mesure que tu affiches tes articles dans ta boucle.

Par exemple :

$cpt = 1; 
$nbVignetteparLigne = 3; //compteur servant à calculer le nb de vignettes par ligne

//boucle pour simuler tes articles...
for($i=0;$i<=12;$i++){
 $modulo = $cpt%$nbVignetteparLigne;
 echo "<div id='article_$i' style='min-height:200px;width:200px;margin:10px;padding:12px;border: 5px solid red;display:inline-block'>
         Article Numéro : $i 
	 <br>$modulo
       </div>";
 
   if(!$modulo){
    echo "<br>";
   }
  $cpt++;

}

Article Numéro : $i
$modulo

"; if(!$modulo){ echo "
"; } $cpt++; }

Mise en page éléments BDD

2 réponses

Votre réponse