Un graphique de popularité

11 February 2006 – 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>]

updated on 23 May 2007

Discussion

5 ans 1 an 3 mois Sans limite
Last published
Filtrer

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

Comment on this article

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