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 par date d’activité
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.
Répondre à ce 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
Répondre à ce 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à
Répondre à ce message
Ajouter un commentaire
Suivre les commentaires :
|
