28173 sujets

CSS et mise en forme, CSS3

Hello,

Je mets au point un glossaire de termes techniques pour un site, ces termes ne sont pas des abbréviations, mais bel et bien des termes assez techniques qui demandent en général une explication un peu détaillée.

J'ai sur le site une page de glossaire qui liste, par ordre alphabétique, chacun de ces termes.

Je voudrais pousser le principe un peu plus loin et permettre, directement lors de la lecture d'un texte qui contient l'un de ces termes, de proposer la définition lors du survol du mot.
Je pensais au début à l'utilisation des abbr/acronym, mais ceux là me semblent plutot réservés aux sigles ou des abbréviations, pas à des termes.

Après une petite recherche, j'ai découvert la balise dfn mais son utilisation me parait un brin obscure :

<acronym>W3C</acronym> stands for 
<dfn>World Wide Web Consortium.</dfn> 

La définition ne me semble pas liée au terme qu'elle définie dans cet exemple, elle est juste là, comme ça, j'arrive pas à comprendre son utilisation.

Alors j'ai ensuite pensé au <dd> / <dt> / <dl> mais ça me semblait un peu lourd comme implémentation pour une seule définition... Mais bon, au final c'est peut-être le plus logique.

Donc voila, j'aimerai vos avis sur la balise la plus adaptée selon vous Smiley smile

Sachant que le principe serait le suivant :
Pour les utilisateurs ayant javascript, j'affiche une bulle d'aide personnalisée avec la définition du terme lors du survol (que je retrouve soit dans le markup si possible, soit avec une requete AJAX), pour les autres le terme serait un simple lien vers la page du glossaire correspondant.
Bien sur, dans tout les cas la définition, même si elle est présente dans le markup, serait cachée par CSS.
Modifié par Tymlis (04 Oct 2007 - 12:10)
Salut,

Sur mon site, j'ai adopté la liste de définition, qui me semble la plus appropriée. Ce n'est pas trop lourd à implémenter, car je n'ai qu'une seule <dl>, dans laquelle j'ai toutes mes paires <dt> / <dd>.
Et tout est regroupé sur une page de lexique, que tu peux atteindre en cliquant sur un terme surligné.
Modifié par Mikachu (04 Oct 2007 - 12:22)
dfn fait l'objet de confusions fréquentes. Son utilisation correcte est:

L'<dfn>élément dfn</dfn> sert à indiquer quel sont le ou les termes définis. Il se sert pas à baliser la définition.


Cela dit, attention aux astuces de pseudos-bulles d'aides qui conduisent à maltraiter le contenu en y intégrant des définitions qui, en fait, n'ont rien à y faire. Préférer la solution AJAX, même si elle n'est pas accessible non plus (de deux maux, choisir le moindre Smiley cligne )

Sinon, le lien simple vers le glossaire, c'est bien aussi Smiley ravi
Plop,

@Mikachu : Tu pourrai me donner une url d'une page où tu mets ça en application, j'ai regardé rapidement mais n'ai rien trouvé Smiley smile

@Laurent Denis : Donc un simple lien pour les non-javascript et une info-bulle AJAX pour les autres, ça passe Smiley cligne

Merci de vos réponses en tout cas, je vais faire ça comme ça à priori :


Et voici une phrase contenant un terme 
un peu <a href="glossaire/anthropomorphique.html" title="Définition d'anthropomorphique" class="definition">anthropomorphique</a>


Avec le javascript qui transformera les liens de class="definition" en infobule ajax avec la définition
Modifié par Tymlis (04 Oct 2007 - 14:14)
Tymlis a écrit :
@Mikachu : Tu pourrai me donner une url d'une page où tu mets ça en application, j'ai regardé rapidement mais n'ai rien trouvé Smiley smile

L'icone WWW en bas de tous mes messages ou le lien sur ma page de profil, qui dirigent vers mon site. Smiley cligne