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.
Pas mal
maintenant il n’y a plus qu’à…mon dieu mes journées ne vont plus suffire, il va falloir que j’y passe mes nuits 
web,au secours je n’y comprend rien,ben je suis pas prete a ouvrir un blog,mais je dit bravo a fei et a toi web,
j’aurai jamais assez de temps,tu peut nous donner des journées de 72 h?”je rigole”j’essaierai a tete reposée,alors a bientot
C’est en essayant qu’on y arrive
.
Si tu ne regardes que les dernières lignes, tu verras que c’est pas si compliqué.
Quelqu’un a-t-il réussi à mettre en application cette présentation dans son blog pour illustrer mon article ???
pas encore eu le temps web, je verrai après les vacances de la Toussaint
j’ai testé sur 2 colonnes comme ton modèle et cela fonctionne très bien voir l’article:
http://blog2hubert.fond-ecran-image.com/blog-photo/2007/10/22/test-de-tableau-pour-presentation/
et j’ai également un peu corsé la chose en mettant 3 colonnes comme ici:
http://blog2hubert.fond-ecran-image.com/blog-photo/2007/10/24/goelands/
pour ceux que cela intéresse en voici le code:
<table border=”1″ cellpadding=”0″ cellspacing=”5″ width=”500″>
<tr>
<td width=”120″>PHOTO</td>
<td width=”240″>TEXTE</td>
<td width=”120″>PHOTO</td>
</tr>
</table>
la largeur totale du tableau est ici de 500px soit 2 x 120 pour les photos, 240 pour la zone texte et 20 d’espace pour aérer la zone texte. Vous pouvez moduler comme bon vous semble en restant dans une taille raisonnable.
On peut bien sur supprimer la bordure en mettant border=”0″ ou l’augmenter en mettant un chiffre plus grand.
A vous de jouer
J’ai vu les tests de Hubert, c’est parfait. A voir avec mon reportage sur Guissény en novembre
l’espoir fait vivre 
Ce code ne passe pas dans les commentaires, uniquement pour les articles.
.
Sinon attention pour le 500px, si jamais tu changes de thème, ça ne marchera pas, rien ne vaut le 100%
Ouf j’ai réussi à mettre le tableau en application (2 colonnes) pour mes maisons de Ménéham.
La prochaine fois, j’essaie sur 3 colonnes…