Intégrer une légende sous image au mileu d'un texte

[Protanim]

Bonjour,

J'aimerais pouvoir illustre mes articles avec des photos histoire de les rendre plus attractif et qu'il n'y ait pas forcément que du texte (repoussant pour le visiteur).

Histoire d'intégrer mes images au texte, j'utilise le code suivant dans ma feuille de style :

.imgLeft {
float:left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
}

Jusque la pas de soucis. Mais j'aimerais mettre une légende texte sous mes photos (ex : auteur + titre de la photo), et que ça continue à s'intégrer au texte. Si possible police d'écriture de la légende différente de celle du texte pour ne pas confondre.
Et la je ne sais pas comment faire ?

Un peu comme ici http : //www.notre-planete.info/actualites/actu_1891_Asie_penurie_eau.php où il y a le copyright sous la photo.

Merci d'avance

 

[Duffy]

Pourquoi ne pas rajouter le texte dans un div qui contiendrait à la fois ton image et le texte ?

Exemple :

<div class="imgLeft">
<img src="Mon_image.png" />
<span class="copyright">Le texte</span>
</div>

Et là, tu metterais comme CSS :

.imgLeft {
float:left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
background-color:#ma_couleur;
}

Et ensuite tu fais à nouveau la définition de la class copyright afin de lui changer sa police. (L'attribut est font-family si je me souvient bien).

 

[UsagiYojimbo]

Suffit d'examiner son code source dans ce cas :

<div class="ill_actu">
     <img class="img_actu" src="fichier.jpg" alt="" height="226" width="180">
     <br>
     Légende
</div>

Et la partie CSS :

.ill_actu {
	margin: 0 10px 7px 0;
	background-color: #EEE;
	font-size: 11px;
	text-align: center;
	float: left;
}
.img_actu {	border: 1px solid #EEE }

Après suffit d'adapter selon tes besoins.

 

[Protanim]

Merci beaucoup ça marche