Dans la suite des deux articles précédents, voici une autre façon de mettre une image dans un article ou une page simple, en lui associant un texte d'information.

Il suffira de mettre l'image en place, puis :

- soit ajouter au paragraphe une class CSS (hyper simple mais le texte n'acceptera que des retours à le ligne)

- soit de modifier légèrement le code en ajoutant un élément <div class="  ">  qui contiendra le paragraphe avec la photo (dans ce cas le texte d'accompagnement n'impose aucune contrainte).

Dans les deux cas le visuel est le même.

Étalage de fruits
Petit commerce local
Photo d'illustration 310 x 310 px

Dans cette illustration ❶ on ne peut faire que des retours à la ligne, pas des paragraphes différents. 
Pourquoi ?  parce que l'élément html qui contient le tout est un simple paragraphe <p> et qu'on ne peut pas mettre un paragraphe dans un autre.


[ la bordure rouge est appliquée sur le paragraphe ]

= = =

= = =

HTML

Dans l'article initial (Image pas à pas) le code obtenu au point 4-1 est:

<p><img src="http://ekladata.com/KaUtRztgd89PeBd8ce-YImbZKG8.png" alt="" width="310" height="310" /><br /><strong><span style="color: #0000ff;">&Eacute;talage de fruits<br /></span></strong><span style="color: #0000ff;">Petit commerce local<br /></span><em>Photo d'illustration 310 x 310 px</em><strong></strong><br /><br /></p>

Pour obtenir le résultat ❶ ci-dessus il suffit d'ajouter une class=" " au paragraphe <p>

<p class="boitimage2"><img src="http://ekladata.com/KaUtRztgd89PeBd8ce-YImbZKG8.png" alt="" width="310" height="310" /><br /><strong><span style="color: #0000ff;">&Eacute;talage de fruits<br /></span></strong><span style="color: #0000ff;">Petit commerce local<br /></span><em>Photo d'illustration 310 x 310 px</em><strong></strong><br /><br /></p>

Pour obtenir le résultat ❷ de cette page il suffit de placer le code obtenu en 4-1 dans un élément <div> </div> et d'affecter une class=" " à cet élément :

<div class="boitimage2">
<p><img src="http://ekladata.com/KaUtRztgd89PeBd8ce-YImbZKG8.png" alt="" width="310" height="310" /><br /><strong><span style="color: #0000ff;">&Eacute;talage de fruits<br /></span></strong><span style="color: #0000ff;">Petit commerce local<br /></span><em>Photo d'illustration 310 x 310 px</em><strong></strong><br /><br /></p>
</div>

 CSS commun :

qui peut être déclaré une fois et valable sur tout le blog

<style><!--
.boitimage2 { background-color: #eee; padding: 20px; border: 2px solid red;}
.boitimage2 img { margin: 10px; float:left;}
.boitimage2 p { font-size: 16px;}
.boitimage2:after {content: ""; display: block; clear: both; }
--></style>

Pour mettre en place ces règles CSS, idem que page "Image + texte centré"

 Remarque: les caractères<!-- et --> s'ajoutent automatiquement s'ils sont absent de l'écriture au clavier.