Emailing HTML - Espace entre chaque image [Résolu]

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

Citation:

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

Citation:

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

Citation:

et sinon quel est le problème ?

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

Falard · 26/08/2011, 09h36

Bonjour à tous,

Désolé de n'avoir pas pu répondre avant.

Voici donc le code final avec vos modif suggérées.

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=232px; width=595px" border="0" /></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=232px; width=595px" border="0" /></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=232px; width=595px" border="0" /></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=232px; width=595px" border="0" /></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=232px; width=595px" border="0" /></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=232px; width=595px" border="0" /></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=232px; width=595px" border="0" /></a></td>
             </tr>
         </table>
     </body>
</html>

Pour le moment tout fonctionne mais je dois vérifier que tout va bien sur la boite mail outlook 2007.

C'est pour cela qu'un problème peut survenir à tout moment et que je reste méfiant.
Je vous rassure Kaamo ce n'est pas par rapport à vos propositions qui se sont par ailleurs révélées utiles.

J'attend les réponses de mes contacts pour la vérification des messageries outlook.

Je vous tiens informé.

Cordialement,

Edouard

Kaamo · 26/08/2011, 10h22

Bonjour Edouard,

Pas de soucis

Néanmoins, attention à la syntaxe :
En effet, il s'agit plutôt d'utiliser : à la place de = quand on définit les styles dans l'attribut style=""Et inclure le border également dans cette balise

Code :

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

style="display:block; height:232px; width:595px;border:0"

Tout à coup, je ne me rappelle plus du code à utiliser pour ne pas faire apparaitre la bordure d'une image contenue dans un lien.
Ca dépend du <!DOCTYPE> que l'on définit au début de la page.
Je me souviens d'un border-width:none ? ou alors border:none ? Ou alors un border-style:none ?

Je conseille d'attendre des membres plus aguerri en CSS que moi

ou de tester les trois ... mais c'est moche

Auteur · 26/08/2011, 10h32

Citation:

Envoyé par Kaamo

Néanmoins, attention à la syntaxe :
En effet, il ~~s'agit plutôt~~ d'utiliser : à la place de = quand on définit les styles dans l'attribut style=""Et inclure le border également dans cette balise

Code :

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

style="display:block; height:232px; width:595px;border:0"

Il faut utiliser !!! les deux points sinon les paramètres sont tout simplement ignorés.

Citation:

Envoyé par Kaamo

Tout à coup, je ne me rappelle plus du code à utiliser pour ne pas faire apparaitre la bordure d'une image contenue dans un lien.
Ca dépend du <!DOCTYPE> que l'on définit au début de la page.
Je me souviens d'un border-width:none ? ou alors border:none ? Ou alors un border-style:none ?

Je conseille d'attendre des membres plus aguerri en CSS que moi

ou de tester les trois ... mais c'est moche

C'est border:none mais il est vrai qu'il manque le DOCTYPE dans cette page.
Quant à l'attribut border, il regroupe tous les paramètres que l'on peut attribuer à une bordure (color, width, style) cf. :
http://www.w3schools.com/cssref/pr_border.asp

Falard · 26/08/2011, 12h30

Voici donc mon code modifié et corrigé :

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_Gamme" src="http://www.falard.fr/images//1.jpg" style="display:block; height:495px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=64&amp;Itemid=46"><img alt="F1" src="http://www.falard.fr/images//2.jpg" style="display:block; height:146px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=59&amp;Itemid=43"><img alt="F20" src="http://www.falard.fr/images//3.jpg" style="display:block; height:114px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=65&amp;Itemid=46"><img alt="F40" src="http://www.falard.fr/images//4.jpg" style="display:block; height:113px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=76&amp;Itemid=48"><img alt="XA5" src="http://www.falard.fr/images//5.jpg" style="display:block; height:107px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=77&amp;Itemid=46"><img alt="ATEX" src="http://www.falard.fr/images//6.jpg" style="display:block; height:218px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_contact&amp;Itemid=38"><img alt="Contact" src="http://www.falard.fr/images//7.jpg" style="display:block; height:200px; width:595px; border:none" /></a></td>
             </tr>
         </table>
     </body>
</html>

Par j'avoue ne pas avoir saisie à quoi correspond le

Citation:

DOCTYPE

.
J'ai commencé à lire sur internet des explications mais il est vraie que cela dépasse mes compétences qui sont par ailleurs très limitées

Pouvez m'éclairer sur ce point?
Est il nécessaire de faire apparaitre cette information en sachant que je passe par une plateforme de emailing qui est message-business.com
Ou je peux laisser mon code tel quel?

Merci pour vos réponses précédentes

Kaamo · 26/08/2011, 12h56

ça permet de renseigner au navigateur dans quel type de HTML la page a été codée. Ca permet aussi de respecter des standards de développement commun à tous les développeurs en fonction du type d'HTML utilisé.
En l'absence de doctype, il me semble que les navigateurs utilisent un mode plus permissif vis à vis des syntaxes CSS et HTML.

Vous pouvez utiliser votre code tel quel sans DOCTYPE.

En effet, il me semble qu'un Doctype est nécessaire si il y a utilisation de certaines propriétés du CSS3 et s'il y a utilisation de la balise <p> qui n'a pas la même marge avec ou sans la mention de Doctype.

Bref, dans votre cas, ça devrait passer niquel sans

Auteur · 26/08/2011, 12h56

Pour le DOCTYPE je t'invite à lire la FAQ :
http://xhtml.developpez.com/faq/?page=doctype-standards

Falard · 26/08/2011, 14h18

Merci pour vos informations.
C'est bien ce que j'avais déjà lu sur internet auparavant.
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Donc je vais suivre vos recommandations, et ne pas mettre de DOCTYPE.
Par contre j'ai fais valider mon url sur W3C et des erreurs sont détectées mais je pense que ce ne doit pas être génant.
http://validator.w3.org/check?uri=ht...Inline&group=0

Enfin bref, merci encore Kaamo & Auteur pour votre aide précieuse.

Auteur · 26/08/2011, 15h18

Citation:

Envoyé par Falard

Donc je vais suivre vos recommandations, et ne pas mettre de DOCTYPE.
Par contre j'ai fais valider mon url sur W3C et des erreurs sont détectées mais je pense que ce ne doit pas être génant.
http://validator.w3.org/check?uri=ht...Inline&group=0

on ne s'est pas compris

(ou je n'ai pas été assez précis)
Je te conseille vivement de mettre un DOCTYPE

D'ailleurs pour valider la page par le W3C tu dois ajouter un DOCTYPE.

Falard · 30/08/2011, 09h14

Bonjour,

Désolé Auteur pour cette réponse tardive mais j'ai eu des contres temps au boulot.
Donc j'ai suivi vos conseils et j'ai ajouté un DOCTYPE à mon code html.
Par contre je ne suis pas sure sur le choix du DOCTYPE car il en existe 3 différents le simple le transitional et le frameset. Lequel me conseillez vous?
J'ai choisi de mettre le transitional car j'ai vu plusieurs emailing avec celui-ci .
Mais comme vous pouvez le comprendre j'ai fais cela sans aucune réflexion

Donc voici mon code finale.
Ce code est-il correcte pour un emailing? J'espère n'avoir rien oublié

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
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html>
     <head>
     </head>
     <body>
         <table cellpadding="0" cellspacing="0">
             <tr>
                 <td><a href="http://www.falard.fr/"><img alt="Falard_Gamme" src="http://www.falard.fr/images//1.jpg" style="display:block; height:495px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=64&amp;Itemid=46"><img alt="F1" src="http://www.falard.fr/images//2.jpg" style="display:block; height:146px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=59&amp;Itemid=43"><img alt="F20" src="http://www.falard.fr/images//3.jpg" style="display:block; height:114px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=65&amp;Itemid=46"><img alt="F40" src="http://www.falard.fr/images//4.jpg" style="display:block; height:113px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=76&amp;Itemid=48"><img alt="XA5" src="http://www.falard.fr/images//5.jpg" style="display:block; height:107px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_content&amp;task=view&amp;id=77&amp;Itemid=46"><img alt="ATEX" src="http://www.falard.fr/images//6.jpg" style="display:block; height:218px; width:595px; border:none" /></a></td>
             </tr>
             <tr>
                 <td><a href="http://www.falard.fr/index.php?option=com_contact&amp;Itemid=38"><img alt="Contact" src="http://www.falard.fr/images//7.jpg" style="display:block; height:200px; width:595px; border:none" /></a></td>
             </tr>
         </table>
     </body>
</html>

Et j'ai fais la validation via le site W3C http://validator.w3.org/check?uri=ht...alidator%2F1.2 et il est vrai que je n'ai plus qu'un warning contre 19 sur l'autre.
Donc je pense que cette modif est bénéfique...

Auteur · 30/08/2011, 10h29

attention dans le code que tu as posté il y a une balise html en trop :

Code :

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

<html xmlns="http://www.w3.org/1999/xhtml"><html>

et dans le head il manque la balise title :

Code html :

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

1
2
3
4
 
<head>
<title></title>
</head>

Le lien que tu as donné indique qu'il y a 17 erreurs

25/08/2011, 14h27	#4
Kaamo Membre éclairé Cyril Ingénieur développement logiciels Inscription : avril 2007 Messages : 205 Détails du profil Informations personnelles : Nom : Cyril Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2007 Messages : 205 Points : 367 Points : 367	é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;"
	00

25/08/2011, 14h58	#6
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 794 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 794 Points : 5 118 Points : 5 118	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
	20

26/08/2011, 10h22	#12
Kaamo Membre éclairé Cyril Ingénieur développement logiciels Inscription : avril 2007 Messages : 205 Détails du profil Informations personnelles : Nom : Cyril Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2007 Messages : 205 Points : 367 Points : 367	Bonjour Edouard, Pas de soucis Néanmoins, attention à la syntaxe : En effet, il s'agit plutôt d'utiliser : à la place de = quand on définit les styles dans l'attribut style=""Et inclure le border également dans cette balise Code : Sélectionner tout - Visualiser dans une fenêtre à part style="display:block; height:232px; width:595px;border:0" Tout à coup, je ne me rappelle plus du code à utiliser pour ne pas faire apparaitre la bordure d'une image contenue dans un lien. Ca dépend du <!DOCTYPE> que l'on définit au début de la page. Je me souviens d'un border-width:none ? ou alors border:none ? Ou alors un border-style:none ? Je conseille d'attendre des membres plus aguerri en CSS que moi ou de tester les trois ... mais c'est moche
	00

25/08/2011, 12h07	#3
Falard Invité de passage Edouard Chargé d'affaire Inscription : août 2011 Messages : 13 Détails du profil Informations personnelles : Nom : Edouard Localisation : France, Ain (Rhône Alpes) Informations professionnelles : Activité : Chargé d'affaire Secteur : High Tech - Électronique et micro-électronique Informations forums : Inscription : août 2011 Messages : 13 Points : 4 Points : 4	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.
	00

26/08/2011, 12h56	#15
Kaamo Membre éclairé Cyril Ingénieur développement logiciels Inscription : avril 2007 Messages : 205 Détails du profil Informations personnelles : Nom : Cyril Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2007 Messages : 205 Points : 367 Points : 367	ça permet de renseigner au navigateur dans quel type de HTML la page a été codée. Ca permet aussi de respecter des standards de développement commun à tous les développeurs en fonction du type d'HTML utilisé. En l'absence de doctype, il me semble que les navigateurs utilisent un mode plus permissif vis à vis des syntaxes CSS et HTML. Vous pouvez utiliser votre code tel quel sans DOCTYPE. En effet, il me semble qu'un Doctype est nécessaire si il y a utilisation de certaines propriétés du CSS3 et s'il y a utilisation de la balise <p> qui n'a pas la même marge avec ou sans la mention de Doctype. Bref, dans votre cas, ça devrait passer niquel sans
	10

26/08/2011, 14h18	#17
Falard Invité de passage Edouard Chargé d'affaire Inscription : août 2011 Messages : 13 Détails du profil Informations personnelles : Nom : Edouard Localisation : France, Ain (Rhône Alpes) Informations professionnelles : Activité : Chargé d'affaire Secteur : High Tech - Électronique et micro-électronique Informations forums : Inscription : août 2011 Messages : 13 Points : 4 Points : 4	Merci pour vos informations. C'est bien ce que j'avais déjà lu sur internet auparavant. http://www.w3.org/QA/2002/04/valid-dtd-list.html Donc je vais suivre vos recommandations, et ne pas mettre de DOCTYPE. Par contre j'ai fais valider mon url sur W3C et des erreurs sont détectées mais je pense que ce ne doit pas être génant. http://validator.w3.org/check?uri=ht...Inline&group=0 Enfin bref, merci encore Kaamo & Auteur pour votre aide précieuse.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email