Affichage en colonnes sans tableaux ni doublons

La méthode usuelle pour afficher des résultats en colonnes avec Spip est d’utiliser le critère {a/b}, parfois associé au critère {doublons}
On trouve ainsi dans la doc

Par exemple : {1/3} affiche le premier tiers des résultats. Ce critère est surtout utile pour présenter des listes sur plusieurs colonnes. Pour obtenir un affichage sur deux colonnes, il suffit de créer une première boucle, affichée dans une case de tableau, avec le critère 1/2 (la première moitié des résultats), puis une seconde boucle dans une seconde case, avec le critère 2/2 (la seconde moitié des résultats).

On peut aussi trouver des infos sur la liste des utilisateurs.

Je vous propose une autre méthode 100% CSS et quelques tests un peu comme sur le site AListapart.

L’exemple suivant permet d’afficher la liste des articles d’une rubrique en trois colonnes.

<B_article_pop>
   <div class="bloc-horizontal">
   <h3>Tous les articles de la rubrique classés par popularité</h3>
     <div class="ma_colonne">
     <ul>
<BOUCLE_article_pop(ARTICLES){id_rubrique}{!par  popularite}>
            <li><a href="#URL_ARTICLE">#TITRE</a> <br /> 
             popularité : #POPULARITE</li>

[
(#TOTAL_BOUCLE|divise{3}|=={#COMPTEUR_BOUCLE}|?{' ',''})
 </ul></div><div class="ma_colonne"><ul>
]
[
(#TOTAL_BOUCLE|divise{1.5}|=={#COMPTEUR_BOUCLE}|?{' ',''})
</ul></div><div class="ma_colonne"><ul>
]
</BOUCLE_article_pop>
      </ul>
      </div>
      </div>
</B_article_pop>

L’astuce de la boucle se trouve dans le test

[
(#TOTAL_BOUCLE|divise{3}|=={#COMPTEUR_BOUCLE}|?{' ',''})
 </ul></div><div class="ma_colonne"><ul>
]

Ce test compare TOTAL_BOUCLE|divise{3} avec #COMPTEUR_BOUCLE , lorsque la comparaison est vraie :
-  on ferme la première liste,
-  on ferme le div de la première colonne ,
-  on ouvre le nouveau div,
-  on ouvre la deuxième liste.

Le filtre divise{3} est installé dans mes_fonctions.php3, il permet de retourner la partie entière de la division de #TOTAL_BOUCLE par 3, c’est à dire le premier tiers des éléments.

function divise($texte,$divise){
    $s="";
    $s=ceil($texte / $divise);
    return $s;
    }

Le deuxième test

[
(#TOTAL_BOUCLE|divise{1.5}|=={#COMPTEUR_BOUCLE}|?{' ',''})
 </ul></div><div class="ma_colonne"><ul>
]

compare la valeur courante de #COMPTEUR_BOUCLE avec #TOTAL_BOUCLE|divise{1.5}, c’est à dire les deux tiers de la liste.

La classe ma_colonne à ajouter dans votre feuille de style peut ressembler à

.ma_colonne{
      float:left;
      width:31%;
      background-color: white;
      margin-bottom:0%;
      margin-top:0px;
      margin-left:1%;
      padding:0%;
}

Vous pouvez en voir l’utilisation sur le site cancer-familles
en bas de la page