Image coupée dans ma newsletter

**vincenot** · 17/09/2014, 23h15

Bonsoir,

Cela fait 7 h que je cale sur un problème d'image coupée dans mon code. Voici le code :

Code html :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
td{
}
</style>
</head>
<body><style>img {display: block;}</style>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!-- LOGO ET COTE -->
  <tr>
    <td width="20" height="850" rowspan="25" ></td>
    <td valign="top" height="122"><imgsrc="http://www.creationspice.fr/newsletter/logo-olympus.jpg" style="display:block;" align="absbottom"alt="" width="600"  /></td>
    <td width="20" height="850" rowspan="25"></td>
  </tr>
<!-- CONTENU 1 -->
<tr>
  <td align="left" valign="middle" height="55">
    <img display="block" src="http://www.creationspice.fr/newsletter/titleblg.jpg"/>
  </td>
</tr>
<!-- CONTENU 3 -->
        <tr>
          <td><table style="" border="0" cellspacing="0" cellpadding="0" >
  <tbody>
    <tr>
    <td align="left" valign="top"  width="300">
<span style="padding:0px;color:#f48b1b;font-family:helvetica;font-size:15px;;">
Aventurier, hipster ou véritable fashionista,<br/>
découvrez quel appareil photo<br/>
OLYMPUS est fait pour vous !
</span>
</td>
     <td align="right" valign="middle"  width="300">
<img src="http://www.creationspice.fr/newsletter/p1.jpg" style="display:block;"/>
</td>
    </tr>
</tbody></table></td>
        </tr>
<!-- CONTENU 4 -->
  <tr>
  <td align="right" valign="middle" height="55">
    <img display="block" src="http://www.creationspice.fr/newsletter/title2.png"/>
  </td>
</tr>
<!-- CONTENU 4 -->
  <tr>
          <td><table style="" border="0" cellspacing="0" cellpadding="0" >
  <tbody>
    <tr>
<td align="left" valign="top" height="30" width="300">
<span style="padding:0px;color:#8d8d8d;font-family:helvetica;font-size:15px;">
le studio mythique des plus grands<br/>
photographes et révélez le style<br/>
qui sommeille en vous !<br/><br/>
23-27 avenue Jean Moulin<br/>
75014 Paris
</span>
</td>
     <td align="left" valign="middle"  width="300">
<img display="block" src="http://www.creationspice.fr/newsletter/p2.jpg"/>
</td>
    </tr>
</tbody></table></td>
        </tr>
<tr>
     <td align="right" valign="middle"  width="300">
<img display="block" src="http://www.creationspice.fr/newsletter/p3.jpg"/>
</td>
    </tr>
<tr>
          <td><table style="" border="0" cellspacing="0" cellpadding="0" >
  <tbody>
    <tr>
<td align="left" valign="top" height="30" width="300">
<span style="padding:0px;color:#8d8d8d;font-family:helvetica;font-size:15px;">
Métro ligne 4 : Alesia<br/>
Tram 3 : Jean Moulin<br/>
Bus (28, 38, 62, 68, N14, N21)<br/>
Alésia-Général Leclerc<br/>
Station Velib‚ à proximité
</span>
</td>
     <td align="left" valign="middle"  width="300">
<img display="block" src="http://www.creationspice.fr/newsletter/p4.jpg"/>
</td>
    </tr>
</tbody></table></td>
        </tr>
  <tr>
  <td align="right" valign="middle" height="55">
    <img display="block" src="http://www.creationspice.fr/newsletter/footer.jpg"/>
  </td>
</tr>
</table>
</body>
</html>

Merci mille fois de votre aide, je tourne en rond !!!

**01001111** · 18/09/2014, 00h51

Bonsoir,

avec l'inspecteur sur tout navigateur, tu peux voir la propriété css qui est mise par défaut et qui ne convient pas:
ici, il s'agit de border-spacing: 2px;

déclare donc un border-spacing: 0px; pour table, déjà
sinon je viens de regarder c'est pas encore ça, mais je cherche

A ta place en tout cas pour être moins embêté, je ferais une image unique en fond de conteneur et une table ou plutôt des div en float:left pour le contenu texte

mais bon voici ton code corrigé:

Code html :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
table, tbody {
    border:none;
    border-spacing: 0px;
    border-image-width:0px;
}
td, tr{
    border:none;
    height:auto;
}
img {
    display:block;
    position:relative;
    border:none;
}
</style>
</head>
 
<body><style>img {display: block;}</style>
<table width="600" border="0" cellpadding="0" cellspacing="0">
 
<!-- LOGO ET COTE -->
<tr>
<td width="20" height="850" rowspan="25" ></td>
<td valign="top" height="122"><imgsrc="http://www.creationspice.fr/newsletter/logo-olympus.jpg" style="display:block;" align="absbottom"alt="" width="600" /></td>
<td width="20" height="850" rowspan="25"></td>
</tr>
 
 
<!-- CONTENU 1 -->
<tr>
<td align="left" height="auto">
<img style="display:block;" src="http://www.creationspice.fr/newsletter/titleblg.jpg"/>
</td>
</tr>
 
<!-- CONTENU 3 -->
<tr>
<td><table style="" border="0" cellspacing="0" cellpadding="0" >
<tbody>
 
<tr>
<td align="left" valign="top" width="300">
<span style="padding:0px;color:#f48b1b;font-family:helvetica;font-size:15px;;">
Aventurier, hipster ou véritable fashionista,<br/>
découvrez quel appareil photo<br/>
OLYMPUS est fait pour vous !
</span>
</td>
 
 
<td align="right" width="300">
<img src="http://www.creationspice.fr/newsletter/p1.jpg" style="display:block;"/>
</td>
</tr>
</tbody></table></td>
</tr>
 
 
 
<!-- CONTENU 4 -->
<tr>
<td align="right" height="auto">
<img style="display:block;" src="http://www.creationspice.fr/newsletter/title2.png"/>
</td>
</tr>
 
 
<!-- CONTENU 4 -->
 
<tr>
<td><table style="" border="0" cellspacing="0" cellpadding="0" >
<tbody>
 
<tr>
<td align="left" valign="top" height="auto" width="300">
<span style="padding:0px;color:#8d8d8d;font-family:helvetica;font-size:15px;">
le studio mythique des plus grands<br/>
photographes et révélez le style<br/>
qui sommeille en vous !<br/><br/>
23-27 avenue Jean Moulin<br/>
75014 Paris
</span>
</td>
 
 
<td align="left" width="300">
<img style="display:block;" src="http://www.creationspice.fr/newsletter/p2.jpg"/>
</td>
</tr>
</tbody></table></td>
</tr>
 
 
 
<tr>
<td align="right" width="300">
<img style="display:block;" src="http://www.creationspice.fr/newsletter/p3.jpg"/>
</td>
</tr>
 
 
 
 
<tr>
<td><table style="" border="0" cellspacing="0" cellpadding="0" >
<tbody>
 
<tr>
<td align="left" valign="top" height="auto" width="300">
<span style="padding:0px;color:#8d8d8d;font-family:helvetica;font-size:15px;">
Métro ligne 4 : Alesia<br/>
Tram 3 : Jean Moulin<br/>
Bus (28, 38, 62, 68, N14, N21)<br/>
Alésia-Général Leclerc<br/>
Station Velib‚ à proximité
</span>
</td>
 
 
<td align="left" width="300">
<img style="display:block;" src="http://www.creationspice.fr/newsletter/p4.jpg"/>
</td>
</tr>
</tbody></table></td>
</tr>
 
 
 
 
 
<tr>
<td align="right" height="auto">
<img style="display:block;" src="http://www.creationspice.fr/newsletter/footer.jpg"/>
</td>
</tr>
 
</table>
</body>
</html>

**vincenot** · 18/09/2014, 08h04

Merci beaucoup, je teste de suite !

**vincenot** · 18/09/2014, 08h53

Je viens de faire l'essai, et l'image est toujours coupée !

Merci quand même, je continue mes recherches

**01001111** · 18/09/2014, 09h33

attends c'est bizarre j'ai testé moi aussi ça marchait sans couper l'image, as-tu strictement copier/collé, sur quel navigateur es-tu?
perso j'ai testé ça sous chromium et ça marche

**vincenot** · 18/09/2014, 10h03

Oui, j'ai bien copié / collé tel quel.

Par contre, cette newsletter est destinée à être envoyée par mail, c'est dans la messagerie que cela ne fonctionne pas (outlook notamment) .

Merci en tout cas

**01001111** · 18/09/2014, 10h37

outlook n'a pas d'inspecteur, mais utilise sûrement trident, le moteur si connu pour son manque de respect des normes.
si tu testes sur IE, ça donne pareil ou bien c'est correct?

Je vois d'autres problèmes dans ta news, un caractères non ISO-8859-1 que tu as du copier d'ailleurs, et des rowspan pas très logiques.
Quand j'aurais le temps je testerai sous IE8.

**vincenot** · 18/09/2014, 18h46

Oui, il est très probable qu'il y ait des erreurs car c'est ma première newsletter.

Dans IE, pareil, l'image est divisée en plein de morceaux qui semblent correspondre à mes tableaux.

Merci encore pour le coup de main en tout cas. Je continue mes recherches.

**01001111** · 18/09/2014, 23h38

je voudrais bien vous aider, mais vos fichiers images ne sont plus en ligne, il est donc impossible pour moi de tester des choses pour l'instant.

**vincenot** · 19/09/2014, 14h31

Merci de votre message.

j'ai fait une nouvelle version, mais toujours le même problème !

Je remets les fichiers en ligne.

Merci de votre aide

**01001111** · 19/09/2014, 14h45

Je constate que vous n'avez pas semble-t-il copié le code vaguement corrigé que je vous ai donné.
Secundo, je vous conseille de reprendre bien correctement vos bases html css, car il y a beaucoup plus simple à faire que de découper les images.
Par exemple, faire un div avec l'image entière en background serait bien plus opportun et facile à mettre en place.
Celui ci contiendrait la table qui servirait à mettre en place les éléments texte

bon courage

**vincenot** · 19/09/2014, 14h53

C'est une autre version que j'avais faite parallèlement.

J'ai corrigé le code selon vos indications sur ma première version. je vais essayer ce que vous me conseillez avec le div.

Merci mille fois et bonne journée

Image coupée dans ma newsletter

Conception Web

Discussions similaires

Partager

Partager