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).
Voici le code de HTML de base : <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.
Code HTML : <dl><dt>Equipe 6</dt><dd style="width:56%;background-color:red">50%</dd></dl>
En choisissant 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 pourcentages de 10 en 10 :
Code css générique pour les graphiques horizontaux : .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 : 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;
}
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 : Exemple de code : #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 : Exemple de code : #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 : Exemple de code : #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 : Exemple de code : #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*/
}
Définitions annexes Définitions HTML annexes dd
La balise HTML et XHTML DD permet de définir un résumé d'une définition dans une liste de définitions. <DD>La balise HTML et XHTML DL contient tous le...[ dd ] dt
La balise HTML et XHTML DT permet de définir un titre d'une définition dans une liste de définitions.<DT>La balise HTML et XHTML DL contient tous les ...[ dt ] dl
La balise HTML et XHTML DL contient tous les éléments de la liste de définition.<DL> </DL> Le mot que l'on veut définir est précédé de <DT>. La défini...[ dl ]