5568 sujets

Sémantique web et HTML

Liste à puces contenant des blocs

Bonjour, j'aimerai réaliser une liste de produits, placés cotes à cotes, 3 par lignes.
C'est juste une image d’aperçu et le nom (sur lequel un lien serait placé). J'avais pensé à utiliser figure img et figcaption. Mais comme il s'agit d'une liste finalement, serait il correct de placer ceci dans un liste ul?


<ul>
<li>
<figure>
  <a href="http://www.ficheduproduit.com"><img src="imgproduit.jpg" alt="Produit"></a>
  <figcaption><a href="http://www.ficheduproduit.com">Nom du produit</a></figcaption>
</figure>
</li>
</ul>
Pourquoi pas, avec un code dans ce genre là alors :


<ul>
<li>
<figure>
  <a href="http://www.ficheduproduit.com"><img src="imgproduit1.jpg" alt=""></a>
  <figcaption><a href="http://www.ficheduproduit.com">Nom du produit 1</a></figcaption>
</figure>
</li>
<li>
<figure>
  <a href="http://www.ficheduproduit.com"><img src="imgproduit2.jpg" alt=""></a>
  <figcaption><a href="http://www.ficheduproduit.com">Nom du produit 2</a></figcaption>
</figure>
</li>
<li>
<figure>
  <a href="http://www.ficheduproduit.com"><img src="imgproduit3.jpg" alt=""></a>
  <figcaption><a href="http://www.ficheduproduit.com">Nom du produit 3</a></figcaption>
</figure>
</li>
<li>
<figure>
  <a href="http://www.ficheduproduit.com"><img src="imgproduit4.jpg" alt=""></a>
  <figcaption><a href="http://www.ficheduproduit.com">Nom du produit 4</a></figcaption>
</figure>
</li>
</ul>


Puis tu applique un float aux <li>, ou un inline-block. Smiley cligne
Modifié par Patidou (19 Jul 2012 - 15:14)
Merci beaucoup pour cette réponse rapide, oui c'est bien ainsi que je pensais procéder, avec un inline-block. J'ai l'habitude d'utiliser les li avec inline-block, mais je doutais sur le fait d'imbriquer d'avantage de contenu, de charger cette pauvre li qui est souvent plus "linaire".

Maintenant que je sais que c'est une pratique acceptable, il n'y a plus qu'à!
Merci Smiley cligne
Sujet clos
Aller à