Intégrer une légende sous image au mileu d'un texte
4 messages
• Page 1 sur 1
- Protanim
- WRInaute occasionnel

- Messages: 306
- Inscription: 2 Avr 2005
Intégrer une légende sous image au mileu d'un texte
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 :
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
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 :
- Code: Tout sélectionner
.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
- WRInaute discret

- Messages: 80
- Inscription: 6 Déc 2007
Re: Intégrer une légende sous image au mileu d'un texte
Pourquoi ne pas rajouter le texte dans un div qui contiendrait à la fois ton image et le texte ?
Exemple :
Et là, tu metterais comme CSS :
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).
Exemple :
- Code: Tout sélectionner
<div class="imgLeft">
<img src="Mon_image.png" />
<span class="copyright">Le texte</span>
</div>
Et là, tu metterais comme CSS :
- Code: Tout sélectionner
.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 - WRInaute accro

- Messages: 8575
- Inscription: 23 Nov 2005
Re: Intégrer une légende sous image au mileu d'un texte
Suffit d'examiner son code source dans ce cas :
Et la partie CSS :
Après suffit d'adapter selon tes besoins.
- Code: Tout sélectionner
<div class="ill_actu">
<img class="img_actu" src="fichier.jpg" alt="" height="226" width="180">
<br>
Légende
</div>
Et la partie CSS :
- Code: Tout sélectionner
.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.
4 messages
• Page 1 sur 1
Lectures recommandées sur ce thème :
- Complément à l'étude PageRank et backlinks - 08-08-2005
- Les 2 échelles de PageRank : toolbar et DMOZ - 10-08-2004
- Utiliser Actifpub pour l'intégration d'un flux RSS externe sur son site - 15-09-2004
- La terre vue par satellite : accord entre Google et Spot Image - 23-01-2007
- Tutoriel sur le sitemap Google pour les images - 12-04-2010
- Ajouter un moteur de recherche d'images sur son site - 24-07-2007
- AppJet racheté par Google pour améliorer Google Wave - 10-12-2009
- Idées d'optimisation du référencement des images - 19-09-2008
Consultez la description détaillée des produits ou services de Google suivants : Google Image Labeler
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités
