106.284 visiteurs uniques depuis la création pour 1.966.617 articles lus

METTRE UNE IMAGE ET DU TEXTE COTE A COTE SUR UNE PAGE DE SITE ET RENVOYER VERS UN CATALOGUE.

par André Marini 18 Janvier 2015, 11:20 Liens

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 >

<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

Tous les objets de la gamme rapala sur une seule et même page que vous pouvez consulter en cliquant dessus.

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>