Comment faire une liste d'images avec des titres en dessous

Bonjour tout le monde
J'ai une petite question qui a sans doute déjà été posée, mais le problème, c'est que le mots clef nécessaires pour la rechercher (css liste image) renvoient que vers des pages sur la propriété list-style-image. J'ai bien essayé d'autres mots clefs, mais avec le même résultat.
Donc si l'un d'entre vous se rappelle où il a déjà vu ce sujet traité, qu'il n'hésite pas à me donner le lien, ou des pistes pour le retrouver.

Ceci étant dit, voici ma question :
Je souhaite faire une liste horizontale de catégories, du genre de celles qu'on trouve très couramment sur les boutiques en ligne. Par exemple :

Dans le temps, on faisait ça en 2 coups de cuillère à pot avec des tableaux.
Mais maintenant que je suis grand, je voudrais faire ça avec une belle liste, du genre :

<ul id="gamme">
	<li><a href=""><img src="epices.png" alt="" />Épices et condiments</a></li>
	<li><a href=""><img src="-plantes.png" alt="" />Plantes médicinales</a></li>
	<li><a href=""><img src="thes.png" alt="" />Thés</a></li>
	<li><a href=""><img src="extraits.png" alt="" />Extraits naturels</a>
	<li><a href=""><img src="champignons.png" alt="" />Champignons séchés</a>
</ul>

Mais bien sûr, on rentre tout de suite dans les problèmes des images de différentes tailles qu'il faut centrer verticalement, du texte sur une ou deux lignes qu'il faut centrer sur l'image.
J'ai donc commencé à bricoler en ajoutant un span autour de mon texte, et avec divers styles css, mais une correction amenant une nouvelle erreur, je me demande si j'ai pris la bonne stratégie au départ.
Aussi je me permet ce petit post, pour vous demander quel serait votre stratégie.
- c'est un cas qui justifie le recours au tableau ?
- on doit pouvoir s'en tirer avec des display table-style ?
- faut mettre l'image en background, et jouer avec javascript pour qu'elle reste cliquable ?
- ou autre...

A noter que j'aimerai bien que l'image et le texte soit dans le même lien, de façon à ce que l'hover sur l'image déclenche le hover du texte. Je peux bien sûr le faire en javascript, mais si je peux éviter...

Merci de vos conseils / liens / pistes
Modifié par mouloud (20 Jun 2009 - 16:45)

Peut-être, tu peux mettre les images comme background de tes liens.
Un classe par lien et c'est tout.
Après, tu peut utiliser la propriété height et width de tes <a>
Et si besoin (si les images ne sont pas de la même taille, très mal ) changer le background-position de chaque une.

Salut,

ChickenExecutor a écrit :
Peut-être, tu peux mettre les images comme background de tes liens.

Pas dans cet exemple car les images ne sont pas décoratives (d'ailleurs dans ce cas on pourrait mettre de texte directement dans l'image et se contenter de le répéter dans le alt). A lire : Bien utiliser le texte alternatif.


@mouloud > tu aurais pu te "simplifier" la vie en créant des images de même taille et en positionnant correctement les images et les textes.

Pour des images de tailles différentes ça risque effectivement d'être compliqué puisque display:table et display:table-cell sont encore mal implémentées et le plus simple serait sans doute d'utiliser une table. Voir pour plus d'infos Adapter une légende à la largeur de l'image.
Modifié par Heyoan (21 Jun 2009 - 18:40)

Même si dans ce cas précis, je pourrais tout faire via des background et des images de la même taille, ma question était plus générale, afin de trouver une solution vraiment dynamique, pour gérer les catégories et sous-catégories d'un site de vente en ligne, dont les administrateurs ne sauraient pas forcément mettre les images à la bonne taille.
Il faudrait donc quelque chose de dynamique et automatique, et j'ai bien l'impression que pour le moment, on a pas trouvé mieux que le tableau.

mouloud a écrit :
et j'ai bien l'impression que pour le moment, on a pas trouvé mieux que le tableau.

Dit comme ça c'est un peu déprimant !

On peut dire qu'on a trouvé mieux mais que ça nécessite une "dégradation gracieuse" pour IE < 8.

mouloud a écrit :
Il faudrait donc quelque chose de dynamique et automatique

Cellule de tableau.

mouloud a écrit :
et j'ai bien l'impression que pour le moment, on a pas trouvé mieux que le tableau

Mieux = display:table-cell, soit le comportement d'une cellule de tableau mais utilisable sur à peu près n'importe quel balisage. Implémenté dans la plupart des navigateurs depuis des années, sauf dans IE vu que Microsoft n'a pas jugé bon de développer IE pendant des années et que quand ils se sont réveillés ils avaient tellement de bugs à corriger que rajouter cette fonctionnalité n'a pas été possible (IE7), et que ça a dû attendre la version suivante (IE8, printemps 2009).

Ceci dit, l'image que tu présentes se réalise très bien sans tableau, s'il s'agit d'un menu de navigation ou d'une présentation de rubriques relativement fixes (pas modifiées très régulièrement). Un padding-top qui va bien, des images en background, et voilà.

Un tout petit peu d' offtopic :

Heyoan a écrit :
Pas dans cet exemple car les images ne sont pas décoratives

Pour les images en background.

Florent V. a écrit :
Un padding-top qui va bien, des images en background, et voilà.

Ici, je crois, il y à une différence d'appréciation.
Moi, je crois que les images SONT décoratives, car la vraie signification du lien est donné par le texte du lien. Les images sont pour faire joli, et c'est très bien. En revanche les images pour les articles DOIVENT être des images "en dur" <img>.

Qu'en pensez vous?

ChickenExecutor a écrit :
Ici, je crois, il y à une différence d'appréciation.

Oui ! Florent et toi êtes du même avis alors que je pense pour ma part que les images apportent une information supplémentaire.

Tout cela est de toute façon très subjectif et dans ce cas précis ça ne change effectivement pas grand chose puisqu'il s'agit d'un lien vers la rubrique concernée.

Faut quand même garder dans l'esprit qu'il s'agit en général de cas où même si ça ne change pas très souvent, les modifications sont faites par des gens qui n'ont aucune connaissances du html, du css, et même du retaillage d'image. Moi, je fais ce truc pour le client, mais si dans 6 mois, il veut changer une des photos, ça me ferait chier qu'il doive repasser par moi.
Alors c'est sûr que c'est techniquement possible de faire un php qui non seulement re-dimensionne une image, mais rajoute du blanc en largeur ou en hauteur pour que le fichier fasse une taille définie. Mais ça rajoute du boulot, et donc du coût. Avec le tableau, en l'occurrence, ça coûte moins cher.
Par ailleurs, je n'ai jamais trop creusé les display:table-cell et autres, mais il me semble que si c'est pratique pour reproduire le comportement d'une cellule, surtout pour ce qui est du centrage vertical, on ne peut par contre pas l'utiliser pour cette fonction si pratique des tableaux, qui fait que si une cellule est agrandie par son contenu, ça re-dimensionne toutes les autres cellules du rang et de la colonne.