Discussion :

[Fredo8]

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

[black-hawk-down]

Salut,

Un peu plus de détails autre que "ça ne marche pas" et ton code, ça serait pas mal.

[Fredo8]

"ça ne marche pas" => ba n'affiche pas la barre vertical, mais soit carré/rectangle

[black-hawk-down]

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

[Fredo8]

Oki je met le code :

Coté HTML/PHP :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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) :

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

[Invité]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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