Diviser une liste de li en plusieurs columns avec ul

13 déc. 2016, 03:01

Bonjour,

J'utilise un script qui peut me lister toute les categories de mon site de cette facon:

<categories min_gallery_count=1 order=name>
<li><!--CATEGORY--></li>
</categories>

Cela donne ainsi:

Code : Tout sélectionner

<li>category 1</li>
<li>category 2</li>
<li>category 3</li>
<li>category 4</li>
etc...

J'aimerai diviser cette liste en plusieurs colonnes en utilisant <ul> pour donner ainsi:

Code : Tout sélectionner

<ul>
<li>category 1</li>
<li>category 2</li>
</ul><ul>
<li>category 3</li>
<li>category 4</li></ul>
etc...

Je souhaite diviser cette liste en un nombre de colonnes precis tout en connaissant le nombre de categories $categoriesnumber.

Pour le moment je comprends que je dois diviser

Code : Tout sélectionner

$s = ceil($categoriesnumber / 2)

Merci pour votre aide.

13 déc. 2016, 11:59

Bonjour,

plutôt que de te trimballer un arrondis je te conseille d'utiliser le magnifique modulo

if($categoriesnumber % 2 === 0)
{
    echo "Le nombre est pair";
}
else
{
    echo "Le nombre est impair;
}

Pour info le résultat d'un modulo, est en faite le reste de la division euclidienne de l'un par l'autre (3%2 = 1, 4%2 = 0, 5%2 = 1, 6%2 = 0, ....)

Cela devrait grandement te faciliter la tâche

13 déc. 2016, 12:17

le 2ème paramètres du modulo devra bien être l'arrondi en question,

dans la boucle d'affichage, si $i est incrémenté à chaque fois et $s est ton arrondi (défini avant la boiucle)
ajoute une ligne comme celle-ci

if ($i % $s == 0) echo '</ul><ul>';

13 déc. 2016, 13:10

Bonjour,

En CSS 3, le mode multi-colonne a fait son apparition et est à mon sens plutôt pratique pour gérer ce type de besoin, facilitant également un affichage responsive

ul {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
li {
    display: inline-block; 
}

Diviser une liste de li en plusieurs columns avec ul

Qui est en ligne