89 lines
2.3 KiB
CSS
89 lines
2.3 KiB
CSS
|
|
|||
|
|
#vhist-q-graph {
|
|||
|
|
/* Ceci est la classe du UL principal qui contient toute sles autres donn<6E>es */
|
|||
|
|
/* D<>finir un Width et un Height est essentiel, c'est ca qui donne les dimension du graphique */
|
|||
|
|
width: 428px;
|
|||
|
|
height: 200px;
|
|||
|
|
/* Ne pas oublier d'enlever le point qui se trouve a cot<6F> des LI */
|
|||
|
|
list-style: none;
|
|||
|
|
/* le reste n'est que positionnement et esth<74>tique */
|
|||
|
|
position: relative;
|
|||
|
|
margin: 1.1em 0 3.5em;
|
|||
|
|
padding: 0;
|
|||
|
|
background: #DDD;
|
|||
|
|
border: 2px solid gray;
|
|||
|
|
font: 9px Helvetica, Geneva, sans-serif;
|
|||
|
|
}
|
|||
|
|
#vhist-q-graph ul {
|
|||
|
|
/* Une colonne <20>tant un UL dans un UL, on d<>fini les param<61>tres des colonnes */
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
#vhist-q-graph li {
|
|||
|
|
/* Ceci d<>fini les colonnes (largeur, positionnement des b<>ton a l'int<6E>rieur,position du titre...) */
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 150px;
|
|||
|
|
z-index: 2;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
text-align: center;
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
#vhist-q-graph li.vhist-qtr { /* colonnes */
|
|||
|
|
height: 198px;
|
|||
|
|
padding-top: 2px;
|
|||
|
|
/* border-right: 1px dotted #C4C4C4; */
|
|||
|
|
color: #AAA;
|
|||
|
|
border:0; /* sans colonnes */
|
|||
|
|
}
|
|||
|
|
#vhist-q-graph li.vhist-bar {
|
|||
|
|
/* esth<74>tique des batons */
|
|||
|
|
width: 16px;
|
|||
|
|
border: 1px solid;
|
|||
|
|
border-bottom: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
#vhist-q-graph li.vhist-bar p {
|
|||
|
|
/* esth<74>tique de titre dans les b<>tons */
|
|||
|
|
margin: 0px 0 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p.leg { /* legende (sous l'axe horizontal) */
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -18px;
|
|||
|
|
left: 2px;
|
|||
|
|
width: 10px;
|
|||
|
|
color: red;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#vhist-q-graph li.vhist-sent {
|
|||
|
|
/* la position left est importante car le b<>ton 2 a comme left : left(baton1) + espacement. Il faut donc pens<6E> a espacer les b<>ton !! */
|
|||
|
|
left: 5px;
|
|||
|
|
/* esth<74>tique d'un baton en particulier */
|
|||
|
|
background: #DCA;
|
|||
|
|
border-color: #EDC #BA9 #000 #EDC;
|
|||
|
|
}
|
|||
|
|
#vhist-q-graph li.vhist-paid {
|
|||
|
|
/* la position left est importante car le b<>ton 2 a comme left : left(baton1) + espacement. Il faut donc pens<6E> a espacer les b<>ton !! */
|
|||
|
|
left: 77px;
|
|||
|
|
/* esth<74>tique d'un b<>ton en particulier */
|
|||
|
|
background: #9D9;
|
|||
|
|
border-color: #CDC #9B9 #000 #BFB;
|
|||
|
|
}
|
|||
|
|
/* position de la colonne 1 */
|
|||
|
|
#vhist-q-graph #q1 {left: 0;}
|
|||
|
|
/* position de la colonne 2 */
|
|||
|
|
#vhist-q-graph #q2 {left: 150px;}
|
|||
|
|
/* position de la colonne 3 */
|
|||
|
|
#vhist-q-graph #q3 {left: 300px;}
|
|||
|
|
/* position de la colonne 4 */
|
|||
|
|
#vhist-q-graph #q4 {left: 450px; border-right: none;}
|
|||
|
|
|
|||
|
|
.vhist-bar {
|
|||
|
|
background: yellow;
|
|||
|
|
}
|