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.
| 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. |  |
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.
| 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. | |
<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 :
| 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. | |
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