Mise en page d'images avec feuille de style

[Pan]

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 ilste pour les 3 première images que je répète ensuite:

<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.

Pourriez vous m'aider à centrer mon texte sous chaque image ?
Merci

 

[siokoden]

Ta essayé comme ca ? :

.enligne li {
display: block;
float : left;
text-align : center;
list-style-type: none;
padding: 0.2em;
background-color: none;
border: 1px solid #ff00ff;
margin: 1em;
}

<ul class="enligne">
<li><img src="image1.jpg" /><br />Texte</li>
<li><img src="image2.jpg" /><br />Texte</li>
<li><img src="image3.jpg" /><br />Texte</li>
</ul>

 

[Pan]

Enfait voilà j'ai trouvé :

la css

#divboutiques {
	background-color: transparent;
	padding: 0;
	margin: 0;
	
}
.vignettes {
	background-color: none;
	float: left;
	padding: 0.2em;
	margin: 22px 5px 0px;
}

.vignettes img {
border: 1px solid #ff00ff; 
}

dans la page dans un tableau de 500px:

<table width="500" border="0" align="center">
  <tr>
    <td><div id="boutiques" align="center"><div class="vignettes">
		<a href="lien.htm"><img src="image.jpg" border="0"/></a>
		<p align="center"><a href="lien.htm">Lien</a></p></div>
</div>
</td>
</tr>
</table>

mettre un <br> ne convenait pas car il restait entouré par le filet de la bordure

Voila voila

 

[siokoden]

hum, je voit pas l'interet de mettre un tableau, pasque sinon tu pouvais t'en servir comme ceci :

<table><tr><td><img ...></td></tr><tr><td>Lien</td></tr></table>

Mais je te conseil d'utiliser les div de cette maniere pour moi ca marche :

div.flot2{
        height : 220px;
        [color=red]width : 125px;[/color]
        float : left;
        margin-left : 15px;
        margin-right : 15px;
        text-align : center;
        }


<div class=flot2><a href="" title=''>
<img src=img/.jpg alt=''  /> Lien Texte</a></div>

Met le width du div a la taille de tes images, ton lien passera en dessous automatiquement.

 

[cedric_g]

J'utilise aussi des listes (UL / LI) et ce à toutes les sauces !

Voir par ex. mon dernier "sous-site" => -http://reportages.aube-nature.com

=> La liste des reportages est une liste (avec images)
=> Les galeries photo sont gérées avec des listes aussi (voir code page + feuille de style)


:wink: