Emailing HTML - Espace entre chaque image

**Falard** · 25/08/2011, 09h05

Bonjour à tous,

Lors de la réalisation de mon emailing pour mon entreprise en html je me suis rendu compte que en fonction de l'envoie des mails sur des boites mails différentes l'interprétation est différente également (ce qui est logique

).
Par exemple sur ma boite mail iMAC la réception et la présentation du mail est comme je le souhaite mais sur la boite yahoo, hotmail, gmail un espace se forme entre chaque image.

Voici le code de mon message html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
     <head>
     </head>
     <body>
         <p>
         <a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/1.jpg" height="160" width="595" /></a><br />
         <a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/2.jpg" height="330" width="595" /></a><br />
         <a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/3.jpg" height="154" width="595" /></a><br />
         <a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/4.jpg" height="118" width="595" /></a><br />
         <a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/5.jpg" height="210" width="595" /></a><br />
         <a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/6.jpg" height="213" width="595" /></a><br />
         <a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/7.jpg" height="232" width="595" /></a><br />
         </p>
     </body>
</html>

Voici l’aperçut en image de mon mail sur ma boite yahoo : (comme on peut le voir sur la barre bleu à gaucheil se forme des espaces entre chaque partie des images découpées.

Avez-vous une solution pour résoudre ce disfonctionnement?

Merci de m'avoir lu et pour votre future réponse.

Cordialement,

Edouard

**Kaamo** · 25/08/2011, 10h23

En mettant chaque image dans une ligne d'un tableau.
En effet, dans ce cas, on peut créer un tableau d'une colonne sur sept lignes en mettant chaque image dans une cellule.
Ensuite, on indique que l'espacement entre les cellules doit être nul. Ainsi les images paraissent "collées" les unes aux autres.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
     <head>
     </head>
     <body>
	<table cellpadding="0" cellspacing="0">
	<tr><td><a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/1.jpg" height="160" width="595" /></a></td></tr>
         <tr><td><a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/2.jpg" height="330" width="595" /></a></td></tr>
         <tr><td><a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/3.jpg" height="154" width="595" /></a></td></tr>
         <tr><td><a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/4.jpg" height="118" width="595" /></a></td></tr>
         <tr><td><a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/5.jpg" height="210" width="595" /></a></td></tr>
         <tr><td><a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/6.jpg" height="213" width="595" /></a></td></tr>
         <tr><td><a href="http://www.falard.fr/"><img alt="" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/7.jpg" height="232" width="595" /></a></td></tr>
	</table>
     </body>
</html>

**Falard** · 25/08/2011, 12h07

Merci Kaamo pour votre réponse.
J'ai essayé votre code et je retrouve exactement le même problème. Les images sont toujours "séparées" par un espace.
Lors de différents essaies j'avais déjà tenté votre solution avec un tableau d'une colonne et 7 lignes mais malheureusement l'interprétation du code était également mauvaise pour les boites yahoo, hotmail, et gmail.

De plus sur outlook 2003 chaque image est encadré par une ligne bleue ce qui révéle le découpage du emailing.

J'ai également rajouter dans mon code au niveau de chaque image border="0" mais ça ne change rien du tout.

Je commence à me demander s'il est judicieux de découper mon emailing en plusieurs images, et plutôt choisir la solution d'une seule et unique image ce qui va éviter tous ces dysfonctionnements.

**Kaamo** · 25/08/2011, 14h27

étrange cet espace si le cellpadding et cellspacing vaut 0. Je sèche pour cette partie de l'erreur

Sinon pour le cadre bleu, cela devrait fonctionner : (à appliquer sur chaque image)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="border: 0;"

**Kaamo** · 25/08/2011, 14h39

Hum, j'ai trouvé. Chaque retour à la ligne dans ton code est interprété. Même si tu ne fais pas un <br/> explicitement. Il faut donc mettre le code sur une seule ligne plutôt que sur plusieurs. Par exemple :

Au lieu de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<html>
     <head>
     </head>
     <body>
	<table cellpadding="0" cellspacing="0">

écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<html><head></head><body><table cellpadding="0" cellspacing="0">

Etc... C'est moche, mais ça marchera

**Auteur** · 25/08/2011, 14h58

bonjour,

en plus de supprimer les bordures des cellules, il faut définir l'image comme un bloc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="tonImage.jpg" style="display:block"/>

et cela supprimera les espaces et il ne sera pas nécessaire d'écrire tout ton code HTML sur une ligne

**Falard** · 25/08/2011, 15h38

Merci pour votre réponse.

J'ai réalisé les modifications que vous m'avez soumis et voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<html><head></head><body><table cellpadding="0" cellspacing="0"><tr><td><a href="http://www.falard.fr/"><img alt="Falard" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/1.jpg" style="border: 0;" height="160" width="595" /></a></td></tr><tr><td><a href="http://www.falard.fr/"><img alt="Gamme" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/2.jpg" style="border: 0;" height="330" width="595" /></a></td></tr><tr><td><a href="http://www.falard.fr/"><img alt="F1" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/3.jpg" style="border: 0;" height="154" width="595" /></a></td></tr><tr><td><a href="http://www.falard.fr/"><img alt="F20" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/4.jpg" style="border: 0;" height="118" width="595" /></a></td></tr><tr><td><a href="http://www.falard.fr/"><img alt="F40XA5" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/5.jpg" style="border: 0;" height="210" width="595" /></a></td></tr><tr><td><a href="http://www.falard.fr/"><img alt="Atex" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/6.jpg" style="border: 0;" height="213" width="595" /></a></td></tr><tr><td><a href="http://www.falard.fr/"><img alt="Contact" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/7.jpg" style="border: 0;" height="232" width="595" /></a></td></tr></table></body></html>

C vrai que c'est moche mais surtout illisible.

Malheureusement le problème est toujours le même.
Je ne fais pas de copie d'écran car c'est identique à la première capture.

Je n'ai pas encore vérifié pour les bordures bleu sur outlook 2003 car pour le moment je n'ai pas accès à cette messagerie.

Peut être une autre solution??

Merci.

edit : @ auteur je n'avais pas vu votre post je vais essayer votre solution et je vous tiens informé. Merci pour votre réponse

**Falard** · 25/08/2011, 15h59

@Auteur : Votre solution fonctionne merci beaucoup
@Kaamo : Merci encore une fois de m'épauler sur mes difficultés dans la réalisation de cette emailing.

Ce Forum est vraiment sympa et réactif. Ca fait vraiment plaisir...

Mais attention un problème en cache toujours un autre...

Voici donc le code final :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
     <head>
     </head>
     <body>
         <table cellpadding="0" cellspacing="0">
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="Falard" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/1.jpg" style="display:block" height="160" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="Gamme" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/2.jpg" style="display:block" height="330" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="F1" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/3.jpg" style="display:block" height="154" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="F20" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/4.jpg" style="display:block" height="118" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="F40XA5" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/5.jpg" style="display:block" height="210" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="Atex" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/6.jpg" style="display:block" height="213" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="Contact" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/7.jpg" style="display:block" height="232" width="595" /></a></td>
             </tr>
         </table>
     </body>
</html>

**Auteur** · 25/08/2011, 16h14

Envoyé par Falard

@Auteur : Votre solution fonctionne merci beaucoup
@Kaamo : Merci encore une fois de m'épauler sur mes difficultés dans la réalisation de cette emailing.

Ce Forum est vraiment sympa et réactif. Ca fait vraiment plaisir...

De rien

Envoyé par Falard

Mais attention un problème en cache toujours un autre...

Voici donc le code final :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
     <head>
     </head>
     <body>
         <table cellpadding="0" cellspacing="0">
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="Falard" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/1.jpg" style="display:block" height="160" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="Gamme" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/2.jpg" style="display:block" height="330" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="F1" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/3.jpg" style="display:block" height="154" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="F20" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/4.jpg" style="display:block" height="118" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="F40XA5" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/5.jpg" style="display:block" height="210" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="Atex" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/6.jpg" style="display:block" height="213" width="595" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="Contact" src="http://i.message-business.com/content/operations/EmailOperations/_15381/373237/Images/7.jpg" style="display:block" height="232" width="595" /></a></td>
             </tr>
         </table>
     </body>
</html>

Place les propriétés des images dans l'attribut style

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="display:block; height:154px; width:595px"

et sinon quel est le problème ?

**Kaamo** · 25/08/2011, 16h41

et sinon quel est le problème ?

je pense qu'il parlait de mes solutions qui entrainaient toujours une erreur

Emailing HTML - Espace entre chaque image

HTML

Vue hybride

Discussions similaires

Partager

Partager