Histogramme, barre d'avancement en CSS (1)

Publié le par PêUR

Peut-être cherchez-vous à mettre en valeur un état d'avancement ou des données d'une manière visuelle?

Si jusqu'à présent vous utilisiez une image d'un graphique et que vous en avez assez de modifier votre image à chaque changement de donnée, cet article est pour vous!

Cette série d'article va vous permettre de réaliser vos barres d'avancement ou vos histogrammes uniquement en HTML et CSS.

Sommaire:

• Exemple
• CSS
• Important, videz votre cache
• HTML
• Largeur de la barre, largeur du texte, attention danger!
• Références
• Liens utiles

 

Exemple

Mon cerveau fontionne à:

36%

 

CSS

Vous devez, en premier lieu, ajouter le style de la barre d'avancement dans votre CSS. Pour les Over-Bloguiens, vous pouvez rajouter ces lignes au niveau de /*--- articles ---*/:

CSS

.graphe {
     position: relative; /* IE hack */
     width: 200px;
     border: 1px solid #B1D632;
     padding: 2px;
     margin: 0 auto;
}

.graphe .barre {
     display: block;
     position: relative;
     background: #B1D632;
     text-align: center;
     color: #333;
     height: 2em;
     line-height: 2em;
}

Si vous voulez personnaliser ce style, voici l'explication des propriétés,

Pour la classe graphe (le contenant de la barre d'avancement):

  • position: ne modifiez pas sa valeur. Cette règle est utile et nécessaire pour Internet Explorer.
  • width: détermine la largeur du contenant de la barre.
  • border: détermine l'épaisseur, le style et la couleur de la bordure du contenant.
  • padding: détermine l'espace entre le contenant et la barre d'avancement.
  • margin: permet de positionner le graphique sur votre page. Avec les valeurs 0 auto le contenant sera centré, avec 0 0 0 auto le contenant sera aligné à droite et avec les valeurs 0 auto 0 0 le contenant sera aligné à gauche.

Pour la classe barre (la barre d'avancement):

  • display: ne modifiez pas sa valeur. Cette règle permet d'appliquer une largeur width à la barre.
  • position: ne modifiez pas sa valeur.
  • background: détermine la couleur de la barre d'avancement. Bien sûr vous pouvez aussi utiliser cette propriété avec un motif répétitif en lui donnant une valeur url: url(motif.gif).
  • text-align: détermine l'alignement du texte (ici 36%) dans la barre d'avancement. Les valeurs possibles sont left, center et right, respectivement à gauche, au centre et à droite.
  • color: qualifie la couleur du texte de la barre d'avancement.
  • height: détermine la hauteur de la barre d'avancement. Dans l'exemple, 2em applique une hauteur de 2 fois la taille de la police.
  • line-height: dans le cas présent, cette propriété permet que le texte soit centré verticalement par rapport à la hauteur de la barre d'avancement. Pour qu'il y est centrage verticale, la valeur de cette propriété doit être égale à celle de la propriété précédente width..

Important, videz votre cache

Afin que votre feuille de style modifiée soit prise en compte par votre navigateur, vous devez en vider le cache. Allez sur votre blog et ppuyez sur les touches Ctrl + F5 de votre clavier. Cette opération est à faire une seule fois. Vos visiteurs ayant déjà visité votre blog devront eux aussi faire cette manipulation, n'oubliez pas de les prévenir si vous voulez qu'ils voient la même chose que vous :)

HTML

Maintenant que vous avez créé le style de votre futur barre, créons la barre d'avancement elle même. Vous pouvez insérer le code HTML de votre barre dans n'importe quelle partie de votre blog supportant le mode source (Entête, Pied de pages, modules de texte libre et article). Le code HTML à insérer est le suivant:

HTML

<div class="graphe">
    <strong class="barre" style="width: 36%;">36%</strong>
</div>

Le principe est simple, on utilise une valeur en pourcentage de la propriété width pour donner une largeur représentative à la barre d'avancement.

C'est simple, si vous souhaitez une barre d'avancement à 50% et que le texte de la barre soit «la moitié» il suffit de remplacer, dans le code ci-dessus, le 36% de la balise <strong> par 50% et le 36% entre les balises <strong>...</strong> par La moitié. On obtient:

Part de visiteur de ce blog utilisant Firefox (c'est vrai!):

La moitié

 

Largeur de la barre, largeur du texte, attention danger! (En même temps y a plus grave... Mais bon, j'aime bien les titres racoleurs)

Faite attention au texte que vous mettez dans la barre d'avancement, en effet si le texte est plus large que ce que devrait être la barre d'avancement, elle prendra la largeur du texte. Ci-dessous un exemple pour mettre en évidence ce phénomène:

Cette barre est à 3% sans texte:

Cette barre est à 3% et comporte un texte plus large que la barre:

3%

Pour y remédier, 3 possibilités:

  • Augmenter la largeur du contenant en modifiant la propriété width de la classe graphe.
  • Modifier l'aspect du texte, en diminuant la taille de la police (font-size), sa graisse (font-weight), l'espacement des lettres (letter-spacing), etc. Ces propriétés sont à ajouter dans la classe barre.
  • Ne pas mettre de texte.

 

Références

Le principe exposé dans cet article est honteusement pompé sur Apples to oranges . J'ai toutefois essayé d'y apporter une plus-value en expliquant le principe de fonctionnement, la manière de modifier l'aspect de la barre, en supprimant du code inutile, en ajoutant l'alignement du contenant et en prévenant d'un éventuel problème de largeur de texte.

Vous avez dû constater que le titre de cet article est sufixé par «(1)»... Autant avoir honte jusqu'au bout... À cet article suivront les autres histogrammes exposés par Apples to oranges .

 

Liens utiles

Voici des liens qui peuvent vous aider à comprendre cet article ou à appronfondir certaines notions:

 

Publié dans CSS

Commenter cet article

SuperBanane 30/03/2007 17:01

Ouah, je tombe par hasard dessus alors que ça faisait un mois qui je cherchai à faire ça sans PHP et Javascript ! Avec en plus tes petites infos-bulles par dessus, c'est parfait !
Un grand merci !

=> Ce que ça donne :
http://idata.over-blog.com/0/49/32/51/avantapres.jpg

PêUR 30/03/2007 21:11

Très beau résultat :)

liesus 24/05/2006 13:28

Je voulais te dire qu'on ne voyait pas la barre d'avancement sous NetScape 7.

Peut-être y remedieras-tu...j'ai dû aller sur IE pour la voir..(les voir :) )

A+, je t'ai posé une quetion sur ton article de "posage" de questions qui n'ont aucun lien avec les autres articles...

PêUR 24/05/2006 21:19

Et bien je suis étonné que cela fonctionne avec FF et pas Netscape 7... faut que je vois, merci ;-)
Oui j'ai vu, c'est répondu!!!

celine [palmito] 13/05/2006 14:52

au fait, petite info au passage : le design du fan club est compltement fini! je pense que tu serais fier ;)
bizou et bon week end tit pêurounet!!

http://fanclub.modos.over-blog.com (au cas où tu ne l'as plus! hihi!)

PêUR 13/05/2006 15:59

Un commentaire à cette adresse

miss Trop 12/05/2006 23:00

Tes idées j'ai toujours envie de les essayer... mais je me demande bien ce que je pourrais trouver comme idée cette fois...
Pourcentage de tri des photos d'Alsace ?? ;)

PêUR 13/05/2006 13:51

Huhuhuu, PêUR tout rouge!
Ben, peut-être: Pourcentage de photo réussi ou pourcentage de photo panoramique ;-)
PS: j'ai pas spammer ta boite, j'ai attendu sagement que tu rentres de vacances. J'attend avec impatience de voir les photos du séjour!
 

celine [palmito] 12/05/2006 15:47

quoi??? pas de solution???!!
pfff suis deçue !!!! lol!
bon pour le reste : mail envoyé ;)
bizouu xx
palmito

PêUR 12/05/2006 21:59

:-)