Un graphique de popularité

Published : 11 February 2006 – updated on 21 December 2021 – by mortimer – 5 commentaires

1
2
3
4
5
1 vote
Voici un petit morceau de CSS et de code SPIP pour afficher la popularité d’un article de façon graphique.

L’article sur les graphiques en CSS donne un très bon code CSS pour faire des “barres” graphiques sans perdre l’accessibilité ni introduire trop de code HTML.

Le premier exemple s’adapte très facilement à l’affichage de la popularité d’un article. Il vous suffit de placer le code suivant dans votre feuille de style (par exemple habillage.css):

.graph { 
   position: relative; /* IE is dumb */
   width: 200px; 
   border: 1px solid #B1D632; 
   padding: 2px; 
}
    .graph .bar { 
        display: block;
        position: relative;
        background: #B1D632; 
        text-align: center; 
        color: #333; 
        height: 2em; 
        line-height: 2em;            
    }
         .graph .bar span { position: absolute; left: 1em; }

Ensuite, dans votre squelette (par exemple resume.html ou article.html) placez, dans une boucle article, le code suivant:

[<div class="graph">
    <strong class="bar" style="width: #POPULARITE%;">(#POPULARITE)%</strong>
</div>]

Discussion

5 years 1 year 3 months Without limit
par date
Filter

3 discussions

  • 1
    neofutur

    1 simple
    2 rapide
    3 propre
    4 efficace

    excellent, merci beaucoup pour cette contrib que j’ai immediatement ajoute par defaut dans le squelette CahierSpip
    ( parfait pour les pages rubriques, plan et résumé )

    • Athama

      Vous pouvez voir ici l’intégration de cette contrib CSS dans l’affichage du résultat de sondage avec le module d’Artego : voir à la page d’accueil d’infosimmo.

    Reply to this message

  • 1
    Bionet

    Très sympatique et super simple, je l’ai couplé avec la contrib qui permet d’afficher les pertinences de recherche (moteur de recheche interne à SPIP).

    Mais, car il y a un “mais”, cela reste problèmatique lorsqu’on arrive en dessous des 15% car la barre est alors trop petite pour accepter l’écriture “15%” et cela renvoi le 5 et le % à la ligne.

    Si quelqu’un connaît la solution au niveau des CSS pour régler ce problème je serais évidemment preneur.

    • pit

      Gerald
      bonsoir
      je n’arrive pas à lancer SPIP en local pour débuter
      j’arrive à le télécharger et puis je ne sais pas comment poursuivre

    Reply to this message

  • BOUCHONNEAU

    salut

    c’est genial et je l’utilise pour mon site
    Voir mon site

    attention aux crochets [ et ] car je les ai enlevés.
    voilà

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom