Classes CSS avec contenu intégré

En réponse à http://forum.alsacreations.com/topic-2-15159-1-resoluInfobulle-avec-span-Justification-semantique.html (sujet désormais clos car résolu)

Une petite retouche à tâtons s'est imposée pour ma situation, mais le code est vraiment très beau (bien que je le présume assez sale), alors je le republie tel qu'il fonctionne chez moi.

.aidebulle {
	cursor: help;
}
.aidebulle span {display: none; }
.bulle {
	position:relative;}
.bulle span {display: none;}
.aidebulle:hover .bulle {
   font-family: "Trebuchet MS";
   font-size: 12px;
   font-weight:normal;
   text-decoration:none;
   text-align:left;
   color: #EEE;
   display:block;
   /*position:absolute; ==> abandonnée*/
	   position:fixed;
	   left:0px;
	   top:35px;
	   margin:10px;
	   width:30%;
   padding:5px;
   border:2px groove #CCC;
   background-color:#000;
   z-index:1000;
   cursor:auto;
}

Qui s'accompagne d'appels différents aux classes : images, spans, divs, href... tout le monde a droit a sa bulle d'aide, avec même des illustrations dedans... Seulement voilà, le code est horriblement long (45Ko pour une seule page en include PHP !) avec plus de la moitié du poids en répétitions des bulles d'aides...

<span class="aidebulle">
         <img src="../images/image.png" width="28" alt=""/><br />
         <span class="bulle">
         <img style="float:right; margin:10px;" src="../images/image.png" width="72" alt="" />Blablabla bla blabla blabla.</span></span>

Cf. http://www.romanceor.net/pages/index.php?page=reutilisations


La question qui accompagne le déterrage de topic est donc la suivante : comment créer des classes définies avec leur contenu intégré, et les appeler par un simple <div class="bulle_daide_1"> ?

En vous remerciant,
Modifié par Romanceor (18 Mar 2009 - 10:58)

Romanceor a écrit :
classes définies avec leur contenu intégré

Aucune idée de ce que cela peut vouloir dire. Une explication, peut-être?
Modifié par Florent V. (18 Mar 2009 - 11:04)

Euh. Je voudrais "définir" le contenu d'éléments "class", et non plus seulement leur style. Alors évidemment, c'est une feuille de style... mais s'il y avait un moyen d'éviter de créer un fichier PHP pour chaque bulle d'aide ça m'arrangerait.

Par exemple, mettre du texte et des images sans avoir à copier-coller 20 fois le code... Et ne choisir au sein du code qu'une seule et unique variable : l'URL.
Modifié par Romanceor (18 Mar 2009 - 11:06)

Salut Romanceor,

Romanceor a écrit :

comment créer des classes définies avec leur contenu intégré, et les appeler par un simple <div class="bulle_daide_1"> ?
En vous remerciant,

Les CSS étant prévues pour définir la présentation des données et non pour fournir du contenu, je pense que se que tu veux faire n'est pas réalisable de cette manière.. En plus, que tu mette le contenu dans ta page HTML, PHP ou CSS (en admettons que tu trouve une solution miracle), tu auras toujours autant de contenu à charger .

Après si ton but est d'alléger ta page, moi je chercherais plutôt a charger les images de l'infobulle en javascript.

Un autre solution que je vois pour toi, mais qui est franchement ignoble (j'affiche directement la couleur ), serai de transformer le contenu de ton infobulle en image (text compris) et de la mettre dans ton fichier CSS... mais du coup tu perd le dynamisme, tu va galèrer a créer des images pour chaque nouvelle bulle... en gros je pense pas que se soit une bonne idée
Modifié par Mikerob (18 Mar 2009 - 11:38)

Merci pour ta réponse. Je crois que je vais finalement faire un fichier PHP par bulle d'aide. Après tout Dreamweaver est bien fait pour gérer les includes et ça n'est pas trop lourd.