[Résolu] Mise en forme d’un glossaire

Bonjour à tous.

Je dois réaliser un glossaire de définitions et je vois que qu'il existe justement des balises consacrées à cette situation :

<dl>
	<dt>
		<dfn>
			Mot à définir
		</dfn>
	<dt>
	<dd>
		1. Définition 1 définition 1 définition 1 définition 1 définition 1.
	</dd>
	<dd>
		2. Définition 2 définition 2 définition 2 définition 2 définition 2.
	</dd>
	<dt>
		<dfn>
			Autre mot à définir
		</dfn>
	<dt>
	<dd>
		Autre définition autre définition autre définition autre définition.
	</dd>
</dl>

Je voudrais obtenir la même chose que sur ce tableau écrit avec <table> : une ligne de titre puis une alternance de couleurs selon les <dt>.
Comment procéder ?
http://img15.hostingpics.net/pics/391215definition.png
Merci pour vos explications.
Modifié par Pyanepsion (06 Nov 2015 - 19:11)

Première ébauche. La difficulté vient finalement du fait qu’il peut y avoir un nombre variable de <dt> suivis d’un nombre variable de <dd>. Je n’ai pas trouvé comment réaliser automatiquement dans une même liste <dl> une alternance de couleur de chaque ensemble <dt> en même temps que chaque ensemble <dd> correspondant.
Par contre, cela devient plus facile si l’on remonte d’un niveau en créant une liste <dl> par groupe <dt> <dd>.

Le codage suivant avec plusieurs <dl> pour une seule liste véritable est un peu lourd. Deuxième problème, ce CSS nécessite que la hauteur de <dd> soit supérieure à celle de <dd>, ce qui peut ne pas être le cas lorsqu’il y a par exemple plusieurs <dt> pour une seule <dd> d’une seule ligne. Troisième problème, on rencontre des débordements sur les dispositifs de très petite largeur (dès que la largeur ne suffit plus à rentrer un mot dans <dd>.)

Il doit donc certainement y avoir plus simple et plus propre, oui, mais comment ? Merci pour vos explications.

dl {
  width: 100%;
  margin: 0 0;
  font-size: 14px;
}
dl:nth-child(2n) {
  background-color: #ccffff;
}
dl:nth-child(2n+1) {
  background-color: #ccffcc;
}
dl:first-of-type {
  margin: 30px 0 0 0;
  font-size: 18px;
  font-weight: normal;
  background-color: #cc99ff;
}
dl:last-of-type {
  margin: 0 0 30px 0;
}
dt {
  float: left;
  clear: left;
  width: 120px;
  padding: 10px 20px;
}
dd {
  margin: 0 0 0 120px;
  padding: 10px 20px;
}

Modifié par Pyanepsion (08 Nov 2015 - 17:21)

Pour l'alternance des couleurs au sein d'une unique dl :

* {
	font: 1.2em/1.5 Verdana;
	padding: 0;
	margin: 0;
}

dt, dd {
	padding: 0 1.25%;
}

dt {
	font-weight: bold;
	float: left;
}

dt:nth-of-type(odd), dd:nth-of-type(odd) {
	background-color: silver;
}

dt:nth-of-type(even), dd:nth-of-type(even) {
	background-color: orange;
}

dt:first-of-type, dd:first-of-type {
	background-color: green;
	color: silver;
	font-weight: bold;
}

Pour que les dt et les dd aient le même comportement que des cellules de tableau (mise en display: table-cell des dt et dd), ça ne marche pas si le texte des dd comporte plusieurs lignes : la dt ne s'étend pas sur la même hauteur que la dd.

Bonne continuation.
Modifié par thierry (08 Nov 2015 - 17:28)

thierry a écrit :
ça ne marche pas si le texte des dd comporte plusieurs lignes : la dt ne s'étend pas sur la même hauteur que la dd.

Cette solution est toutefois bien élégante. Merci Thierry.

Il ne reste plus qu’à rectifier les 3 problèmes suivants que l’on ne voit pas avec la (lourde) solution par alternance de couleurs des <dl> :
1. Les <dt> ne recouvrent pas la même hauteur que les <dd>.
2. Les <dt> et les <dd> ont le même parent ce qui amène une perte de l’alternance de couleur dès qu’il y a plusieurs <dt> pour le même <dd>, ou plusieurs <dd> pour le même <dt> : voir le <dd> Sens 2 et le <dt> Terme à définir.
3. La largeur des <dt> est inégale : voir le <dt> Mot à définir et le <dt> Terme à définir.

Alternance de couleurs des <dt><dd> :
http://img11.hostingpics.net/pics/82105460dd.jpg

Alternance de couleurs des <dl> :
http://img11.hostingpics.net/pics/95189365dl.png
Modifié par Pyanepsion (09 Nov 2015 - 08:29)

Merci, Thierry.

Je ne connaissais pas cette technique + dd +dd... Elle améliore effectivement grandement la chose. Il reste à résoudre le problème des dt (mot) de hauteur variable. Dans le projet, il y a jusqu’à 3 dd par dt. Ces définitions dd et ces dt ont bien sûr des longueurs très variables. Voici ce que donne ce nouveau code avec la gestion des largeurs :

dt {
	float: left;
	clear: left;
	text-align: left;
	width: 120px;
	padding: 10px 20px;
}
dd {
	margin: 0 0 0 120px;
	padding: 10px 20px;
}

http://img11.hostingpics.net/pics/126276liste.jpg

Je vois, donc en CSS pur, cela serait possible sur une liste imbriqué (structure HTML adapté).
http://codepen.io/anon/pen/YyBYoM

Autrement, il te faudra en passer par js, car les selecteur nth-of-type(xn) ou nth-child(xn) ne seront pas d'un grand aide sur ce coup là à mon avis.

On en arrive à penser qu'un tableau (tr + th et td) ne serait peut-être pas un mauvais choix.

Bonne soirée.
Modifié par gc-nomade (16 Nov 2015 - 21:11)

Oui ! Pourquoi pas une liste ul ! J’avais de mon côté initialement créé un tableau [c’est la copie d’écran qui m’a servi de modèle], mais comme il s’agit ici uniquement de définitions, l’utilisation de dl, dt, dd me semble plus pertinente pour respecter au mieux la sémantique du HTML5. Cela permet ainsi de donner un indicateur puissant aux moteurs de recherche.
La difficulté vient ici que dt et dd ne sont pas réellement liés par un même contenu intermédiaire entre leur niveau commun et le niveau dl, comme on le retrouve justement avec tr ou ul.

Il apparait que l’on a donc fait le tour de la question. Est-ce que sémantiquement la succession de dl que j’avais proposée dans la première solution [un dl par groupe de définition] est pertinente ou au contraire représente une aberration ?

Cela me parait pertinent.
Chaque sens pouvant être listé dans une ol .

en gros:

<dl>
   <dt> 
       terme 
   </dt>
   <dd>
       <ol>
           <li> definition</li>
           <li> autre definition</li>
       </ol>
    </dd>
</dl>
<dl>
...