Balise <dfn> : modifier le fond de l'infobulle

[Nenex]

Slt

Pour les definitions de mots j'utilise la balise <dfn></dfn>. J'aimerais pouvoir modifier la couleur de fond du texte qui doit apparaitre. J'ai modifier le mot de la definition en css

<dfn class="definition" title="La definition">texte</dfn>

Merci d'avance pour vos reponses.

[cyberlaura]

Bonjour Nenex,

s'il s'agit de modifier la couleur de fond du texte, un simple background-color suffit.

Pour modifier la couleur de l'info-bulle, je ne connais pas la solution. Il est possible de créer une "fausse" infobulle en créant un bloc du style voulu qui ne sera visible que lors du "Hover". Voir un exemple ici : infobulle personnalisée

[captain_torche]

Pourquoi ajouter une class supplémentaire ? Elle me semble redondante avec le nom de la balise.

Tu peux tout simplement attribuer une couleur de fond à la balise elle-même :

dfn {background-color: #FFF;}

Edit : je n'avais pas vu que tu parlais de l'infobulle. La remarque concernant l'attribut class est néanmoins toujours valide

[Nenex]

Merci pour vos reponses.

Bonjour Nenex,

s'il s'agit de modifier la couleur de fond du texte, un simple background-color suffit.

Pour modifier la couleur de l'info-bulle, je ne connais pas la solution. Il est possible de créer une "fausse" infobulle en créant un bloc du style voulu qui ne sera visible que lors du "Hover". Voir un exemple ici : infobulle personnalisée

Merci pour le lien. La j'ai pas trop le temps. Je m'y pencherais ce soir.

Pourquoi ajouter une class supplémentaire ? Elle me semble redondante avec le nom de la balise.

Tu peux tout simplement attribuer une couleur de fond à la balise elle-même :

dfn {background-color: #FFF;}

Edit : je n'avais pas vu que tu parlais de l'infobulle. La remarque concernant l'attribut class est néanmoins toujours valide

C'est plus simple de faire une modif dans le fichier CSS que dans le code directement. En plus c'est pour mettre dans un CMS (Dotclear) et il n'y a pas de moyen (simple) pour faire un rechercher/remplacer. Pourquoi tu dit que redondant, puisque la balise <class> peut etre utilise plusieurs fois justement ?

[captain_torche]

Si tu ajoutes cette classe sur TOUTES les balises dfn, ça ne change rien

Et, la modification dont je te parle, s'effectue bien entendu dans le fichier CSS.

[Nenex]

Si tu ajoutes cette classe sur TOUTES les balises dfn, ça ne change rien

Et, la modification dont je te parle, s'effectue bien entendu dans le fichier CSS.

ha oui j'avais pas fait gaffe que ton exemple c'est du CSS Dsl. Me faut des lunettes . Dans mon CSS j'ai deja mis les codes pour la balise. Mais pour modifier le mot du texte. Je ne voyais pas comment faire pour personnaliser l'aparence du texte (de la petite fenetre) qui doit aparaitre. Pour la balise redondante elle n'y en aura pas beaucoup dans une page. Si c'est 3 ou 4 ca sera le grand max. Elle n'y sera pas sur toutes les pages. Mais ca fait quoi le fait qu'elle soit sur pluseiur balises DFN ?

cyberlaura, je viens de rentrer du boulot. Si je suis courageux j'irai me pencher sur le lien que tu ma passe.

[captain_torche]

En ce qui concerne la redondance, ce n'est pas entre plusieurs balises dfn sur la même page, mais avec l'attribution de la classe "definition" à chacune de ces balises. Cette classe est inutile car j'imagine que tu l'ajoutes à toutes tes balises dfn.

C'est comme si tu écrivais : <a href="" class="lien"> ou <h1 class="titre">

[Nenex]

En ce qui concerne la redondance, ce n'est pas entre plusieurs balises dfn sur la même page, mais avec l'attribution de la classe "definition" à chacune de ces balises. Cette classe est inutile car j'imagine que tu l'ajoutes à toutes tes balises dfn.

C'est comme si tu écrivais : <a href="" class="lien"> ou <h1 class="titre">

oui je la mettrais dans chaque balise DFN. Je comprend quand meme pas pourquoi il ne faut pas mettre cette classe a chaque balise DFN. Si j'ai 3 ou 4 definition dans un texte faut bien que chacune ai la meme mise en forme. La classe definition est fait pour ca. J'arrive pas a suivre ton raisonnement

[captain_torche]

C'est tout simplement parce que tu peux appliquer la mise en forme à la balise dfn elle-même

Une classe ne devrait intervenir que si tu avais à différencier plusieurs balises de même nom.

[Nenex]

tu veux dire comme ca

<dfn font-family:Georgia, "Times New Roman", Times, serif; background-color:#00FF99; title="La definition">texte</dfn>

[captain_torche]

Ou plutôt :

<dfn title="la définition">texte</dfn>

Avec dans le fichier CSS :

dfn {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #00FF99;
}

[Nenex]

En fait il faudrais utiliser la balise class si j'avais plusieurs mise en forme de DFN. Pour moi le point (en rouge dans le code css ci-dessous) etait obligatoire :

(je reprend ton exemple de code CSS)

.dfn {

font-family: Georgia, "Times New Roman", Times, serif;

background-color: #00FF99;

}

Bon ca fait pas longtermps que je me suis vraiment penche sur le CSS. J'ai refait tout mon site et ceux que je gere avec du CSS. J'arrive a me debrouiller mais j'ai encore pas mal de chose a apprendre

Modifié 2 Juillet 2009 par Nenex

[captain_torche]

En fait, tu as trois possibilités de notation en CSS : rien, le point et le dièse.

- "rien" te permet de cibler les balises directement par leur nom : h1, p, a, dfn ...

- le point te permet de cibles les balises par leur classe

- le dièse te permet de cibler une balise selon son id

[Nenex]

ha ben c'est vrais que les h1, h2, etc.. n'ont pas de point. Pour moi c'etait vraiment specifique a certaine balises. Ben voila j'ai encore appris quelque chose . Merci pour l'éclaircissement. Je vais me re-organiser mes fichier CSS.