Liste d'images horizontale + lien sous chaque image

Bonjour,

J'affiche dans ma page html une liste de 3 images horizontalement, puis dessous encore 3 images horizontales, puis encore 3 images, etc...

J'utilise le code suivant dans la feuille de style :

.enligne li {
display: inline;
list-style-type: none;
padding: 0.2em;
background-color: none;
border: 1px solid #ff00ff;
margin: 1em;
}
Dans ma page j'utilise cette liste pour les 3 première images que je répète ensuite pour les autres:

<ul class="enligne">
<li><img src="image1.jpg" ></li>
<li><img src="image2.jpg" ></li>
<li><img src="image3.jpg" ></li>
</ul>
Mon problème, je voudrais placer sous chaque image une petite phrase (qui servira de lien ensuite). Je voudrais que ce texte soit aligné sous l'image.

Je n'arrive pas à afficher correctement ce texte il s'affiche n'importe comment ou alors il s'affiche avec la bordure de l'image

Pourriez vous m'aider à centrer mon texte sous chaque image ?
Merci
Modifié par pan (13 May 2006 - 10:41)

salut,

A mon avis le plus simple resterai une mise en page par tableau...

essaie plutot avec li {float:left;} a {display:block;}

je suis d'accord
le mieux c'est le float

perso j'utilise ça en css

#divgalerie {
	background-color: transparent;
	padding: 0;
	margin: 10px 0;
	width: 500px;
}
.mesimages {
	background-color: black;
	float: left;
	padding: 2px;
	margin: 20px 5px;
	width: 94px;
	height: 74px;
}

en suite tu affiche tes image dans les div class="mesimage"

le tout contenu dans le div id="divgalerie"

<div id="galerie">
	<div class="mesimages">
		<a href="ulr"><img alt="" title="" src="laphoto" /></a>
		<p><a href="url">Agrandir</a></p>
	</div>
</div>

a parametrer bien sûr
bon courage

Merci merci je m'apporche de ce que je cherche

Par contre, j'ajoute un filet autour de l'image
border: 1px solid #ff00ff;
du coup comme le lien est dans le div le filet entoure l'image et le lien.
Je voudrais que le filet n'entoure que l'image...

IL me semble bien que c'est possible mais je n'arrive pas à parametrer le truc.
Si je sors le lien du div le lien n'est plus du tout sous l'image
Désolé pour mes questions de débutant

tu l'attribues a quelle balise ton border ?

C'est ainsi dans ma page :

<div class="vignettes">
<a href="ulr"><img src="image.jpg" border="0"/></a>
<p align="center"><a href="url">Lien</a></p></div>

Et dans ma css :

.vignettes {
background-color: none;
float: left;
padding: 0.2em;
border: 1px solid #ff00ff;
margin: 22px 5px 0px;
}
Je vois bien que mon filet s'applique à la divvignette mais je ne vois pas comment sortir le lien de cette div...

Bonjour à tous et bienvenue à pan !

La balise de mise en forme "Code" (sous les smileys) permet d'encadrer ton code source pour une meilleure lisibilité des messages.

Je t'invite à éditer tes posts (bouton Editer en haut à droite) afin de rajouter ce balisage, conformément aux règles du forum, notamment quant à la mise en forme générale des messages.

[code].vignettes {
background-color: none;
float: left;
padding: 0.2em; /*supprimer border ici*/
margin: 22px 5px 0px;
}
.vignettes img {
border: 1px solid #ff00ff; /***le placer ici***/
}

Hello VERO message bien noté je vais faire gaffe

JP94 ok merci je vais essayer

C'est royal ça fonctionne, euh j'ai pas pensé un instant à

.vignettes img {
}

Merci en tout cas