Voici comment mettre, sur une même page et côte à côte, un texte et une image.
Bien entendu, la taille de l'image doit être adaptée à la place qu'elle requiert.
Mettre une image trop grande réduirait considérablement, voire rendrait nulle, la place réservée au texte et inversement.
Pour ma part, je me suis fixé une image de 200x200 mais 300x300 me paraît également convenable.
Plus l'image sera grande, plus elle empiètera sur la partie gauche, donc sur le texte.
Bien entendu, on peut inverser texte et image. Il suffit de changer "right" et "left".
CODE
<div >
<table style="width:100%; border-collapse:collapse;">
<tbody >
<tr >
<td >Tous les objets de la gamme de votre choix afin de remplir l'espace qui vous est réservé dans la partie gauche de la page jusqu'à ce que vous soyez arrivé en bas de l'image.</td>
<td style="text-align:right;"><img alt="48" src="http://img.over-blog-kiwi.com/1/30/51/51/20150118/ob_4b9878_cuiller-ondulante.jpg" style="border:none; width:200px; height: 200px;" vspace="0" /></td>
</tr>
</tbody>
</table>
</div>
RESULTAT
| Tous les objets de la gamme de votre choix afin de remplir l'espace qui vous est réservé dans la partie gauche de la page jusqu'à ce que vous soyez arrivé en bas de l'image. |  |
Il est également possible de présenter un objet et de faire en sorte que le texte soit un lien vers le catalogue des objets ou vers un autre site.
CODE
<div>
<table style="width:100%; border-collapse:collapse;">
<tbody>
<tr>
<td><a href="http://produits.rapala.fr/products?keys=&field_product_category_tid_i18n=3054">Tous les objets de la gamme rapala sur une seule et même page que vous pouvez consulter en cliquant dessus.</a></td>
<td style="text-align:right;"><img alt="48" src="http://img.over-blog-kiwi.com/1/30/51/51/20150118/ob_4b9878_cuiller-ondulante.jpg" style="border:none; width:200px; height: 200px;" vspace="0" /></td>
</tr>
</tbody>
</table>
</div>
RESULTAT
Autre exemple en renvoyant vers un article d'un blog avec une image.
CODE
<div>
<table style="width:100%; border-collapse:collapse;">
<tbody>
<tr>
<td><a href="http://www.pecheurdumorin.fr/2015/01/revue-de-detail-des-grandes-familles-de-leurres.html">TOUTES LES GRANDES FAMILLES DE LEURRES SUR LE BLOG DES PECHEURS DE MARNE ET DU GRAND MORIN </a></td>
<td style="text-align:right;"><img alt="48" src="http://img.over-blog-kiwi.com/1/30/51/51/20150118/ob_4b9878_cuiller-ondulante.jpg" style="border:none; width:300px; height: 300px;" vspace="0" /></td>
</tr>
</tbody>
</table>
</div>
RESULTAT
Haut de page
commentaires