Discussion :

[Domi2]

Bonjour,

J'ai fait un certain nombre de recherche, en utilisant par exemple "CSS sous-classe", mais les résultats ne sont pas probants.

Il me semble cependant que j'ai déjà vu des discussions traitant du sujet, mais sans pouvoir les retrouver.

Je travaille actuellement dans un contexte assez particulier, un logiciel de wiki, Atlassian Confluence. Je trouve ce produit assez magnifique dans ce qu'il peut offrir, mais là n'est pas la question.

L'éditeur permet par exemple d'insérer dans une page des petits rectangles de diverses couleurs, simulant une barre de progression, lesquels ont une classe. Pour faire simple :

Code :

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

1
2
.barre_progression_verte{}
.barre_progression_rouge{}

Facile de définir une largeur pour chacune des deux classes, qui au final donne une très jolie barre de progression.

Mon problème est que si je veux deux barres de progression sur la même page avec des largeurs différentes pour chaque couleur, je ne sais pas comment faire.

Mon idée est de les encapsuler dans des div différentes, qu'on peut insérer dans l'éditeur avec une classe (ou une ID), mais je ne connais pas la syntaxe. En gros, ce serait :

Code :

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

1
2
3
4
5
.ma_classe_div_une_barre_progression_verte{}
.ma_classe_div_une_barre_progression_rouge{}
 
.ma_classe_div_deux_barre_progression_verte{}
.ma_classe_div_deux_barre_progression_rouge{}

Est-ce possible, et si oui, quelle est la syntaxe a utiliser ?

Merci d'avance !

[Basile le disciple]

Bonjour à tous,

Je n'ai pas très bien compris, vous voulez que les classes aient une longueur différente selon les barres??
Par exemple :

1ere barre :
-rouge:10px;
-vert:20px;

2eme barre:
-rouge:30px;
-vert:40px;

??

Dans ce cas il suffirait de mettre 2 div avec un id ou une classe différente et de mettre :

Code CSS :

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

1
2
3
4
5
6
 
  #barre1 .rouge{width:10px;}
  #barre1 .vert{width:20px;}
 
  #barre2 .rouge{width:30px;}
  #barre2 .vert{width:40px;}

[Invité]

Bonjour,
il est aussi possible d'ajouter une class supplémentaire directement sur chaque barre :

Code html :

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

1
2
3
4
5
<div class="barre_progression_verte barre1"></div>
<div class="barre_progression_rouge barre1"></div>
 
<div class="barre_progression_verte barre2"></div>
<div class="barre_progression_rouge barre2"></div>

On écrira alors, sans espace :

Code css :

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

1
2
3
4
5
6
7
8
9
10
/* styles communs */
.barre_progression_verte {}
.barre_progression_rouge {}
 
/* styles particuliers */
.barre_progression_verte.barre1 {}
.barre_progression_rouge.barre1 {}
 
.barre_progression_verte.barre2 {}
.barre_progression_rouge.barre2 {}

[Domi2]

Bonjour,

Les deux solutions proposées fonctionnent très bien.

J'ai retenu la première, qui est plus adaptée à mon cas.

Un grand merci à tous les deux.