Mise en forme d'une série de vignettes sans tableau

Bonjour.

Existe-t-il une façon de formater une galerie de vignettes en CSS pour obtenir l'image jointe :



Sachant que les photos (120 px x 80 px) sont représentées en bleu, l'entourage étant du CSS.

J'ai essayé tout ce qui m'est passé par la tête mais sans succès : beaucoup de problèmes de centrage et de décalage tenant du fait que certaines images sont en portrait et d'autre en paysage. J'ai bien entendu la possibilité d'enjoliver directement les vignettes dans un logiciel de traitement photo pour obtenir des images carrées ou bien de passer par un tableau comme j'ai fait pour cet exemple mais je voudrais néanmoins savoir si c'est faisable directement en CSS.

Style du tableau :

table {
	border: 0 none inherit;
	border-spacing: 10px;
	margin: 10px auto 0 auto;
}

td {
	margin: 7px;
	text-align: center;
	vertical-align: middle;
	width: 150px;
	height: 150px;
	border: 1px solid #D2D2D2;
	background-color: #FFFFFF;
}

Merci.
Modifié par Nerva (14 Apr 2010 - 18:35)

Hello,

J'avais commis ça il y a quelques temps:
http://covertprestige.info/css/centrer-image/

Eh bien merci, ça fonctionne, sauf que mon bloc de 5 colonnes de 3 lignes n'est pas centré horizontalement mais aligné à gauche.

Voici le CSS adapté :

.imagelist {
	width: 100%;
	overflow: hidden;
	margin: 20px auto 0 auto;
	padding: 0;
	list-style: none;
}

.imagelist li {
	float: left;
	width: 150px;
	margin: 5px;
}

.imagelist .pict {
	display: block;
	height: 150px;
	width: 150px;
	line-height: 150px;
	text-align: center;
	border: 1px solid #D2D2D2;
	background-color: #FFFFFF;
}

.imagelist .pict img {
	vertical-align: middle;
}

Pourtant, .imagelist a bien un margin défini sur auto pour la droite et la gauche.
La page fait 900 pixels de large et c'est peut-être le width à 100 % qui pose problème, je ne sais pas. Je pourrais bien-sûr définir la largeur en pixels (dans mon exemple, à 800 pixels de large, c'est nickel) ainsi que les marges pour le centrage horizontal, mais je préfèrerais que ça fonctionne avec auto une fois l'erreur trouvée.

Note : je teste sous Firefox...
Modifié par Nerva (15 Apr 2010 - 15:08)

Bon, alors j'ai parlé trop vite. Cette mise en page CSS me pose un problème avec la light-box, modèle SlimBox 2, dont les spécifications se trouvent à cette adresse :

http://www.digitalia.be/software/slimbox2

Voilà le problème. Sur une série de 15 photos, une fois l'une d'entr'elles affichée, le totaliseur de vues, qui affiche normalement Photo x sur 15 affiche désormais Photo x sur 31. Quand je clique sur la flèche pour afficher la photo suivante, il ré-affiche une seconde fois la photo en cours et ainsi de suite pour les suivantes, et encore ainsi de suite pour les précédentes.

Dans la page HTML, en supprimant les classes de UL et de LI, la mise en page est bien entendu supprimée mais le problème persiste ; il semblerait donc que ce soit directement dans UL et/ou LI que ça déconne et je ne sais pas quoi faire...
Modifié par Nerva (15 Apr 2010 - 15:08)