SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 103 visiteurs en ce moment

Accueil > Squelettes > Tutoriels pour squelettes > Affichage en colonnes sans tableaux ni doublons

Affichage en colonnes sans tableaux ni doublons

11 octobre 2005 – par rpapa – commentaires

3 votes

Une petite boucle permettant l’affichage d’une liste de résultats en colonnes sans utiliser les tableaux.

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.

L’astuce de la boucle se trouve dans le test

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.

Le deuxième test

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 à

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.

Dernière modification de cette page le 9 décembre 2006

Retour en haut de la page

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 !

    • Le 9 août 2017 à 14:08, par Julien Lanfrey En réponse à : Affichage en colonnes sans tableaux ni doublons

      La note des admins précise que d’un point de vue sémantique, le code génère trois listes (chaque colonne est une liste (indiquée par <ul></ul> alors que sémantiquement, il ne devrait y en avoir qu’une seule.

      Il s’agit en effet bien d’une seule liste (celle des articles de la rubrique) - d’un point de vue sémantique - et que l’on cherche à représenter en 3 colonnes - d’un point de vue de la mise en forme.

      Pour avoir une seule liste <ul></ul> qui s’affiche en 3 colonnes, il existe différentes solutions 100% css comme faire « flotter » les <li> en leur imposant une largeur de 33% par exemple (cf. exemple sur stackoverflow ou sur cet autre article)

      -  On peut aussi utiliser une propriété table-cell à la place des flottants.
      -  CSS3 a également apporté de nouvelles solutions, notamment avec la propriété column-count - il s’agit après d’une histoire de support navigateur.

    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 ?
  • [Se connecter]

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. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • GIS 4

    11 août 2012 – 1524 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • ScolaSPIP 4

    19 janvier 2016 – 383 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Jeux pour SPIP 3

    27 juillet 2012 – 53 commentaires

    Un portage pour SPIP 3 du plugin Jeux a été fait. Explications et nouveautés. Cet article concerne une mise à jour du plugin Jeux dont la description complète est disponible ici : Des jeux dans vos articles !. Le code du plugin Jeux est un code (...)

  • Plugin Vidéo(s)

    23 novembre 2010 – 704 commentaires

    Interface de gestion et modèle d’insertion des vidéos : Dailymotion Vimeo Youtube Modèle de la balise HTML5 video avec alternative flash html5media : Lecture HTML5/Flash pour tout navigateur des fichiers MP4/H264/Ogg/WebM/Mkv Support mobile, iPad, (...)

  • Vidéo Accessible

    6 avril 2011 – 168 commentaires

    Un plugin pour faciliter la diffusion de vidéos accessibles. Accessibilité des vidéos Accessibilité de la vidéo Afin d’être pleinement accessible, une vidéo (composée d’images et de sons) doit répondre à plusieurs critères. Le critère de base est (...)