Un membre m’a demandé hier s’il était possible de :
« écrire du texte à gauche ou à droite des photos ? En quelque sorte faire une mise en page comme dans une revue ? »
Il existe une solution qui consiste à construire un tableau simple (1 ligne 2 colonnes) sous Word puis de le sélectionner, de le copier puis de le coller dans votre éditeur d’article à l’aide du bouton « Coller depuis word » ce qui vous donnera ceci:
 |  |
Vous pouvez maintenant cliquer dans une case pour taper votre texte ou ajouter une image.
On se rapproche de la demande mais c’est pas encore tout à fait ça.
Regardons maintenant l’onglet code de plus près :
<table border= »1″ cellPadding= »0″ cellSpacing= »0″>
<tr>
<td width= »307″ vAlign= »top »>Voici le texte que je veux mettre à gauche de ma photo pour faire une présentation évoluée</td>
<td width= »307″ vAlign= »top »><a href= »http://fond-ecran-image.com/blog-photo/files/2007/10/bebe-elephant-rose-bleu-kenya-01.jpg » title= »bebe-elephant-rose-bleu-kenya-01.jpg »><img src= »http://fond-ecran-image.com/blog-photo/files/2007/10/bebe-elephant-rose-bleu-kenya-01.thumbnail.jpg » alt= »bebe-elephant-rose-bleu-kenya-01.jpg » /></a></td>
</tr>
</table>
Première chose à modifier à mon avis, la taille de votre tableau, on peut rajouter dans la balise table l’attribut width de manière à ce que votre tableau occupe toute la largeur de la page (et ce quelque soit le thème choisi):
width= »100% »
et du coup modifier aussi la largeur des deux colonnes. Il suffit juste de régler la balise width de la colonne de l’image à 100 pixels par exemple et de supprimer celle de la colonne du texte.
<table border= »1″ cellPadding= »0″ cellSpacing= »0″ width= »100% »>
<tr>
<td vAlign= »top »>J’ai pris cette photo durant un safari au Kenya. L’idée de modifier la couleur des éléphanteaux m’est venue suite à une blague qu’on m’a faite: « alors t’as vu des éléphants bleus là -bas ? ». Je me suis dit pourquoi pas après tout et voila le résultat.</td>
<td width= »100″vAlign= »top »><a href= »http://fond-ecran-image.com/blog-photo/files/2007/10/bebe-elephant-rose-bleu-kenya-01.jpg » title= »bebe-elephant-rose-bleu-kenya-01.jpg »><img src= »http://fond-ecran-image.com/blog-photo/files/2007/10/bebe-elephant-rose-bleu-kenya-01.thumbnail.jpg » alt= »bebe-elephant-rose-bleu-kenya-01.jpg » /></a></td>
</tr>
</table>
Maintenant que tout est en place, il ne reste plus qu’à cacher ce tableau pas beau en modifiant l’attribut border de mon tableau à 0 afin qu’il ne soit plus visible (mais malgré tout, toujours actif).
Et voila (enfin) le résultat final :
La seule chose vraiment intéressante à retenir dans tout ça, c’est que si vous voulez réaliser ce genre de présentation, vous avez juste à copier/coller le code ci-dessous dans votre éditeur de texte dans l’onglet CODE, repasser en mode VISUEL pour ajouter votre texte et votre photo puis changer le border à 0 :
<table border= »1 » width= »100% » cellPadding= »0″ cellSpacing= »0″>
<tr>
 <td vAlign= »top »>TEXTE</td>
 <td width= »100″ vAlign= »top »>PHOTO</td>
</tr>
</table>
Le Web.
Commentaires récents