[Résolu] Peut-on effectuer une copie d'une classe CSS?

Bonjour à tous,

Je me permets de vous écrire, car je tourne en rond sur un problème de CSS.

J’utilise le greffon QTIP2 pour JQUERY (http://craigsworks.com/projects/qtip2/).

Cet outil permet de créer facilement des bulles d’information. L’apparence d’une bulle est définie par une classe CSS.

Je n’ai pas de problème avec le JavaScript, et je réussis à utiliser ce greffon... mais je ne parviens pas à créer des bulles avec des apparences (donc des classes CSS) différentes.

Pour définir l’apparence d’une bulle, « j’adapte » une classe CSS définie dans la feuille de style globale de QTIP2. En l’occurrence, j’adapte la classe « ui-tooltip-dark » de la façon suivante :

 .ui-tooltip-dark .ui-tooltip-content {
	padding: 10px;
	text-align: left;
	border-width: 1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

 .ui-tooltip-dark {
	min-width: 200px;
	max-width: 400px;
}

Puis j’applique la classe « .ui-tooltip-dark » à la bulle.

Note : Les classes « .ui-tooltip-dark » et « .ui-tooltip-content » sont définies dans la feuille de style de QTIP2.

OK. Jusque-là, pas de problème. Je crée des bulles...

Sauf que :

Comment faire si je veux créer des bulles qui présentent des apparences différentes?

Il faudrait que je fasse, en quelque sorte, une copie de la classe « .ui-tooltip-dark ».

Cela donnerait, écrit en pseudo langage :

 .ma-nouvelle-class = .ui-tooltip-dark

 .ma-nouvelle-class .ui-tooltip-content {
	padding: 8px;
	text-align: right;
	border-width: 2px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

 .ma-nouvelle-class {
	min-width: 20px;
	max-width: 40px;
}

Et j’appliquerais à la nouvelle classe à une nouvelle bulle.

Mais, question : Comment effectuer une copie de classe?

Merci à tous,

Denis
Modifié par denis.beurive (24 Mar 2012 - 09:40)

Bonjour,

Voilà une piste :

.maClass1, .maClass2, #monID {
background:red;
width:500px;
height:50px;
border:1px solid blue;
}

#monID {
height:100px;
}

Ce code appliquera un fond rouge, des dimensions et une bordure bleu aux trois en même temps (.maClass1, .maClass2 et #monID).

Tout de suite après, le code augmente la hauteur de mon #monID.
Modifié par Tony Monast (24 Mar 2012 - 13:14)

@Tony

Salut Tony,

Je te remercie pour ton aide. L’idée est bonne. Malheureusement, certains points empêchent son utilisation :

1. Les bulles sont générées « à la volée » par le greffon QTIP2. Je ne connais pas les IDs des bulles, si tant est qu’elles en aient.

2. Les bulles d’informations sont générées par du code PHP, en fonction du contenu du document HTML. Autrement dit, leur nombre, et leur type ne sont pas connus à l’avance...

Si j’avais un moyen de connaître les IDs des bulles, je pourrais générer une feuille de style via PHP, en me basant sur la technique que tu proposes. Mais malheureusement, ce n’est a priori pas possible.

Cordialement,

Denis

@Tony

Salut Tony,

Finalement, je crois que ta solution est la bonne.

Contrairement à la version 1 du greffon QTIP, la version 2 permet d’assigner un ID à une bulle. Par conséquent, la technique que tu proposes est utilisable.

Pour info : http://craigsworks.com/projects/qtip2/docs/core/

Le script PHP qui génère le document HTML va :

1. Assigner un ID à chaque bulle.

2. Générer des « ID CSS » pour chaque bulle, en fonction de leur type (signalement d’une erreur, affichage d’une information...).

Merci pour ton aide!

Denis
Modifié par denis.beurive (25 Mar 2012 - 09:54)