Les graphiques barres
Intro
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 énoncés | valeur.
J'ai donc choisi de prendre de créer une liste de définitions (DD :liste , DT : énoncé DL : valeur).
<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ée 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 procè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.
<dl><dt>Equipe 6</dt><dd style="width:56%;background-color:red">50%</dd></dl>Pour cette étude, j'ai opté pour n'avoir que des pourcentages de 10 en 10 :
.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;
}Code css générique pour les graphiques verticaux :.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;
}
Graphe n°1
Définition
Le graphe n°1 : libellé à gauche, les barres alignées à gauche et les pourcentages à droite à l'intérieur des barres.
- Equipe 1
- 20%
- Equipe 3
- 80%
- Equipe 2
- 20%
- Equipe 4
- 30%
- Equipe 5
- 60%
- Equipe 6
- 50%
Code css :#graphiqueHlr{
border:1px solid red;
width:400px;
position:relative;
border:1px solid #e5ddd5;
padding:5px;
}
#graphiqueHlr dl,#graphiqueHlr dt,#graphiqueHlr dd{
margin:0;
padding:0;
display:block;
vertical-align:middle;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-size:0.9em;
height:18pt;
line-height:18pt;
}
#graphiqueHlr dl{
position:relative;
left:100px;
width:300px;
margin-top:1px;
_margin-top:-1px;/*Internet Explorer*/
}
#graphiqueHlr dt{
position:absolute;
left:-100px;
width:100px;
border:1px solid #cccccc;
border-left:none;
border-right:none;
font-weight:bold;
}
#graphiqueHlr dd{
position:relative;
left:0px;
top:0px;
border:1px solid #000;
text-align:right;
font-size:0.9em;
padding-right:0.2em;
padding-left:-0.2em;
}
Graphe n°2
Définition
Le graphe n°2 : libellé à gauche, les barres alignées à gauche et les pourcentages à droite à l'extérieur des barres.
- Equipe 1
- 20%
- Equipe 3
- 80%
- Equipe 2
- 20%
- Equipe 4
- 30%
- Equipe 5
- 60%
- Equipe 6
- 50%
Code css :#graphiqueHrl{
display:block;
width:400px;
height:auto;
position:relative;
border:1px solid #e5ddd5;
padding:5px;
clear:right;
}
#graphiqueHrl dl,#graphiqueHrl dt,#graphiqueHrl dd{
margin:0;
padding:0;
display:block;
vertical-align:middle;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-size:0.9em;
height:18pt;
line-height:18pt;
}
#graphiqueHrl dl{
position:relative;
left:0px;
top:0px;
width:300px;
clear:both;
overflow:visible;
}
#graphiqueHrl dt{
position:absolute;
right:-100px;
top:-1px;
width:100px;
border:1px solid #cccccc;
border-left:none;
border-right:none;
font-weight:bold;
text-align:left;
text-indent:0.5em;
}
#graphiqueHrl dd{
float:right;
position:relative;
left:0;
top:0;
border:1px solid #000;
text-align:left;
font-size:0.9em;
padding-right:-0.2em;
padding-left:0.2em;
margin-top:-1px;
}
Graphe n°3
Définition
Le graphe n°3 a les barres sont misent verticalement avec les libellés au-dessus.
Pour Internet Explorer nous utilisons la propriété writing-mode pour les autres navigateurs une image de fond.
- Equipe 1
- 20%
- Equipe 3
- 80%
- Equipe 2
- 20%
- Equipe 4
- 30%
- Equipe 5
- 60%
- Equipe 6
- 50%
Code css :#graphiqueVtb{
display:block;
width:215px;
height:450px;
position:relative;
border:1px solid #e5ddd5;
padding:5px;
clear:both;
}
#graphiqueVtb dl,#graphiqueVtb dt,#graphiqueVtb dd{
margin:0;
padding:0;
display:block;
vertical-align:middle;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-size:0.9em;
width:25pt;
line-height:25pt;
text-align:center;
}
#graphiqueVtb dl{
float:left;
position:relative;
height:400px;
left:0px;
margin-left:1px;
_margin-left:-1px;/*Internet Explorer*/
}
#graphiqueVtb dt{
clear:both;
position:relative;
top:0px;
float:left;
height:100px;
border:1px solid #cccccc;
border-top:none;
border-bottom:none;
font-weight:bold;
text-align:left;
}
#graphiqueVtb dd{
clear:both;
font-size:0.8em;
position:relative;
top:0px;
border:1px solid #000;
left:0px;
}
.equipe1{
background-image:url(/img/exemple/equipe1.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl; /*Internet Explorer*/
_background-image :none;/*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0;/*Internet Explorer*/
}
.equipe2{
background-image:url(/img/exemple/equipe2.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl;/*Internet Explorer*/
_background-image :none;/*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0;/*Internet Explorer*/
}
.equipe3{
background-image:url(/img/exemple/equipe3.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl;/*Internet Explorer*/
_background-image :none; /*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0; /*Internet Explorer*/
}
.equipe4{
background-image:url(/img/exemple/equipe4.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl; /*Internet Explorer*/
_background-image :none; /*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0; /*Internet Explorer*/
}
.equipe5{
background-image:url(/img/exemple/equipe5.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl; /*Internet Explorer*/
_background-image :none; /*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0; /*Internet Explorer*/
}
.equipe6{
background-image:url(/img/exemple/equipe6.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl; /*Internet Explorer*/
_background-image :none; /*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0; /*Internet Explorer*/
}
Graphe n°4
Définition
Le graphe n°4 a les barres sont misent verticalement avec les libellés au-dessous.
Pour Internet Explorer nous utilisons la propriété writing-mode pour les autres navigateurs une image de fond.
- Equipe 1
- 20%
- Equipe 3
- 80%
- Equipe 2
- 20%
- Equipe 4
- 30%
- Equipe 5
- 60%
- Equipe 6
- 50%
Code css :#graphiqueVbt{
display:block;
width:210px;
height:400px;
position:relative;
border:1px solid #e5ddd5;
padding:5px;
clear:both;
}
#graphiqueVbt dl,#graphiqueVbt dt,#graphiqueVbt dd{
margin:0;
padding:0;
display:block;
vertical-align:middle;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-size:0.9em;
width:25pt;
line-height:25pt;
text-align:center;
}
#graphiqueVbt dl{
float:left;
position:relative;
height:300px;
left:0px;
top:0px;
margin-left:1px;
_margin-left:-1px;
}
#graphiqueVbt dt{
position:absolute;
top:300px;
height:100px;
border:1px solid #cccccc;
border-top:none;
border-bottom:none;
font-weight:bold;
}
#graphiqueVbt dd{
font-size:0.8em;
position:relative;
bottom:0px;
border:1px solid #000;
}
.tailleh20 dd{
height:20%;
background-color:#ffd82e;
top:80%;
}
.tailleh30 dd{
height:30%;
background-color:#ffc32a;
top:70%;
}
.tailleh50 dd{
height:50%;
background-color:#fe801e;
top:50%;
}
.tailleh60 dd{
height :60%;
background-color:#fe6719;
top:40%;
}
.tailleh80 dd{
height:80%;
top:20%;
background-color:#fe3210;
}.equipe1{
background-image:url(/img/exemple/equipe1.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl; /*Internet Explorer*/
_background-image :none;/*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0;/*Internet Explorer*/
}
.equipe2{
background-image:url(/img/exemple/equipe2.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl;/*Internet Explorer*/
_background-image :none;/*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0;/*Internet Explorer*/
}
.equipe3{
background-image:url(/img/exemple/equipe3.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl;/*Internet Explorer*/
_background-image :none; /*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0; /*Internet Explorer*/
}
.equipe4{
background-image:url(/img/exemple/equipe4.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl; /*Internet Explorer*/
_background-image :none; /*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0; /*Internet Explorer*/
}
.equipe5{
background-image:url(/img/exemple/equipe5.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl; /*Internet Explorer*/
_background-image :none; /*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0; /*Internet Explorer*/
}
.equipe6{
background-image:url(/img/exemple/equipe6.gif);
background-repeat:no-repeat;
background-position:center;
writing-mode : tb-rl; /*Internet Explorer*/
_background-image :none; /*Internet Explorer*/
text-indent:-99999px;
_text-indent: 0; /*Internet Explorer*/
}