CSS graphique barre

Version imprimable

25/03/2015, 16h45
Fredo8

CSS graphique barre

Salut,

Je suis en train de trouver un graphique pour mes stats.
J'ai trouver un petit script bien sympa et facile à utiliser sur un autre site.

Cela affiche les barre à l'horizontale et j'aimerais les mettre à la verticale.
Dans le CSS, j'ai bien tenté d'inversé width avec height (ouais mon niveau en CSS n'est pas bon) mais ça ne marche pas.

Quelque peut-il m'aider ?

Merci d'avance
25/03/2015, 16h59
black-hawk-down

Salut,

Un peu plus de détails autre que "ça ne marche pas" et ton code, ça serait pas mal.
25/03/2015, 17h18
Fredo8

"ça ne marche pas" => ba n'affiche pas la barre vertical, mais soit carré/rectangle
26/03/2015, 09h55
black-hawk-down

Comme le lien a été supprimé, tu pourrais mettre ton code du coup ?

Oki je met le code :

Coté HTML/PHP :

Code:

1
2
3
4
5
6
7
<div class="stats">
    <ul>
        <li>test 1 <span class="percent v70">70 %</span></li>
        <li>test 2 <span class="percent v30">30%</span></li>
        <li>test 3 <span class="percent v100">100%</span></li>
    </ul>
</div>

Coté CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* suppression des puces sur les listes */
div.stats ul { list-style: none; }
div.stats .percent {
    /* on passe l'élément span correspondant à la classe .percent
    en affichage en bloc pour pouvoir lui donner une dimension.
    Diverses autres choses sont modifiées ensuite à votre convenance. */
    display: block;  /* on affiche le span sous forme de bloc pour lui affecter des dimensions */
    height: 1.5em;
    line-height: 1.5em;
    margin: 5px 10px;
    padding: 0 5px;
    text-align: right;
    color: #fff;
    font-weight: bold;
    font-family: monospace; 
    -moz-border-radius: 5px;  /* un petit arrondi pour les navigateurs le supportant */
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    cursor: default;
}
 
/* Multicolore */
.v100 { background: #970000; width: 100%; }
.v90 { background: #ff0000; width: 90%; }
.v80 { background: #ff6600; width: 80%; }
.v70 { background: #ff9c00; width: 70%; }
.v60 { background: #ffd800; width: 60%; }
.v50 { background: #eaff00; width: 50%; }
.v40 { background: #baff00; width: 40%; }
.v30 { background: #78ff00; width: 30%; }
.v20 { background: #12ff00; width: 20%; }
.v10 { background: #00ff60; width: 10%; }

Donc en ce moment j'ai des barres horizontales.

Je cherche comment les passer à la vertical.

Ceci est possible car j'ai récupérer ce code sur un site où il est précisé ceci (mais pas la manière) :

Citation:

Les possibilités sont maintenant infinies sur le style de la barre (horizontal, vertical, avec ou sans bordure, avec image de fond, ...) [...]

Donc je cherche.

merci de votre aide

Bonjour,
pour que les % fonctionnent à la vertical, il faut que le conteneur ait une hauteur définie.

Tu peux par exemple ajouter à ton CSS :

Code:

1
2
3
4
5
6
7
div.stats ul { list-style: none; height:200px; clear:both; }
div.stats ul li { list-style: none; height:100%; float:left; text-align:center; }
div.stats .percent {
    display: block;  /* on affiche le span sous forme de bloc pour lui affecter des dimensions */
    width: 2.5em;
/* ... */
}

Et remplacer les width par des height :

Code:

1
2
3
4
.v100 { background: #970000; height: 100%; }
.v90 { background: #ff0000; height: 90%; }
.v80 { background: #ff6600; height: 80%; }
/* ... */

Code:

1
2
3
4
5
div.stats .percent {
    display: block;  /* on affiche le span sous forme de bloc pour lui affecter des dimensions */
    width: 2.5em;
/* ... */
}

j'obtiens qq chose comme un carré

Code:

1
2
3
4
5
6
div.stats .percent {
    display: block;  /* on affiche le span sous forme de bloc pour lui affecter des dimensions */
    width: 2.5em;
    height: 10.5em; 
/* ... */
}

Là j'ai bien une barre verticale qui prends forme mais toutes les barres sont de la même hauteur.

Comme si le code suivant n'est pas pris en compte :

Code:

1
2
3
4
5
6
7
8
9
10
.v100 { background: #970000; height: 100%; }
.v90 { background: #ff0000; height: 90%; }
.v80 { background: #ff6600; height: 80%; }
.v70 { background: #ff9c00; height: 70%; }
.v60 { background: #ffd800; height: 60%; }
.v50 { background: #eaff00; height: 50%; }
.v40 { background: #baff00; height: 40%; }
.v30 { background: #78ff00; height: 30%; }
.v20 { background: #12ff00; height: 20%; }
.v10 { background: #00ff60; height: 10%; }

26/03/2015, 21h40
Invité
Bonjour,
dans ma réponse précédente, j'ai écrit UNE seule phrase...
- L'as-tu lue ?
- L'as-tu comprise ?
J'ai aussi pris la peine de mettre des lignes de code... que tu sembles avoir négligées, elles aussi.
27/03/2015, 10h34
Fredo8

Bonjour,

Désolé jreaux62, je viens de voir que j'ai zappé 2 lignes de votre code CSS, j'en suis vraiment désolé.
Je vous remercie de votre aide.

Mais au vu des difficultés, j'ai tester un autre script et pour l'instant la mise en place du graphique est suspendue.

Je reviendrais sur ce topic si je reviens sur ce script près avoir retesté avec les ligne CSS manquantes.

Merci encore