[Résolu] Des images avec leur description en dessous, mais centrée

Bonjour à tous !

Je cherche une solution pour présenter des images possédant un texte centré au dessous, mais en fonction de la largeur de la fenêtre du navigateur.

D'après mes tentatives et les différents scripts de galerie photo que j'ai pu observer, cela n'est possible qu'avec des tableaux. Or, le tableau ne conviendrait pas ici car il ne permet pas de mettre une ou plusieurs images sur une ligne, suivant la place dont il dispose.

Pour l'instant, à l'aide d'un bidouillage, le texte parvient à s'aligner en dessous à gauche des images, comme vous pouvez le voir sur cette page. Mais, ça ne me convient pas...


Auriez vous par hasard une idée élégante (et respectueuse de nos chers standards) pour arriver à mon but ?

En vous remerciant
Modifié par floflo (09 Mar 2007 - 14:48)

salut je peut t'aider mais comme ca ca va etre un peu dur si tu a msn pas de souci ***@hotmail.fr

EDIT par Julien Royer : Nous sommes sur un forum d'entraide, et d'autres membres peuvent être intéressés par les réponses données. Merci donc de les faire ici.
Modifié par Julien Royer (07 Mar 2007 - 12:56)

Bonjour,

Au contraire, ce n'est absolument pas "dur". Tu as une liste d'image que tu accompagnes d'un texte descriptif important. En traduisant cela dans une syntaxe html, on obtient logiquement quelque chose comme ceci:

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

<ul>
	
	<li>
		<img src="test.jpg" width="175" height="131" alt="Test" />
		<strong>Description</strong>
	</li>
	
	<li>
		<img src="test.jpg" width="175" height="131" alt="Test" />
		<strong>Description</strong>
	</li>
	
	<li>
		<img src="test.jpg" width="175" height="131" alt="Test" />
		<strong>Description</strong>
	</li>

</ul>


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

ul {list-style:none;}
li {float:left; width:175px; margin:15px; text-align:center;}

Un avertissement en passant : attention à ne pas abuser des positionnements absolu et relatif pour placer des éléments pile là où on le voudrait... si on maitrise mal ce type de positionnement, on peut se retrouver avec des choses catastrophique (comme c'est le cas dans l'exemple de floflo).

Bonjour,
as tu essayé ça ?

http://www.huddletogether.com/projects/lightbox2/

tu as la possibilité de mettre une legende ou commentaire sous chaque image

bonne journée

Alain

Merci pour vos réponses !

Entre temps je suis tombé sur ce sujet, et surtout sur l'article de pompage avec les listes de définitions.

En résumé, la propriété magique qu'il me fallait utiliser était float: left;
Voici ce que j'en ai fait:

Test 2
J'ai repris mon code kamikaze, en y ajoutant le flottement.
C'est bien, mais entre FF et IE7, je vois une différence

Test 3
C'est le procédé de Pompage, avec les listes de définition.
La aussi c'est bien, mais entre FF et IE7, je vois aussi une différence

Test 4
C'est la méthode de Benjamin (merci beaucoup !)
Presque aucune grosse différence FF/IE7, comparé aux 2 exemples précédents.
Le code XHTML est le plus simple dans ce cas. C'est parfait !


Merci à tous pour votre aide !
J'attends vos remarques (IE6 ?), et puis ce sera [résolu]
Modifié par floflo (07 Mar 2007 - 15:52)

floflo a écrit :
Test 4
C'est la méthode de Benjamin (merci beaucoup !)

Pas de quoi!

floflo a écrit :
Presque aucune grosse différence FF/IE7, comparé aux 2 exemples précédents.
Le code XHTML est le plus simple dans ce cas. C'est parfait !

Bon ben tant mieux alors.

floflo a écrit :
J'attends vos remarques (IE6 ?), et puis ce sera [résolu]

"Nos" remarques? Il n'y a pas grand chose à rajouter je pense, si? Éventuellement penser à rajouter une feuille de style par commentaires conditionnels si le besoin s'en fait sentir...

Bonne continuation!