Creer votre blog photo | S'abonner à ce blog | Tous les blogs | Login | Fond Ecran



Mise en page évoluée pour vos articles

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. bebe-elephant-rose-bleu-kenya-01.jpg

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. bebe-elephant-rose-bleu-kenya-01.jpg
<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. bebe-elephant-rose-bleu-kenya-01.jpg

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.

Related posts:

Partager

Sur le même thème :
Tout pour votre blog
Ajouter des photos de votre ordinateur sur votre blog
Ecrire un article ou une page ?

10 Responses to “Mise en page évoluée pour vos articles”


  1. 1 Danièle de la Tribu Nguyen Duc Long

    Danièle de la Tribu Nguyen Duc Long

    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 😕 😆

  2. 2 lilas

    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

  3. 3 Web

    Web

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

  4. 4 Web

    Web

    Quelqu’un a-t-il réussi à mettre en application cette présentation dans son blog pour illustrer mon article ???

  5. 5 Danièle de la Tribu Nguyen Duc Long

    Danièle de la Tribu Nguyen Duc Long

    pas encore eu le temps web, je verrai après les vacances de la Toussaint 😕 😆

  6. 6 hubert35

    hubert35

    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

  7. 7 Danièle de la Tribu Nguyen Duc Long

    Danièle de la Tribu Nguyen Duc Long

    J’ai vu les tests de Hubert, c’est parfait. A voir avec mon reportage sur Guissény en novembre 😕 l’espoir fait vivre 😆

  8. 8 Web

    Web

    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% 😉 .

  9. 9 Danièle de la Tribu Nguyen Duc Long

    Danièle de la Tribu Nguyen Duc Long

    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…

  10. 10 didi

    didi

    bonjour,après avoir fait des changements sur un article j’ai des photos déportés vers la droite avec de l »écriture dessus,comment corriger ce problème,merci et bonne journée,didi

Leave a Reply

You must login to post a comment.