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

P.-S.

Note des Admins pour les fanatiques de la sémantique : cette méthode est intéressante, mais, pour les fanatiques de la sémantique, elle est ’incorrecte’, puisqu’on a 3 listes successives pour la même chose (des articles). Le découpage en 3 listes est artificiel. On pourra donc préférer une méthode basée sur desflottants.

Vos commentaires

# Le 16 octobre 2005 à 19:22, par ? En réponse à : Affichage en colonnes sans tableaux ni doublons

Bonjour, je ne comprends pas la remarque des admins.... cette fonction affiche bien les articles en divisant la liste en 3 colonnes... comme annoncé dans l’article ? C’est quoi la fonctionnalité proposé par les admins, je suis curieux !

Répondre à ce message

# Le 15 octobre 2005 à 00:25, par rpapa En réponse à : Affichage en colonnes sans tableaux ni doublons

j’avais pas vu le commentaire des admins à ma contrib.

j’attends de voir une représentation d’une liste en trois colonnes avec des flottants

Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message

Ajouter un document

gif, jpg, png

Ça discute par ici

Le Couteau Suisse

4 mai 2007 – 1349 commentaires

Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

FullCalendar

7 avril 2011 – 78

Créez des calendriers jQuery à partir de vos articles, d’un agenda Google ou de la base de donnée SPIP.

Plugin SEO

6 août 2009 – 96

SEO est un plugin qui ajoute la possibilité d’insérer manuellement où vous le souhaitez ou de manière automatique dans la partie de votre site web : meta tags, URL canonique, Google webmaster tools Meta Code et Google Analytics javascript. Il est (...)

SpipService

11 mai – 12

SpipService est un outil permettant d’actualiser un site Spip depuis n’importe quel environnement. Ce plugin permet à un service tiers de gérer le contenu du système via des services web (WebService). « SpipService est une interface entre vous et le (...)

Formulaire d’ajout/modification d’articles côté public à partir de SPIP2.1

2 janvier – 12

A partir de SPIP 2.1, et plus encore en SPIP3, plus besoin de plugin ou procédure compliquée pour l’édition côté public de vos articles. Une illustration de possibilités, adaptable pour tous les objets SPIP. La base Elle est dans la documentation de (...)

# Le 16 octobre 2005 à 19:22, par ? En réponse à : Affichage en colonnes sans tableaux ni doublons

Bonjour, je ne comprends pas la remarque des admins.... cette fonction affiche bien les articles en divisant la liste en 3 colonnes... comme annoncé dans l’article ? C’est quoi la fonctionnalité proposé par les admins, je suis curieux !

Répondre à ce message
# Le 15 octobre 2005 à 00:25, par rpapa En réponse à : Affichage en colonnes sans tableaux ni doublons

j’avais pas vu le commentaire des admins à ma contrib.

j’attends de voir une représentation d’une liste en trois colonnes avec des flottants

Répondre à ce message

SPIP-Contrib

Affichage en colonnes sans tableaux ni doublons

P.-S.

Rubriques

Derniers commentaires

Compatibilité

Tutoriaux pour squelettes

Vos commentaires

Répondre à cet article

Ça discute par ici

Le Couteau Suisse

FullCalendar

Plugin SEO

SpipService

Formulaire d’ajout/modification d’articles côté public à partir de SPIP2.1

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN