Quel code html permet de faire sa ...
Résolu
maxouxico
Messages postés
39
Date d'inscription
Statut
Membre
Dernière intervention
-
S. -
S. -
Bonjour, je souhaiterais mettre pleins de petite image à la suite des autres comme sur ce site: http://lol-fr.com/champions/#t:20
Cordialement
ET merci infiniment !!!!!
Cordialement
ET merci infiniment !!!!!
A voir également:
- Quel code html permet de faire sa ...
- Code ascii - Guide
- Code de déverrouillage oublié - Guide
- Code puk bloqué - Guide
- Code activation windows 10 - Guide
- Editeur html - Télécharger - HTML
3 réponses
Salut,
il y a plusieurs manières de faire ceci.
En l'occurence, un petit clic-droit, "montrer le code source" sur la page en question t'aurait indiquer que c'est fait avec une liste (<ul> et <li>).
Personnellement, je te conseillerais un tableau, qui est assez intuitif dans ce cas d'utilisation, bien qu'il soit déconseillé dans la plupart des autres cas.
il y a plusieurs manières de faire ceci.
En l'occurence, un petit clic-droit, "montrer le code source" sur la page en question t'aurait indiquer que c'est fait avec une liste (<ul> et <li>).
Personnellement, je te conseillerais un tableau, qui est assez intuitif dans ce cas d'utilisation, bien qu'il soit déconseillé dans la plupart des autres cas.
Salut,
Pour ma part, je déconseille les tableaux.
Ceux-ci servent à présenter des données structurées, pas à la mise en forme.
Tu peux utiliser un <div> dont tu modifieras la propriété CSS « display » en lui indiquant « inline-block » comme valeur.
Comme Meoran l'a dit, le site que tu montres utilises une liste non-ordonnées (ul).
Les éléments <li> sont rendus flottants (float: left) et leur puce est retirée (list-style: none).
Pour ma part, je déconseille les tableaux.
Ceux-ci servent à présenter des données structurées, pas à la mise en forme.
Tu peux utiliser un <div> dont tu modifieras la propriété CSS « display » en lui indiquant « inline-block » comme valeur.
Comme Meoran l'a dit, le site que tu montres utilises une liste non-ordonnées (ul).
Les éléments <li> sont rendus flottants (float: left) et leur puce est retirée (list-style: none).
Tout est bien aligné parce que les images font la même taille.
Dans le cas contraire, on pourrait utiliser la solution du inline-block pour préciser une largeur (possible seulement avec les block) sans retour à la ligne après chaque élément (inline).
Je préfère ça :
De plus, l'usage de <ul> me paraît plus justifié que <table> car justement il s'agit d'une liste.
Dans le cas contraire, on pourrait utiliser la solution du inline-block pour préciser une largeur (possible seulement avec les block) sans retour à la ligne après chaque élément (inline).
Je préfère ça :
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>Plutôt que :<table>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>Sachant que le résultat est le même et qu'il n'y a pas ambiguïté avec la sémantique.
De plus, l'usage de <ul> me paraît plus justifié que <table> car justement il s'agit d'une liste.
Effectivement, la meilleure solution, c'est de créer une liste non ordonnée (<ul> et <li>) dans laquelle tu fais flotter chaque <li> à gauche (float: left;).
Ça donnerai quelque chose du genre :
Ça donnerai quelque chose du genre :
<ul>
<li>
<img src="img1.jpg" alt="Texte alternatif" />
<p>Titre sous l'image</p>
</li>
<li>
<img src="img2.jpg" alt="Texte alternatif" />
<p>Titre sous l'image</p>
</li>
...
</ul>
