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%; }
/* ... */

[Fredo8]

Code :

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

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 :

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

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 :

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

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%; }

[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.

[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