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>]
Discussions by date of activity
3 discussions
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é )
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
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.
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
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 :
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.
Follow the comments:
|
