Mise en page et sémantique pour listes [résolu]

Bonjour,

J'ai tenté de faire une truc avec les listes de définitions mais j'ai l'impression que ça ne convient pas. Ma page présente plusieurs blocs contenant en général une image et un texte associé, chacun de ces blocs est encadré et classé sous le h3 qui va bien.
J'ai pensé à utiliser les dl dt et dd, mais j'ai quelques problèmes :

1. Je suis obligé de mettre certains dd avant le dt (ceux qui contiennent une image) pour que l'image vienne avant dans le flux. Niveau sémantique, ça pose problème ?

2. Afin d'encadrer mes différents blocs, j'ai créé des div qui encadrent les dd et dt qui vont ensemble. Mais ça me parait pas net ni au niveau sémantique, ni pour la validation W3C (une div dans un dl)

Voici mon code pour une section :

<div id="Sportives" class="ancre">
<!---->		<h3 class="simplecenter sstitre">Sportives</h3>

			<dl>
				<div class="simpledr">
						<dd>
							<div class="diap">
								<ul class="diaporama1">

									<li><img src="images/Les_Activites/galerie/sentier_chatenay_1.jpg" alt="sentier Chatenay 1" title="" /></li>
									<li><img src="images/Les_Activites/galerie/sentier_chatenay_2.jpg" alt="sentier Chatenay 2" /></li>
									<li><img src="images/Les_Activites/galerie/campagne_chatenay.jpg" alt="campagne Chatenay" title="" /></li>
								</ul>
							</div>
						</dd>
						<dt>Randonnées</dt>
						<dd>

							<p>Découverte du bocage par de nombreux sentiers de randonnées sillonnant entre pâturages et sous-bois.</p>
						</dd>
						<hr />
				</div>
				<div class="simplega">
						<dt>Descente de la Loire en canoë</dt>
						<dd><p>&nbsp;<a href="http://www.brionnais71.fr/17.html">Arganoë</a> à Baugy. Tel&nbsp;: 03 85 25 01 94</p></dd>

						<dd><p>&nbsp;<a href="http://www.lachevrette.com/canoe.htm">Camping de la Chevrette</a> à Digoin. Tel&nbsp;: 03 85 53 11 49</p></dd>
						<hr />
				</div>
			</dl>
</div>

Auriez-vous une idée pour arranger tout ça ?
Peut-être oublier les dl et utiliser plutôt les ul ?

Merci d'avance
jojo
Modifié par jojoledemago (26 Aug 2011 - 22:05)

Bonjour,

Les listes de définitions ne sont pas appropriée à ton contenu. Utilises de simples paragraphes.

Bonjour Laurie-Anne !

Il s'agit d'une liste de propositions d'activités, chaque proposition contient un titre, une image et un texte explicatif. N'y a-t-il rien de plus "sémantique" que des paragraphes ?

<p> et <hn> sont tout à fait sémantiques.