mardi 13 octobre 2009

Publier des images cote à cote

Lorsque l'on a plusieurs photos à présenter dans un article, souvent on a envie de varier la mise en page. Pourquoi ne pas publier des images côte à côte ?
Pour ce faire, il suffit de copier le code suivant (pour 2 colonnes et 3 lignes).

<table><tbody>
<tr><td>photo 1-1
</td><td>photo 1-2
</td></tr>
<tr><td>photo 2-1
</td><td>photo 2-2
</td></tr>
<tr><td>photo 3-1
</td><td>photo 3-2
</td></tr>
</tbody></table>

Ensuite, il ne restera plus qu'à intégrer les images dans les cellules des tableaux (à la place des photo 1-2, photo 2-2 etc selon l'endroit où on veut les positionner).
Par rapport à l'exemple proposé, si vous avez besoin de moins de lignes (ou de plus), supprimez des lignes ou rajoutez en autant que nécessaire.

A+

118 commentaires:

  1. Je viens de "tomber" sur ton blog et c'est vraiment sympa de partager tes connaissances! Je viens de tester ton code pour mettre des images côte à côte et çà fonctionne très bien, donc un grand MERCI! Bonne continuation et à bientôt!

    RépondreSupprimer
  2. Je suis fan moi aussi !!

    Merciiiii !

    RépondreSupprimer
  3. Parfait !
    J'ai même compris comment aligner trois images !
    Mais comment fait-on pour créer une ou espace de cinq pixels entre les images ?
    Merci pour votre aide.

    RépondreSupprimer
  4. Fantastique!Continue comme ça!

    RépondreSupprimer
  5. Salut,
    Tout c'est bien déroulé sur le message sauf que je n'arrive pas à cliquer sur le mi-tigre mi-homme!
    Est-ce normal?
    moi

    RépondreSupprimer
  6. je n'y arrive pas !!!! il me faut quelques explications de plus, désolée.
    je n'ai pas de tableau qui s'affiche. et je passe le reste des détails qui clochent auxquels je ne comprends rien.
    merci d'avance pour que j'apprenne enfin !

    RépondreSupprimer
  7. Bonjour Karalys,

    Il n'y a pas de tableau qui s'affiche mais les images se présentent comme prises dans un tableau.

    Envoyez moi votre article et l'adresse des images afin que je vous écrive ce qu'il y a à faire.
    Cf mon adresse sur mon profil Gmail.

    RépondreSupprimer
  8. Mais comment fait-on pour créer une ou un espace de cinq pixels entre les images ?
    Et pour centrer un titre sous chaque image ?
    Merci pour votre aide.

    RépondreSupprimer
  9. Bonsoir et merci pour les "tuyaux".

    Question: Je n'arrive pas à transformer le code pour un affichage d'une seule ligne mais de trois photos cote à cote ?
    Merci par avance.

    RépondreSupprimer
  10. Bonjour jojo30,

    Pour 3 images et 1 seule ligne ?

    <table><tbody>
    <tr><td>photo 1-1
    </td><td>photo 1-2
    </td><td>photo 1-3
    </td></tr>
    </tbody></table>

    RépondreSupprimer
  11. Bonjour

    Moi ce que je ne comprend pas c'est ou doit-on mettre ce code dois-je aller dans presentation - modifier html et à quel niveau où est ce ailleurs.
    donnez-moi plus de détails je suis pas très douée et c'est mon premier blog

    Merci d'avance

    RépondreSupprimer
  12. Bonjour Saturne,

    Bé, dans l'onglet Html de rédaction du message. C'est bien là que vous voulez mettre vos images.
    Ensuite il faudra intégrer vos images puis les déplacer à la place des photo 1-1, photo 1-2 etc.

    RépondreSupprimer
    Réponses
    1. Bonjour Waldorf et Statler,
      Je souhaite vous adresser un grand MERCI, car grâce à cet article et votre réponse au commentaire de Saturne, j'ai enfin pu aligner mes photos comme je le voulais dans la galerie nail art de mon blog. Comment aurais-je pu trouver une telle formule sans vous.
      Depuis la création de mon blog, j'ai beaucoup eu record à vos explications, sans vous je pense que j'aurais abandonné.
      Encore merci et bonnes fêtes de fin d'année.
      Catherine

      Supprimer
    2. Bonjour Catherine,
      Un grand merci pour vos passages, le fait d'être revenu et de m'avoir laissé un si gentil message.
      Je vous souhaite de très belles fêtes.

      Supprimer
  13. Waldorf et Statler a dit…

    Bonjour jojo30,

    Pour 3 images et 1 seule ligne ?
    13 septembre 2010 19:45

    Merci, j'y suis parvenu.
    Voici le résultat :
    http://vente-tortues-de-terre.blogspot.com/

    Mais 2 précisions cependant :
    (Concernant le message texte de bienvenue)
    1) Comme vous pouvez le constater, les photos ne sont pas alignées ? y a il un moyen ?

    2)Ayant recu un commentaire, j'ai bien sur apporté ma réponse : mais je constate que j'ai fait une faute que je n'arrive pas à corriger (comme dans un message) ?
    Merci par avance.

    RépondreSupprimer
  14. Bonjour jojo30,

    Chez moi les photos sont alignées. Peut être un problème de taille d'écran par rapport au mien ?

    Pour rectifier le texte d'un commentaire sur un message, il n'y a pas d'autre solution que de saisir un nouveau commentaire et d'effacer celui avec une erreur.

    RépondreSupprimer
  15. Bonjour

    "Ensuite il faudra intégrer vos images puis les déplacer à la place des photo 1-1, photo 1-2 etc."

    C'est vrai que cela paraît évident pour les connaisseurs mais moi je patauge, d'accord j'ai intégré le code dans html du message mais comment fait-on pour intégrer les images, je suis vraiment désolée d'être aussi nulle.
    Quand j'intègre le code et que j'affiche le message j'ai le titre de mon message et en dessous
    TOUS MES ARTICLES
    photo 1-1 photo 1-2 photo 1-3

    Les photos que je veux intégré sont des photos jpg
    comme Brispot.jpg

    Help Help !

    Merci d'avance pour votre réponse

    RépondreSupprimer
  16. Bonjour Saturne,

    1) dans l'onglet html de rédaction des messages vous copiez le code.
    2) à un autre endroit du message, vous intégrez l'image 1 (là je m'excuse mais j'explique pas : allez voir dans le libellé Image à gauche, vous trouverez comment faire).
    3) vous sélectionnez tout le code de l'image (de <a href à /a>
    4) vous déplacez et collez ce code à la place du texte du tableau "photo 1-1" (si c'est la position que vous avez choisi).
    5) vous recommencez les étapes 2 à 4 pour les autres images en plaçant les images dans la bonne cellule.

    RépondreSupprimer
  17. Bonsoir

    Merci mille fois j'ai réussi au prix d'une journée entière mais c'est magnifique, je suis loin d'avoir fini mon blog mais ce que c'est gai de faire travailler ses neurones.J'ai fait le test avec 2 colonnes et 6 photos
    Si je veux ajouter des colonnes dois tout recommencer à zero ou puis-je rajouter des colonnes mais alors comment je fais.
    autre question J'ai fait un album dans picasa au départ cela fonctionne très bien et puis je ne sais pas pourquoi mais soit les photos disparaissent soit mon album n'est plus public et je dois chaque fois recommencer y a t-il une astuce ou un autre moyen et enfin comment rétrécir les photos pour les avoir en tout tout petit format sans déformations.
    Encore une fois merci beaucoup de votre aide

    RépondreSupprimer
  18. Bonsoir Waldorf
    Avant pour pouvoir coller deux photos, il suffisait de changer la largeur de chaque photo ( width) de façon à ce que les deux fassent la largeur d'une photo "normale". Est ce encore possible ?
    Merci pour la réponse, bonne journée.
    christianetmarieauboutdumonde.blogspot.com

    RépondreSupprimer
  19. Bonjour Marie Hélène,

    A priori oui.
    Ta méthode est intéressante mais peut être ne s'adresse-t'elle pas à tout le monde car elle demande un peu plus de technique (ou de pratique, c'est selon).

    Belle journée à toi aussi

    RépondreSupprimer
  20. Merci pour ta réponse si rapide. Je vais donc réessayer cette veiille technique !!!!!
    Bonne nuit et quand tu liras ce message bonne journée !!!

    RépondreSupprimer
  21. Salut,
    après avoir lu et relu ts vos commentaires (merci Saturne d'être la car tes questions m'ont pas vrt aidé mais je me sens moins seule!), je n'arrive tjs pas a faire ce tableau...
    Tu parles d'un coda image ds ton etape 3:
    "vous sélectionnez tout le code de l'image (de < a href à /a >"
    mais je ne vois rien qui ressemble a ca... Je suis sur un MAC alors je ne sais pas si ca change quelque chose.
    Merci de m'aider car la je pete un cable!

    RépondreSupprimer
  22. Bonjour Lauriane et Florian,
    Cela n'a rien à voir avec Mac ou pas Mac.
    Dans l'étape 2) je dis qu'il faut intégrer l'image. Le code est dans l'onglet html de rédaction du message ensuite.

    RépondreSupprimer
  23. Arf, ce fut laborieux, mais merci pour cette astuce!

    Après moultes tentatives, j'ai fini par comprendre -_-'
    enfin je sais pas, j'y suis peut être arrivée par des voies détournées car ça m'a vraiment paru dingue :
    - copier/coller le code que tu nous a fourni sous l'onglet "modifier le code html"(déjà ça j'ai mis un petit temps à le capter),
    - puis insérer les images sous l'onglet "rédiger" histoire de récupérer leur code source avec le clic droit;
    - puis les coller à la place des "photo 1-2" etc. sous l'onglet html (encore fallait -il retrouver l'emplacement parceque du coup les codes des photos insérées s'étaient affichés parmis le charabia html donc gros bazar sur la page);
    - puis suppression des photos doublons...
    >> oui c'était aussi compliqué que ça en à l'air dans mon explication!

    Mais c'est bon, et ça valait le coup, mon premier vrai commentaire de bloggeuse est tout beau (http://unpeudangelikka.blogspot.com/2010/10/10-things.html)

    parcontre, n'hésite pas à me dire si je me suis cassée la tête pour rien et s'il y a plus facile, ça me serait bien utile pour la suite... ;)

    Merci encore, et vive ton blog plein d'astuces géniales!

    A.

    RépondreSupprimer
    Réponses
    1. Un grand merci pour les explications données, les questions, les réponses et les partages! Sans Waldorf et Statler, sans les autres "nuls" qui m'ont précédée et qui n'ont pas peur de poser des questions de débutants ni de réexpliquer avec leurs mots leur manière de faire, sans les réponses avisées de l'auteur de ce blog, je n'y serais jamais parvenue!Encore merci!

      Supprimer
  24. Bonjour Angelikka,

    Effectivement, il faut de l'application et de la ténacité ;-)
    Mais il n'y a pas lieu de passer par la phase suppression d'images, si l'insertion se fait au bon endroit. Peut être pour la prochaine fois ;-)

    J'ai été visiter ta page : ça rend bien hein ?
    Merci pour le lien sur ton blog.

    RépondreSupprimer
  25. moi je comprends toujours rien...
    j'ai l'impression que tout ça se bouscule dans un grand hasard/bazard sûr lequel je n'ai aucune prise...

    clémentine en islande

    RépondreSupprimer
  26. Bonjour, Ce site est plein de super trucs, il mérite bien son nom.
    je cherchais des possibilités de mise en forme du message sur un blog et là, je suis comblé.

    Mais (oui, il y a un mais ;-D), j'ai essayé de faire comme dit ( ce ne sont pas des images mais du texte que je voudrais en deux colonnes et plusieurs "pavés" (c'est des paroles d'une chanson) mais mes 2 colonnes sont trop proches, l'une de l'autre, au final.
    De plus, alors qu'il y a largement la place sur la feuille, le texte de la colonne de droite est avec des retourclavier dans le texte affiché ( et pourtant pas dans l'HTML).
    Merci si vous avez du temps à accorder à mon problème

    RépondreSupprimer
  27. Bonjour maximum,

    Ne prenez vous pas votre texte depuis Word (par ex) ?
    Si c'est cela cela peut expliquer les caractères parasites. Il faut mieux coller son texte auparavant dans un éditeur neutre (notepad, wordpad) avant de coller le texte dans l'éditeur du message.

    Pour le reste, je suis allé voir votre blog mais il faudrait que vous me disiez sur quel message vous rencontrez le problème que j'aille voir.
    Après il faut faire attention avec la taille des caractères afin de jouer sur la publication.

    RépondreSupprimer
  28. Waldorf et Statler, merci pour cette réponse super rapide.
    Je ne copie pas depuis word mais depuis une édition du message ( celle qui permet d'afficher le dernier message sur mon blog (message d'hier)

    j'essaie d'en faire un avec 2 colonnes (celui que l'on voit sur le blog était fait en aligné 1colonne depuis le blog.
    La fonte, c'est effectivement du 14 je crois mais comme je disais tout à l'heure, il semble qu'il y ait la place par rapport à la largeur de mon bloc (largeur page des messages).
    J'ai essayé de mettre des espacements pour "écarter les colonnes puis je les ai enlevées..ça ne change rien au final de la mise en pag...

    RépondreSupprimer
  29. Coucou, c'est encore Maximun,
    juste pour vous dire que j'ai publié un deuxième message pour vous monter l'espacement entre les colonnes que cela donne sur le blog.

    Je ne sais pas comment je pourrais faire pour que mon "pavé" 2ème strophe soit plus grand peut-être, afin que le "pavé" 3ème strophe soit plus près de la bordure droite.
    ou comment espacer les deux.

    RépondreSupprimer
  30. Je vois surtout que c'est le bazar entre la page 1 où les messages sont à gauche et la 2 où ils sont à droite !

    RépondreSupprimer
  31. Oui la page d'accueil est décalée vers la gauche, c'est ma bannière interactive qui me fait cela). j'ai activé la nouvelle bannière pour montrer le bugg a la personne chez qui j'ai trouvé le tutoriel pour l'installer.
    Si tu veux, je la désactive ?
    Lorsqu'elle est désactivé, la mise en page du nouveau message-chanson (avec colonne) ( ne change pas. Il est simplement placé mais comme les messages sur les autres pages que la page d'accueil, correctement cad sous la bannière..

    j'ai mis une image dans le message en question mais avant le script 'tableau': je me demande si ce n'est pas le format de l'image( de boby) qui détermine la largeur des colonnes de mon tableau rempli de texte ?

    RépondreSupprimer
  32. Bonjour,

    Je n'osais te le proposer ! Mais je pense que tu devrais essayer de faire une copie du message, voir ce que cela donne en enlevant dès le départ l'image et coller tes textes ensuite.

    RépondreSupprimer
  33. Bonjour,
    Merci pour le partage :)
    J'aurai aimer savoir si il etait possible d'ajouter du texte qu photo en dessus et en dessous de chaque photo ??
    Merci d avance

    RépondreSupprimer
  34. Bonjour Amélie,

    Bien sûr il suffit d'aller en modification du message et de mettre du texte au-dessus ou en dessous de la photo.

    RépondreSupprimer
  35. Super, merci beaucoup pour l'info ! Je suis une grosse quiche en html et j'ai pourtant réussi au bout de seulement 3 essais!
    Bonne soirée!

    RépondreSupprimer
  36. Ah ! Super ! Ca, ça va m'être utile !!
    Merciii !

    RépondreSupprimer
  37. C'est re-moi !
    Je viens de tester dans mon article à l'instant.
    J'ai bien compris comment s'utilisait un tableau en html, merci pour les explications ! :o)
    Par contre, je viens de batailler pendant une demie-heure (et sans succès ! ) pour centrer les deux photos sur ma page.
    Voici mon billet en question :
    http://crealhise.blogspot.com/2011/03/ouvrage-oublie.html
    J'aimerais bien pouvoir les centrer ces deux macros de mon hortensia, la présentation serait plus jolie !
    Une idée pour remédier à ce désastre visuel ?

    RépondreSupprimer
  38. J'ai suivi la procédure pour publier des images côte à côte. J'ai choisi de mettre 3 images sur 2 lignes, soit 6 images.
    Comment puis-je faire pour centrer ce groupe d'images, car pour l'instant, elles s'alignent à gauche.
    Merci d'avance.
    J'étais novice car c'est mon premier blog et maintenant je me surprends moi-même ! mais avec toutes les infos que j'ai pu trouver sur ce blog, je suis assez contente du résultat. Allez voir !
    http://amarelis-deco.blogspot.com
    A bientôt !

    RépondreSupprimer
  39. Bonjour!
    Mille mercis pour ce blog génial que je consulte régulièrement!
    J'ai enfin réussi à mettre des images côte à côte sur mon blog, mais il y a un espace blanc entre mon texte et le tableau d'images que je n'arrive pas à supprimer... Ce grand espace blanc est visible dans l'onglet "rédiger", puis une fois que le post est publié. Par contre, je ne le vois pas dans l'onglet "code html". Je ne sais vraiment pas quoi faire, pourriez-vous m'aider?

    RépondreSupprimer
  40. Cher Waldorf, ne m'oubliez pas! Merci...

    RépondreSupprimer
  41. Bonjour Matai,
    Merci du rappel :-)
    Vous parlez des effets tels que celui-çi sans doute : Boston 1: architecture & géographie urbaine.
    Je suis allé regarder votre code et je ne vois rien de suspect.
    Je suis désolé.

    RépondreSupprimer
  42. Merci Waldorf pour votre réponse... je suis toute triste, j'étais sûre que vous auriez la solution! Cela m'arrive à chaque fois que je veux mettre des photos côte à côte, dans le post que vous êtes allés voir, mais aussi dans d'autres... tant pis! Je vais faire avec!
    Merci en tout cas d'avoir regardé!
    A bientôt!

    RépondreSupprimer
  43. En fait, c'est parfait jusqu'à ce que je passe en mode "rédiger", et là le code copié bouge tout seul, et l'espace blanc arrive... Est-ce un problème de code html? Quand j'insère les photos, je les télécharge d'abord puis je les coupe/colle pour les mettre au bon endroit dans votre code, y a t-il une manip' plus simple à faire? En fait, j'arrive pas à m'y faire, parce que je trouve ce code très pratique, mais c'est laid quand il y a cet espace blanc sur les posts... Si vous avez qqes conseils et que vous n'en avez pas marre.. je suis preneuse! Merci encore!

    RépondreSupprimer
  44. Bonjour

    Qu'en est -il des vidéos??

    RépondreSupprimer
  45. un grand merci pour votre aide car enfin grâce à vous j'ai de la musique sur mon blog !!!!!
    c'est génial ce que vous faites
    bien cordialement
    Régina

    RépondreSupprimer
  46. Bonsoir, très heureuse d'avoir trouvé votre blog car j'ai enfin réussi, grâce à vous, à mettre des photos côte à côte. Tout comme Matai, j'avais un blanc peu esthétique entre mon message et les photos mais j'ai trouvé la solution pour m'en débarasser : supprimer le retour à la ligne (enter) entre le commentaire et le tag table/body
    mon blog est le suivant : http://icietparfoisailleurs.blogspot.com/

    Bonne continuation et encore merci !
    cdlt
    Nathalie

    RépondreSupprimer
  47. Bonjour tout le monde,
    Ce blog est le top. Je ne cesse de dire "cooool" chaque fois que j'ai réussi à faire quelques chose. Aujourd'hui encore, l'effet d'image côte à côte m'a fait dire "cooool".
    Merci à vous deux

    RépondreSupprimer
  48. Bonjour, il y a un truc encore plus simple!
    Une solution encore plus simple est de les positionner d'abord les unes au-dessous des autres classiquement, les dimensionner en "petit", placer le curseur juste avant la deuxième image puis "Retour arrière" au clavier... (<-). On peut ensuite les agrandir à condition que la largeur de vos messages le permette, sinon, elle se remettront automatiquement les unes au-dessous des autres.
    Pour modifier la marge entre les images, il suffit d'aller dans le code html du message et de supprimer ou de modifier le code
    style="margin-left: 1em; margin-right: 1em;"
    de chaque image.

    RépondreSupprimer
  49. Merci pour votre patience.
    J'ai bien modifié tous les paramètres comme indiqué dans votre message de 9h02 mais je ne parviens toujours pas à régler le problème des photos cote à cote (voir le nouveau blog que j'ai créé ce matin : http://la-revue-des-medias.blogspot.com/
    Est-ce parce que je ne parviens pas à fixer la version bleue de blogger ?
    Merci de me dire comment procèder.
    Cordialement
    SC

    RépondreSupprimer
  50. Bonjour,
    qu'entendez-vous par "version bleue de blogger"?
    En tous cas, je ne vois vraiment pas où est le problème... Je dispose fréquemment des images côte à côte et je n'ai aucun souci. Sauf si les images sont trop grandes, ont trop de marge ou de "padding" et cela peut se résoudre facilement en mettant le nez dans le code HTML du Post ou même du Blog. Sinon, cela peut venir de la définition de votre écran. Par exemple, si vous êtes en 1024x768 et que le blog a été conçu pour un affichage de 1152x864 (déconseillé).

    Voici mon code html pour un message de test que vous pourrez trouver ici:
    http://basic-black-stmartin.blogspot.com/2011/10/blog-post_25.html

    Vous trouverez le code sur le message car les "div" ne sont pas acceptés ici...
    Il s'agit de mes deux IP caméras. Bon, il est vrai que mon modèle (si on peut l'appeler ainsi..) de blog est hyper-basique. J'utilise ces mini-blogs pour certains usages. Ils apparaissent généralement dans mes blogs classiques à travers un iframe ou un object. Ce sont des blogs-accessoires en quelque sorte...

    Il est certain que si vous disposez 2 images côte-à-côte et que la largeur de l'ensemble (images+marges=padding)fait 700 pixels alors que la largeur maxi disponible de votre message est 640 pixels, la deuxième image va se positionner automatiquement en-dessous de la première... Attention à ne pas oublier la marge gauche et droite: margin-left et margin-right que j'ai mis ici à 0 em. J'ai toutefois rajouté un "espace" entre les 2 images mais initialement, elles étaient collées (pas de marge)

    RépondreSupprimer
  51. La version bleue de Blogger :
    http://www.blogger.com/opt-in-new-ui.g?useNewUi=false
    La version orange de Blogger :
    http://www.blogger.com/opt-in-new-ui.g?useNewUi=true
    La version Draft de Blogger :
    http://draft.blogger.com/home?pli=1

    RépondreSupprimer
  52. Bonsoir,
    Dans un de vos précédents posts, datant du 13 octobre 2009 dont voici l'url : http://mestrucspourblogger.blogspot.com/2009/10/publier-des-images-cote-cote.html?showComment=1319557655209#c954338373690661218

    vous donniez les codes pour publier des images cote à cote. Cette procédure est-elle toujours valable ?

    J'ai placé ces codes en tête de ma page HTML mais ils s'affichent tels quels dans ma page "Rédiger". C'est ce problème que je ne parviens pas à résoudre.

    Important des photos en petit format, j'ai largement l'espace pour en mettre 3 cote à cote.

    D'ailleurs là n'est pas le problème. J'ai bien testé les codes envoyés par le webmaster que je remercie mais là il faut entrer dans le code HTML, ce que je veux éviter.

    Cordialment
    SC

    RépondreSupprimer
  53. Merci !!! Très utile :D

    Juste une petite question supplémentaire : Comment faire pour centrer l'ensemble du tableau obtenu dans l'article ?? Merci !

    RépondreSupprimer
  54. Bon Noël à tous!
    Voici le code pour centrer le tableau. Notez que les images sont aussi centrées.
    http://blogtricker.blogspot.com/2011/12/centrer-un-tableau-avec-des-images.html
    Désolé, j'ai mis le code sur mon propre blog car le formulaire de réponse n'accepte pas les balises (Tags)...
    Il faut copier le code dans le code html de votre message à l'endroit ou vous voulez qu'il apparaisse. J'ai laissé les bordures visibles, mais il vaut mieux les cacher en mettant border="0".
    Si vous êtes débutant, je vous conseille plutôt d'utiliser un éditeur HTML WYSIWYG en ligne comme celui-ci (CK Editor sur mon serveur):
    http://st-martin-studio.com/ckeditor/_samples/index2.html
    Notez aussi que mon "identité": "webmaster" ne doit pas prêter à confusion. Je ne suis pas, en effet, le webmaster de mestrucspourblogger...

    RépondreSupprimer
  55. Bonjour,
    Personnellement j'adore, je trouve ça très pratique. Alors j'en profite pour demander quelques conseils. J'ai très bien lu l'article sur l'insertion des pages avec les libellés pour faire des catégories, mais ma page n'affiche pas les messages du même libellé, elle publie qu'il n'y a aucun message avec ce libellé alors qu'il en a deux. Ai-je manqué une étape ?
    Merci beaucoup :)

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      Si vous avez cette réponse, c'est parce que vous n'avez pas respecté la syntaxe précise du libellé. Faites attention aux caractères particuliers (espace, accent, etc).

      Supprimer
  56. C'est vrai que ce blog de conseil est génial. Merci.
    Pour mettre les photos côte à côte dans un message, je fais juste des copié-collé à partir de Picassa. Et pour centrer le tout, je vais sur la première image de la série et je la centre en utilisant l'outil de positionnement du texte.
    Je sépare les photos tout simplement avec la barre d'espace.
    ça marche très bien et c'est très facile.
    Seule chose je ne peux pas vraiment mettre de texte à droite ou à gauche des photos mais c'est bien sûr possible entre deux lignes d'images.

    Ah oui autre chose, si je veux récupérer un texte de n'importe ou dans internet et le poster dans mes blogs je commence par le copir-coller dans note-pad puis je re--copie-colle dans mon blog. Cela élimine le formatage précédent.

    Salut à tous!

    RépondreSupprimer
  57. Bonjour !

    Pas de soucis pour aligner 2 ou plusieurs photos sur une ligne, merci pour le code!
    Par contre, je n'arrive pas à supprimer l'espace blanc entre les images côte à côte et les images les unes à la suite des autres... j'ai essayé pas mal de choses, comme par exemple passer margin-bottom: 1em et margin-right: 1em en margin-bottom: 0em et margin-right: 0em dans le code html des photos, mais rien n'y fait!
    Auriez-vous une solution Waldorf Statler ? (faut-il s'attaquer au CSS??)
    Merci d'avance pour votre aide!!!

    RépondreSupprimer
    Réponses
    1. Il y a trois cas de figure :
      Si c'est le tableau, il faut spécifier "border-collapse:collapse;" dans le CSS lié à la balise "table".
      Si c'est une marge interne dans les cellules (balises th et td), il faut alors leur attribuer la propriété "padding:0;".
      Si c'est une marge externe autour des images, il faut alors leur attribuer la propriété "margin:0;".

      Supprimer
  58. bonjour j'aimerais savoir comment ajouter des logo d'image disons de twitter facebook et que quand l'on clique dessus il nous emmène vers facebook...
    comme ici et comment mettre la bannière facebook qui défile et aussi comment mètre les nouveautés comme sur ce site: http://www.laudemoizelle.com/

    RépondreSupprimer
  59. Merci! Ce blog est vraiment génial, les informations sont très précises et utiles.

    RépondreSupprimer
  60. Bonsoir,
    Sais tu s'il te plait comment inserer des vignettes d'images d'archives défilant en pied de page comme sur ce blog:
    http://coeurenprovence.blogspot.fr/2011/11/la-boutique-ephemere-de-noel.html
    merci

    RépondreSupprimer
    Réponses
    1. Ca m'intéresserait bien de savoir cela aussi !
      Merci :)

      (et un grand merci pour toutes ces astuces !!)

      Supprimer
  61. Bravo pour ton Blog, je suis très content d'avoir trouver tout l'aide que tu apportes. J'espere tu réalise tout ce que tu fais pour les autres.
    encore bravo

    RépondreSupprimer
  62. Bonjour, je viens d'essayer mais je n'arrive pas à publier il y a quelque chose dans le code que je n'ai pas dû faire correctement, je ne trouve pas, mes images sont côte à côte mais se décalent...
    Je vais chercher
    Merci quand même !

    RépondreSupprimer
  63. bonjour,
    Pour aligner plusieurs photos pas de soucis, par contre j'aimerai qu'il n'y ait pas d’espace entre celles-ci. Par exemple que sur 2 lignes et 3 colonnes toutes les photos soient collées les unes aux autres. Est il possible de faire cela?
    merci d'avance





    RépondreSupprimer
    Réponses
    1. Il suffit d'aller dans le code HTML et de modifier les marges droite et gauche des images et les mettre à 0em

      Supprimer

  64. Bonjour, bonne année, et merci pour toutes les astuces qui me permettent -comme à d'autres-, d'enjoliver et d'enrichir mon blog de classe!
    ce blog est essentiellement un blog de photos, j'aimerais savoir s'il est possible d'attribuer, par défaut, la valeur 0 aux marges droites et gauches des photos que j'insère...
    (pour les placer côte à côte plus facilement, en fonction de la largeur de mon blog et de la taille des photos)
    merci!

    RépondreSupprimer
    Réponses
    1. Bonjour Brigitte,
      Merci pour vos bons voeux. Bonne année à vous aussi.
      Oui, il est possible d'intervenir par l'intermédiaire des styles dans le template.
      Mais là, cela déborde du cadre que je veux maintenir sur ce blog : à savoir celui pour débuter.
      Vous trouverez sans doute des astuces sur le net ou en vous tournant vers des templates plus spécialisés. Attention néanmoins à ce qu'ils restent compatibles avec les dernières évolutions de Blogger.

      Supprimer
  65. Bonjour,

    Merci beaucoup pour cet article, je cherchais désespérément comment aligner mes photos et c'est maintenant chose faite ! Encore merci.
    Mon seul soucis et que je n'arrive pas à centre un ensemble d'images dans un tableau. C'est à dire que sur une ligne j'ai 3images et dans le suivante je n'en ai que 2, et j'aimerai pouvoir centrer ces 2images par rapport à mes 3 du dessus.
    Merci d'avance de votre réponse et encore merci pour tous ces conseils !!

    RépondreSupprimer
  66. Bonjour,
    cela me semble assez difficile à réaliser sauf peut-être dans un traitement texte genre Word. Personnellement, je pense qu'il est meieux de créer 1 tableau à 3 colonnes puis juste dessous un autre de même taille à deux colonnes.

    RépondreSupprimer
  67. Bonjour Nanou,
    Sur mon blog j'ai disposé 3 photos sur la 1ère ligne, 1 sur la 2ème et 2 sur la 3ème, j'ai réussi à centrer le tout. Je vous laisse le lien pour que vous puissiez voir si c'est cela que vous rechercher, et j'essaierai de vous expliquer ma méthode si cela correspond

    RépondreSupprimer
    Réponses
    1. oups j'ai oublié le lien http://www.nouvellesdefamilleober.blogspot.fr/

      Supprimer
    2. Oui c'est exactement ça que j'aimerai comme rendu !! Ce serait parfait ! Vous avez fait comment ?

      Supprimer
  68. Pour l'alignement des 3 photos j'ai utilisé le code cité plus haut. Ensuite pour la 2ème ligne j'ai inséré la photo via le code HTML du message et pour la 3ème ligne pareil. J'ai ensuite centrer les photos dans le mode "rédiger" avec le bouton d'alignement.
    En faite j'ai utilisé le code seulement pour le groupe des 3 photos et le reste je l'ai fait normalement.
    Voilà, j'espère que j'ai pu vous aider.

    RépondreSupprimer
    Réponses
    1. C'est exactement ce qu'il me fallait !! Un grand merci ! C'est parfait.
      Voici le rendu http://marine-laurent.blogspot.fr/p/portfolio.html
      Pour l'instant c'est en construction mais j'avance au fur et à mesure. Dites moi ce que vous en pensez.
      Encore merci !

      Supprimer
  69. Avant de trouver votre excellent blog, je créais le tableau souhaité avec mise en forme dans word ensuite je venais le coller dans mon message. Puis, j'insérai les photos ou texte dans chaque cellule.
    Ainsi, on peut faire tous les agencements imaginables.
    Illustration sur mon blog : cristormania.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si vous ne voulez pas avoir de souci (car vous en aurez !) : n'utilisez pas Word. http://mestrucspourblogger.blogspot.com/2009/11/copier-coller-du-texte-depuis-word.html

      Supprimer
    2. Oui, c'est à peu près ce que je fais aussi mais avec le WebEditor CKeditor. Ce n'est pas recommandé d'utiliser Word qui fait un code HTML trop lourd avec de nombreuses balises inutiles.
      http://st-martin-studio.com/ckeditor/_samples/index2.html
      Ici, il est stocké sur un de mes sites.
      Attention, il faut passer en "source" puis copier-coller le résultat de votre travail dans votre message (en mode HTML). CKeditor fonctionne en ligne et n'enregistre donc pas votre travail. J'ai une version en local sur mon PC Linux, et je m'en sers souvent. Pour les images, il faut en utiliser qui sont déjà en ligne, par exemple sur DropbBox ou sur Picasa et donc coller leur URL dans "Propriétés de l'image". En entrant dans les propriétés des cellules on peut demander à centrer le contenu au milieu (verticalement) ce qui est très intéressant.
      Ainsi, vous aurez un code à peu près propre ce qui n'est pas le cas avec Word. Notez aussi que de toutes manières le code d'un tableau reste toujours relativement lourd.

      Supprimer
  70. Salut merci pour tes astuces,ils m'ont beaucoup aidé.

    RépondreSupprimer
  71. Salut !!!

    Mon probléme c'est que je n'arrive pas à mettre plusieurs photos sur un meme article ! pourquoi ? du coup je n'ai qu'une photo par article, pas cool pour un blog de cuisine !!!

    please help :(

    http://ferdycuisine.blogspot.ca

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Quel navigateur employez vous ? Avez vous vidé le cache ? Avez vous essayé un autre navigateur ?

      Supprimer
  72. Bonjour!
    Votre blog est génial et vraiment utile !

    J'ai une question, je sais que je ne suis pas sur le bon post mais c'est également pour aligner des images ou plutôt des images avec liens dans la colonne de droite.
    Je m'explique mieux, sur mon blog www.bowl-and-spoon.blogspot.com j'ai ajouter 4 images avec des liens amenant vers ma page facebook/mon compte instagram/mon flux RSS etc.
    Seulement je n'arrive pas à les mettre l'une à côté de l'autre... j'ai bien compris qu'il faut que je modifie qlq chose dans le code Htlm mais je n'y connais rien...
    Voici le code (je crois...) qu'il y a pour le moment :







    Pouvez-vous me dire quoi ajouter et surtout OU pour faire en sorte qu'elle soit l'une à côté de l'autre ?
    Merci d'avance !!!!

    RépondreSupprimer
  73. Bonjour,

    Pour le moment, où est le code ?

    RépondreSupprimer
    Réponses
    1. le code a intégrer est celui afficher en haut de cette page

      ce code représente 2 colonne et trois lignes intégrer le dans votre page puis remplacer Photo 1-1 en mode rédiger avec l'assistant ajouter image .fais pareil pour photo 1-2 et 1-3 ...etc selon vous besoins
      bon courage

      Supprimer
    2. Ma question concernait le message de Chloé M. du 25 mars 2013 09:28
      ...

      Supprimer
    3. Je pense que les codes mis dans les commentaires sont automatiquement enlevés? Quoi qu'il en soit... pouvez-vous m'aider? :(

      Supprimer
  74. salut à toi et merci pour tout ses conseils !
    j'ai quelques soucis sur blogger:
    1erement je ne comprends pas pourquoi lorsque je poste plusieurs photos dans un sujet (je suis en mode snapshot) cela me créer un nouveau sujet pour chaque photo !!! très emmerdant donc ! en sais tu plus?
    - je ne sais pas comment on fait pour faire en sorte que sur les petites images polaroid (toujours avec snapshot) on puisse mettre un petit résumé de l'article en passant simplement sa souris dessus?
    - et enfin je ne sais pas comment supprimé les dates de chaque messages! (car j'ai fait en sorte de les afficher du plus ancien au plus récent mais du coup j'ai modifié les dates et j'ai peur que les lecteurs ne s'y retrouvent plus !

    merci pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Comportement très inhabituel pour un modèle dynamique. Je note l'expérience et si j'ai des éléments je viendrais les porter ici.

      Supprimer
  75. Bonjour !
    Depuis la création de mon blog, j'essaye de suivre vos conseils, notamment pour mettre des photos côte à côte. Je ne le fais pas souvent mais les quelques essais ont bien fonctionné comme vous pouvez le voir ici:

    http://souslecieldardenne.blogspot.be/2013/02/le-semis-des-sol-2013.html

    Depuis 3 jours, j'essaye à nouveau, j'écris le code du tableau sans problème mais il m'est impossible d'importer les photos sur la page HTML . Leur code ne s'affiche pas ... Je n'ai absolument rien changé sur mon ordinateur ni dans le blog ...
    Auriez-vous une idée d'où peut venir le problème ?... Merci.

    RépondreSupprimer
  76. Waaaaooow ! J'ai galéré mais ça fait trop beau alors ... MERci ! ce blog est juste génial

    RépondreSupprimer
  77. Bonjour!!
    j'ai crée mon blog récemment et même en suivant à la lettre vos instructions, je n'arrive pas à avoir les "cadres" où insérer les photos, s'affichent seulement les noms photo1-1 Photo1-2 photo1-3 mais je ne peux rien coller dessus...savez-vous comment y remédier SVP?
    J'en profite pour une deuxième question, je vois que vous avez un gadget "live traffic feed" et je trouve ça excellent, pouvez vous me dire où je peux le trouver?
    merci d'avance pour tous vos conseils
    Céline

    RépondreSupprimer
  78. Sympa ce blog et vos conseils, bonne semaine!

    RépondreSupprimer
  79. Bonjour Waldorf,
    Mon feedback...... Tout simplement génial!
    Ca faisait un moment que je cherchais à mettre plusieurs images sous ma bannière pour mener à différentes espèces animales!
    Votre astuce a beaucoup de gueule sur mon blog!
    http://odonatas69a.blogspot
    Merci pour tous vos tuyaux sympas!

    RépondreSupprimer
  80. Bonjour ca fonctionne super bien pour moi, mais mon souci c'est qu'une fois cote à cote les images débordent dans le menu à droite. Une idée pour résoudre ce problème?

    RépondreSupprimer
  81. Eh bien voilà la réponse à ma question précédente ! Merci beaucoup !

    RépondreSupprimer
  82. Merci pour vos précieux conseils, comment ferait-on sans vous? :)

    RépondreSupprimer
  83. Cela semble très simple. je vais le tester ce soir. Merci pour l'idée.

    RépondreSupprimer
  84. Super merci! Notion de HTML plus qu'essentielle pour le blog d'un artiste peintre!!!
    Ce blog est un vrai Bescherelle! Je l'ai déjà dis quelque part, mais encore merci pour tous ces cours!

    RépondreSupprimer
  85. Super, ça a marché du premier coup, merci, je cherchais depuis un moment .

    RépondreSupprimer
  86. bonjour Waldorf Statler
    merci bcp pour ce travail de trés bonne qualité
    je suis encore dans la premiére étape de conception de mon blog, une fois terminé, je recommanderai ton blog à tout le monde.
    merci encore une fois et bonne continuation
    mustapha du maroc

    RépondreSupprimer
  87. Super utile! Merci de partager vos connaissances avec nous!

    RépondreSupprimer
  88. Wouah enfin, merci beaucoup j'ai réussi a faire ce que je voulais :)

    RépondreSupprimer
  89. Bonjour, moi je cherche justement l'inverse : comment publier des images les unes sous les autres?
    Vous allez me dire que ça se fait automatiquement, oui c'est vrai, sauf pour cet article http://www.aurorevegas.com/2013/03/eh-ouais.html.
    La petite image en bas à droite de la bédé était jusqu'à il y a peu "bien" positionnée, c'est à dire sous la bédé, et maintenant, pour une mystérieuse raison, ce n'est plus le cas.
    j'ai essayé de changer le positionnement dans "rédiger" le message, ce que je vois au moment de la rédaction est ok mais si je visualise l'aperçu, ou publie le message, le positionnement n'est plus correct.
    j'ai essayé d'importer les images à nouveau, même problème.
    Avez-vous une idée sur la question ? Je suis preneuse !
    Merci pour votre blog en tout cas, il m'a été utile quelques fois !

    RépondreSupprimer
  90. oouuups, au temps pour moi, je viens de trouver !
    il manquait (pour quelle raison je ne sais pas) la balise de séparation entre les deux images.
    désolée de vous importuner pour rien !
    merci encore pour votre blog !

    RépondreSupprimer
  91. Bonjour,
    J'ai largement utilisé la publication d'images côte à côte et je me suis demandé comment publier côte à côte des diaporamas et des vidéos.
    J'ai utilisé les formules pour les photos ... et ça marche !! A voir sur le site du club ogcniceboules.blogspot.fr

    RépondreSupprimer
  92. Bonjour,
    Pour remplacer des photos ou intégrer du texte dans les cases générées par la publication d'images côte à côte dans mon blog, il fallait rendre visibles ces cases qui ne l'étaient pas en modifiant la formule.
    J'ai donc rajouté à table (entre <>) border="1" cellspacing="5": le travail terminé, j'ai ensuite ramené ces valeurs à 0

    RépondreSupprimer
  93. Bonsoir
    Merci pour tous vos conseils.
    Pouvez me dire comment centrer le tableau?

    Merci d'avance
    Amanda

    RépondreSupprimer
  94. comment on fais pour aligner 3 images cote a cote ?
    merci d'avance

    RépondreSupprimer
  95. Comment on fais pour mettre deux images à côter mais bien centrer?
    Merci

    RépondreSupprimer

Merci de prendre note des messages d'annonce en une du blog.
Et d'adresser vos questions sur notre
Communauté des Utilisateurs de Blogger hébergée sur Google+.

LinkWithin

Related Posts with Thumbnails