[Résolu] Mise en forme image

Bonjour,
Je voudrais faire une page galerie avec des photo un peut comme google image.
Et je me demandait, pour mettre en forme ceci, dois je utiliser un tableau ou y a t-il une méthode sans tableau?

Merci
Modifié par cerede2000 (27 Feb 2007 - 11:50)

Bonjour,

Tu peux eventuellement utiliser une liste de définitions.

@++
Modifié par Tony_M (25 Feb 2007 - 10:08)

Bonjour,

Tony_M a écrit :
Tu peux eventuellement utiliser une liste de définitions.

Non.

La liste de définition n'est pas un couteau suisse à tout faire, contrairement à une certaine mode initiée en particulier par cet article. C'est à la base une structure de liste destinée à... baliser des définitions. Un seul autre usage (problématique) est explicitement suggéré par HTML4.01, sans rapport avec une galerie de photos (balisage d'un dialogue).

Les seuls éléments génériques "couteau suisse" en HTML4.01 / XHTML1.0 sont le <div> et le <span>

Pour la présentation, le tableau est en effet une solution fréquente dans ce cas pour remédier aux implémentations CSS actuellement insuffisantes.
Modifié par Laurent Denis (25 Feb 2007 - 10:34)

Je me repens Laurent.

Merci pour la précision.

Ok merci, mais des DIV contenants des SPAN ca peut le faire non?

Bonjour,

Si tes miniatures et les éventuelles descriptions qui y sont associées seront toujours de la même taille, tu peux envisager une liste non ordonnée.

Et pas de réponse a ma question?

Alors <DIV> et <SPAN> ? Vous en pensez quoi?

Si ce ne sont pas des définitions, ça reste une liste d'images. Pour ma part, dans ce genre de cas j'utilise une liste <ul> avec un inline-blo... pardon un float: left. C'est de la bidouille, mais le tableau a cet inconvénient saugrenu d'avoir un nombre de colonnes fixe ce qui peut poser problème si la mise en page est étirable.

Dans le cas d'une mise en page qui n'est pas étirable, le tableau reste la solution la moins fatigante.

Hum l'histoire de la liste d'image ca me plait pas tellement :s
Et la solution div et span est super fluide aussi
Je veut jute savoir si ca respecte les standard :d

Oui, <div> et <span> sont des balise neutres. Mais les tableaux ne sont pas anti-standards (normes) non plus, ils est déconseillé de mettre en page à l'aide de tableaux, pas interdit.

Les tableaux posent surtout problème dans le cas où ils brisent la linéarité du contenu : si dans le fichier HTML les éléments qui devraient se suivre ne se suivent pas. Imagine par exemple que tu accolles une légende à chaque image, mais que tu places les images sur une ligne et les légendes sur la ligne suivante du tableau. Tu auras dans l'ordre du fichier d'abord toutes les images, et ensuite toutes les légendes, au lieu de l'image puis la légende, puis l'image puis... le contenu n'est donc plus linéaire.
Modifié par Lanza (26 Feb 2007 - 22:32)

Oui je comprend, mais alors le mieux pour avoir image légende image légende?
Avec la légende en dessous de l'image?
Et comme dit dans le post précédant une ligne image une ligne légende et dans tableau
Qu'est ce que c'est?
Modifié par cerede2000 (26 Feb 2007 - 22:29)

Le mieux c'est que la légende soit directement après l'image dans le HTML. Dans la même cellule de tableau, donc, si tu optes pour les tableaux. Si tu optes pour une autre solution, ce devrait être naturel.

L'exemple que j'ai donné était un contre exemple.
Modifié par Lanza (26 Feb 2007 - 22:40)

L'usage des tableaux est utilisé souvent pour les galleries photos, parceque c'est compliqué d'obtenir un alignement vertical sans les tableaux, c'est pour ça que la question revient tout le temps est que c'est présenté comme une solution.

Si tu n'as pas a faire a ce probléme d'alignement, tu peux utiliser tes div et des span, ce serat mieux, plus souple, plus flexible.

Lanza a écrit :
Le mieux c'est que la légende soit directement après l'image dans le HTML. Dans la même cellule de tableau, donc, si tu optes pour les tableaux. Si tu optes pour une autre solution, ce devrait être naturel.

L'exemple que j'ai donné était un contre exemple.

Oui mais si je met l'image et ensuite le texte dans la cellule d'apres le texte ne pourra pas etre sous l'image :S Coment comment faire?

cerede2000> Il faut les mettre dans la MEME cellule. Par exemple chacun dans un paragraphe, un div ou spéarés par un <br> ou... Pas dans deux cellules différentes, c'est tout. D'ailleurs ça ne présente pas d'intérêt.

matmat > Oui l'alignement vertical est problématique parce qu'on peut pas utiliser les inline-block et qu'en float ça casse tout dès que deux blocs ne font pas la même hauteur.
Modifié par Lanza (27 Feb 2007 - 09:36)

cerede2000 a écrit :
Hum l'histoire de la liste d'image ca me plait pas tellement :s
Et la solution div et span est super fluide aussi
Je veut jute savoir si ca respecte les standard :d

Mais pourquoi tu en veux tellement à cette petite liste qui n'a jamais fait de mal à personne? D'autant qu'elle correspond tout à fait au contenu présenté: une liste de photos.

Concrètement, donc, tu pourrais partir sur quelque chose du style:

[b][#black]HTML[/#][/b]

<ul>
	
	<li>
		<a href="#"><img alt="Mon image" src="image.png" /></a>
		<p><strong>Titre de l'image</strong> Infos complémentaires</p>
	</li>
	
	<li>
		<a href="#"><img alt="Mon image" src="image.png" /></a>
		<p><strong>Titre de l'image</strong> Infos complémentaires</p>
	</li>
	
	...
	
</ul>



[b][#black]CSS[/#][/b]

* {margin:0; padding:0; border:none;}
ul {list-style:none;}
li {float:left; text-align:center; width:200px; margin:20px 20px 0 0;}
strong {display:block;}

Effectivement la liste semble sympa lol.
Merci