Le but de cette étude de style est de creer à partir
d'un seul code HTML ou XHTML divers graphiques barre
sans toucher code HTML.
Navigateurs de test Internet Explorer 6, Netscape 7.1, FireFox 2
Nos données seront de types enoncé | valeur.
J'ai donc choisie de prendre de créer une liste de définitions (
DD :liste ,
DT : énoncé
DL : valeur).
Voici le code de HTML de base :
Exemple de code :
<div id="graphiqueVtb">
<dl class="tailleh20"><dt class="equipe1">Equipe 1</dt><dd>20%</dd></dl>
<dl class="tailleh80"><dt class="equipe3">Equipe 3</dt><dd>80%</dd></dl>
<dl class="tailleh20"><dt class="equipe2">Equipe 2</dt><dd>20%</dd></dl>
<dl class="tailleh30"><dt class="equipe4">Equipe 4</dt><dd>30%</dd></dl>
<dl class="tailleh60"><dt class="equipe5">Equipe 5</dt><dd>60%</dd></dl>
<dl class="tailleh50"><dt class="equipe6">Equipe 6</dt><dd>50%</dd></dl>
</div>Nous avons besoin d'une classe par équipe pour les barres verticales.
La liste est englobé dans une balise div qui a pour but de rassembler les listes qui vont constituer le graphique et me permettre de cibler les listes grâce à son ID.
Chaque balise DL poccède une classe qui correspond à un pourcentage.
Si les pourcentages ne sont pas prédéfinis, il est possible de mettre la taille dans la balise DD.
Exemple de code :
<dl><dt>Equipe 6</dt><dd style="width:56%;background-color:red">50%</dd></dl>En choissisant cette technique vous ne pourrez pas faire des graphiques verticaux, sans changer le code HTML. Idem pour la couleur de fond.
Pour cette étude, j'ai opté pour n'avoir que des pourcentage de 10 en 10 :
Code css générique pour les graphiques horizontaux :
Exemple de code :
.taille20 dd{
width:20%;
background-color:#ffd82e;
}
.taille30 dd{
width:30%;
background-color:#ffc32a;
}
.taille50 dd{
width:50%;
background-color:#fe801e;
}
.taille60 dd{
width:60%;
background-color:#fe6719;
}
.taille80 dd{
width:80%;
background-color:#fe3210;
}Exemple de code :
.tailleh20 dd{
height:20%;
background-color:#ffd82e;
}
.tailleh30 dd{
height:30%;
background-color:#ffc32a;
}
.tailleh50 dd{
height:50%;
background-color:#fe801e;
}
.tailleh60 dd{
height :60%;
background-color:#fe6719;
}
.tailleh80 dd{
height:80%;
background-color:#fe3210;
}