[Résolu] Représentation d'une liste

Salut,

Quel serait à votre avis la façon la plus sémantiquement valable (et applicable ) de représenter une liste d'items, sachant que chacun est représenté par une image et un texte sous l'image, et que la liste est horizontale. L'image est un symbole associé au texte : ils représentent la même information, l'un étant une représentation purement graphique (pas de texte dans l'image).
Modifié par Marvin Le Rouge (12 Feb 2005 - 19:03)

Tout simplement un truc de ce style

<li><img src=".." alt=".." /> bla bla</li>

J'irais pas chercher midi à 14 heures pour ce genre de choses.

Les listes de définition :

<dl>
 <dt>Ton image</dt>
 <dd>La description, enfin le texte quoi</dd>
</dl>

J'aurais tendance à suivre la solution basique d'Olivier, pour des raisons d'alignement : on ne connaît pas la largeur du texte donc il risque d'y avoir des problèmes pour que le dt et le dd occupent la même largeur.

Marvin Le Rouge a écrit :
Quel serait à votre avis la façon la plus sémantiquement valable

Pour moi, la solution la plus sémantique, c'est la liste de définition , car un texte précise une image, enfin, peut-être pas dans tous les cas remarque ...
.

Après, la question du style n'a rien à avoir avec la sémantique

J'essaie de trouver un bon compromis.
En l'occurence, l'image est plus une décoration associée au texte, puisque c'est une sorte de symbole désignant une partie d'un site, partie nommé explicitement par le texte.
Ex. : texte = News, symbole = un journal

Si c'est pûrement decoratif :

<li id="item1">ton texte</li>
<li id="item2">ton texte2</li>
...

li
{
  padding-left: 20px ;
}

li#item1
{
  background: url(item1.gif) no-repeat 0 50% ;
}

li#item2
{
  background: url(item2.gif) no-repeat 0 50% ;
}

Je vois pas pourquoi vous voulez mettre une liste de définition ici

Une autre façon de faire serait de présenter l'image en "float: left;" et les autres items à la droite de celle-ci :

Le HTML :

<ul>
 <li style="float: left;"><img src="image.jpg" width="" height="" alt="" /></li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

Le CSS :

li { 
   list-style-type: none; 
}

<edit />
arf... pas certain que j'ai compris
Modifié le 11 Feb 2005 - 06:59

Olivier a écrit :

Je vois pas pourquoi vous voulez mettre une liste de définition ici

Parce que si le texte vient expliquer l'image, ça peut très bien être une liste de définitions. Mais c'est vrai que comme le souligne Marvin, c'est un peu la croix et la bannière dès qu'il s'agit d'aligner le dt et le dd sans avoir des décalages de tout le reste par la suite.

Je vote pour tes li.

Bonjour

J'utilise une liste de définition pour l'affichage des graphismes sur mon site en travaux... Bien sur les images sont alignées en hauteur, les unes sous les autres, mais je n'ai aucun problème...

Voir ici : http://www.chroniques-taoistes.com/site/

... et sur les autres pages du site également (les textes affichés actuellement ne sont pas définitifs).

Dominique, c'est sûr que dans ton cas, je pense que les listes de définitions sont parfaites. Dans la partie de gauche avec les idéogrammes, l'association idéogramme <-> réprésentation est bien retranscrite sémantiquement avec une liste de définitions.

Toutefois dans le cas d'une galerie d'image c'est peut-être un peu différent. Si le texte sous l'image n'est qu'une description, moi je metterais :

<ul>
<li><img src="..." alt="..."><p>Description ici</p></li>
<li>.....

Maintenant si c'est le titre de l'image, ne pourrait-on pas utiliser un <hn> ?

<ul>
<li><hn>Titre de l'image</hn><img src="..." alt="..." /></li>
<li>...

an.archi a écrit :


Parce que si le texte vient expliquer l'image, ça peut très bien être une liste de définitions. Mais c'est vrai que comme le souligne Marvin, c'est un peu la croix et la bannière dès qu'il s'agit d'aligner le dt et le dd sans avoir des décalages de tout le reste par la suite.

Je vote pour tes li.

Justement, là on a pas une description d'image, mais une image associée à un texte de façon décorative, l'image reprenant exactement l'idée du texte. Sinon pour une description d'image, <dl> bien sûr Mais là, clairement non.

Olivier > Nous sommes bien d'accord.
Je me replaçais juste dans l'ordre d'apparition des informations...
Ha tiens... Non, en fait...
J'avais mal relu le post de Marvin. :o)
J'ai occulté le fait qu'il s'agissait de la même info.

Au temps pour moi.

Etant donné qu'il s'agit de la même information, je pense effectivement que la liste simple (ul - li) est le plus juste. En plus, il se trouve que c'est le plus simple à mettre en place .

@Olivier : Merci pour la CSS, c'est grosso modo ce qu'avait donné la mienne avant que je te lise, donc je n'ai pas dû trop me gourrer

C'est donc dit, j'opte pour la liste simple dans ce cas. Comme en plus il s'agit d'une liste de liens, on obtient un résultat intéressant en mettant le padding servant à montrer l'image sur le lien : toute la surface image + texte est cliquable, ce qui est plus simple d'un point de vue ergonomie. En revanche, j'ai utilisé du margin pour la séparation des items, afin d'avoir une discontinuité évidente entre les zones cliquables (et pour des raisons de composition entre éléments inline et bloc).

Merci à tous

Tu nous montreras ? :o)

Quand ce sera fait, oui ...
Soit pas avant un bon mois