Aide pour Blog Photo de FEI

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.