[XHTML] problème de décalage des images sous ie

**dark$hadow** · 22/05/2007, 09h10

Bonjour à tous!!

Je poste message à cause d'un problème sous ie qui laisse un blanc sous chacune de mes images.
Bien sûr j'ai essayé la méthode de bloc mais rien n'y fait il reste ce foutu décalage!!!

Mon deuxième problème c'est que je n'arrive pas à valider mon code xhtml strict à cause de mon javascript(le lien dans le header du site).

Je vous poste le code ci-dessous ainsi que le lien direct vers le site(vous aller comprendre le souci très rapidement :p )

Je vous remercie d'avance pour votre aide qui me sera précieuse!!!

Le Site en question

>> Le code XHTML

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
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
 
<!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" xml:lang="fr">
<head>
  <title>Centre Eugène Marquis</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <!-- Feuilles de style et javascript -->
  <style type="text/css" media="screen">@import url(styleGeneral.css);</style>
  <style type="text/css" media="screen">@import url(styleMiseEnPage.css);</style>
  <script language="javascript" type="text/javascript" src="formulaires.js"></script>
</head>
  <body> 
  <!-- Block contenant le header. -->
  <div id="header"> 
    <!-- Sous-block contenant les deux espaces réservés au grand public et aux professionnels. -->
    <div id="blockEspaceGdPublic">
      <a href="#" id="espaceGdPublic"><img src="images/espaceTransparent.gif" id="lienEspaceGdPublic" alt="Espace Transparent" /></a>
    </div>
    <div id="blockEspacePro">
      <a href="#" id="espacePro"><img src="images/espaceTransparent.gif" id="lienEspacePro" alt="Espace Transparent" /></a>
    </div>
  </div>
  <!-- Block contenant la fonction recherche et le menu sous le header. -->
  <div id="espaceSousLeHeader">
    <span id="liensMenuHaut">
      &nbsp;&nbsp;
      <a href="#" class="elementMenu">Accueil</a>
      <img src="images/separateurMenuHaut.jpg" alt="Séparateur" />
      <a href="#" class="elementMenu">Glossaire</a>
      <img src="images/separateurMenuHaut.jpg" alt="Séparateur" />
      <a href="#" class="elementMenu">Accès</a>
      <img src="images/separateurMenuHaut.jpg" alt="Séparateur" />
      <a href="#" class="elementMenu">Contact</a>
      <img src="images/separateurMenuHaut.jpg" alt="Séparateur" />
      <a href="#" class="elementMenu">Plan du site</a>
      &nbsp;&nbsp;
    </span>
    <form action="#" method="post" class="niceform">
      <input size="10" type="text" name="rechercher" value="Rechercher" />
      <input type="image" src="images/formulaires/boutonSubmit.gif" alt="Bouton de validation" name="submit" id="boutonSubmit" align="absmiddle" />
    </form>
  </div>
  <!-- Block contenant les pointillés sous le header. -->
  <div id="pointillesDelimitateurs">
    <img src="images/pointillesBasMenuSousHeader.jpg" class="pointilles" alt="Pointillés sous le header" />
  </div>
  <div id="zoneCentrale">
    <!-- Block contenant le menu principal de gauche. -->
    <div id="menuGauche">
      <!-- Sous-block contenant l'image de fond du menu du haut du menu et son titre. -->
      <div id="titreDuMenu">
        <img src="images/titreMenuGauche.png" id="titreMenuGauche" alt="Navigation" />
      </div>
      <!-- Sous-block contenant les liens du menu. -->
      <div id="contenuDuMenu">
        <ul>
          <li><a href="#" class="elementMenu">Actualités</a></li>
          <li><a href="#" class="elementMenu">Présentation du centre</a></li>
          <li><a href="#" class="elementMenu">Dépistage et prévention</a></li>
          <li><a href="#" class="elementMenu">Formation</a></li>
          <li><a href="#" class="elementMenu">Soutenir le centre</a></li>
          <li><a href="#" class="elementMenu">Annuaire</a></li>
        </ul>
      </div>
      <!-- Sous-block contenant l'image de fond du bas du menu. -->
      <div id="basDuMenu">
      </div>
    </div>
    <!-- Block contenant le contenu du site. -->
    <div id="contenuDuSite">
       <h1>Mon super site</h1>
       <p>
           Bienvenue sur mon super site !<br />
           Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
       </p>
       <h2>A qui s'adresse ce site ?</h2>   
       <p>
           A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
           Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
       </p>
       <h2>L'auteur</h2>   
       <p>
           L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
           Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
           Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
       </p>
    </div>
    <img src="images/pointillesBasZoneCentrale.gif" class="pointilles" alt="Pointillés sous la zone centrale" />
  </div>
  <!-- Block contenant le footer. -->
  <div id="footer">
  </div>
  <!-- Block permettant de définir le bas du footer en temps que background pour pouvoir écrire dessus. -->
  <div id="basFooter">
  </div>
  </body>
</html>

>> Les codes CSS

Code général du site

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
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
/* Définit le style général du site. */
body
{
  /* Définit la largeur du site. */
  width: 790px;
  /* Décalage entre le haut du navigateur et le haut du site. */
  margin-top: 20px;
  /* Idem pour le bas du navigateur. */
  margin-bottom: 20px;
  /* Permet de centrer le site. */
  margin: auto;
}
 
/* Définit le style du block "header". */
#header
{
  /* Définit la largeur du block. */
  width: 790px;
  /* Définit la hauteur du block. */
  height: 168px;
  /* Définit l'image du fond du header. */
  background-image:url("images/header.jpg");
 /* Evite que l'image de fond ne se répète. */
  background-repeat:no-repeat;
}
 
/* Permet de caler le block "blockEspaceGdPublic". */
#header #blockEspaceGdPublic
{
  /* La position est calculée par rapport au block "header". */
  position: relative;
  /* Décalage de 70 pixels à gauche. */
  left: 70px;
  /* Décalage de 70 pixels en haut. */
  top: 53px;
  /* permet de mettre les deux liens pour les espaces sur une même ligne. */
  float: left;
}
 
/* Permet de caler le block "blockEspacePro". */
#header #blockEspacePro
{
  /* La position est calculée par rapport au block "header". */
  position: relative;
  /* Décalage de 70 pixels à gauche. */
  left: 400px;
  /* Décalage de 70 pixels en haut. */
  top: 53px;
}
 
 
/* Définit le style du block "espaceSousLeHeader". */
#espaceSousLeHeader
{
  /* Définit la largeur du block. */
  width: 782px;
  /* Définit la hauteur du block. */
  height: 30px;
  /* Définit la marge interne du block */
  padding: 2px;
  /* Couleur de fond du block(bleu clair). */
  background-color: #a1c5d5;
  /* Bordure gauche(jaune). */
  border-left: 2px solid #f6b920;
  /* Bordure gauche(jaune). */
  border-right: 2px solid #f6b920;
}
 
/* Définit le style du bouton submit de la fonction de recherche. */
#espaceSousLeHeader #boutonSubmit
{
  /* Définit la largeur de l'image. */
  width: 21px;
  /* Définit la hauteur de l'image. */
  height: 21px;
}
 
/* Permet de faire le fond jaune sous les liens */
#espaceSousLeHeader #liensMenuHaut
{
  /* Modifie le type de la balise "<p>" pour éviter le retour à la ligne. */
  display: inline;
  /* Fond sous les liens(jaune) */
  background-color: #f6b920;
  padding: 4px;
  float:right;
}
 
 
/* Définit la taille du block "pointilles" et de l'image "pointillesBasMenuSousHeader". */
.pointilles
{
  /* Définit la largeur du block. */
  width: 790px;
  /* Définit la hauteur du block. */
  height: 4px;
}
 
/* Définit la taille du block "zoneCentrale". */
#zoneCentrale
{
  /* Pointillés à droite et à gauche de la zone centrale. */
  background-image: url("images/pointille.jpg");
}
 
 
/* Définit le style du block "menuGauche". */
#menuGauche
{
  /* Pour que le menu soit affiché à gauche du corps du site. */
  float: left;
  /* Définit la largeur du block. */
  width: 188px;
}
 
/* Permet d'afficher le haut du menu ainsi que son titre. */
#menuGauche #titreDuMenu
{
  /* Définit la largeur du block. */
  width: 188px;
  /* Définit la hauteur du block. */
  height: 17px;
  /* Définit l'image du fond du header. */
  background-image:url("images/fondTitreMenuGauche.jpg");
 /* Evite que l'image de fond ne se répète. */
  background-repeat:no-repeat;
}
 
/* Définit le style de l'image qui contient le titre du menu. */
#menuGauche #titreDuMenu #titreMenuGauche
{
  /* Définit la largeur de l'image. */
  width: 74px;
  /* Définit la hauteur de l'image. */
  height: 14px;
  /* Permet à l'image d'être considérée comme un seul block. */
  display: block;
  /* Alignement de l'image. */
  margin: auto;
}
 
/* Définit le style du block "contenuDuMenu". */
#menuGauche #contenuDuMenu
{
  /* Définit la largeur du block. */
  width: 182px;
  /* Définit la marge interne du block */
  padding: 1px;
  /* Couleur de fond du block(bleu clair). */
  background-color: #a1c5d5;
  /* Bordure droite(jaune). */
  border-right: 2px solid #f6b920;
  /* Bordure gauche(jaune). */
  border-left: 2px solid #f6b920;
}
 
/* Définit le style du block "basDuMenu". */
#menuGauche #basDuMenu
{
  /* Définit la largeur du block. */
  width: 188px;
  /* Définit la hauteur du block. */
  height: 17px;
  /* Définit l'image du fond du header. */
  background-image:url("images/fondbasMenuGauche.jpg");
 /* Evite que l'image de fond ne se répète. */
  background-repeat:no-repeat;
}
 
/* Définit le style du block "contenuDuSite". */
#contenuDuSite
{
  /* Définit la largeur du block. */
  width: 592px;
  /* Définit la marge interne du block. */
  padding: 5px;
  /* Permet de décaler tout le texte à gauche du menu. */
  margin-left: 188px;
}
 
/* Définit le style du block "footer". */
#footer
{
  /* Définit la largeur du block. */
  width: 782px;
  /* Définit la hauteur du block. */
  height: 30px;
  /* Définit la marge interne du block */
  padding: 2px;
  /* Couleur de fond du block(bleu clair). */
  background-color: #a1c5d5;
  /* Bordure gauche(jaune). */
  border-left: 2px solid #f6b920;
  /* Bordure gauche(jaune). */
  border-right: 2px solid #f6b920;
}
 
/* Définit le style du block "basFooter". */
#basFooter
{
  /* Définit la largeur du block. */
  width: 790px;
  /* Définit la hauteur du block. */
  height: 26px;
  /* Définit l'image du fond du header. */
  background-image:url("images/basFooter.gif");
 /* Evite que l'image de fond ne se répète. */
  background-repeat:no-repeat;
 
}

Code de la mise en page du site

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
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
 
 
/*********************************************************
 *** STYLE DES LIENS POUR LES ESPACES PRO ET GD PUBLIC ***
 *********************************************************/
 
    /* >>> Espace Grand Public <<< */
 
        /* Lien "Espace Grand Public" Off */
        a#espaceGdPublic
        {
          /* Définit la largeur de l'image de fond. */
          width: 156px;
          /* Définit la hauteur de l'image de fond. */
          height: 23px;
          /* Fond quand le lien n'est pas sélectionné. */
          background: url("images/espaceGdPublicOff.png") no-repeat;
          /* Sert à éviter un bug sous mozilla */
          font-size: 26px;
        }
 
        /* Image transparente pour définir la zone du lien */
        #lienEspaceGdPublic
        {
          /* Définit la largeur du lien. */
          width: 156px;
          /* Définit la hauteur du lien. */
          height: 23px;
          /* Evite les bordures par défaut autour du lien */
          border: none;
        }
 
        /* Lien "Espace Grand Public" Hover */
        a:hover#espaceGdPublic
        {
          /* Définit la largeur de l'image de fond. */
          width: 156px;
          /* Définit la hauteur de l'image de fond. */
          height: 23px;
          /* Fond quand le lien n'est pas sélectionné. */
          background-image: url("images/espaceGdPublicHover.png");
        }
 
    /* >>> Espace Pro <<< */
 
        /* Lien "Espace Grand Public" Off */
        a#espacePro
        {
          /* Définit la largeur de l'image de fond. */
          width: 165px;
          /* Définit la hauteur de l'image de fond. */
          height: 23px;
          /* Fond quand le lien n'est pas sélectionné. */
          background: url("images/espaceProOff.png") no-repeat;
          /* Sert à éviter un bug sous mozilla */
          font-size: 26px;
        }
 
        /* Image transparente pour définir la zone du lien */
        #lienEspacePro
        {
          /* Définit la largeur du lien. */
          width: 165px;
          /* Définit la hauteur du lien. */
          height: 23px;
          /* Evite les bordures par défaut autour du lien */
          border: none;
        }
 
        /* Lien "Espace Grand Public" Hover */
        a:hover#espacePro
        {
          /* Définit la largeur de l'image de fond. */
          width: 165px;
          /* Définit la hauteur de l'image de fond. */
          height: 23px;
          /* Fond quand le lien n'est pas sélectionné. */
          background-image: url("images/espaceProHover.png");
        }
 
/*********************************
 *** STYLE DES LIENS DES MENUS ***
 *********************************/
 
/* Style des liens off */
a.elementMenu
{
  /* Couleur des liens(bordeau). */
  color: #ba0404;
  /* Gras. */
  font-weight: bold;
  /* Enlève le soulignage par défaut. */
  text-decoration: none;
}
 
/* Style des liens hover */
a:hover.elementMenu
{
  /* Changement de couleur quand la souris passe sur le lien. */
  color: #4eaa77;
}
 
/* Style des liens active et focus. */
a:active.elementMenu, a:focus.elementMenu
{
  /* Quand l'image est cliquée, affiche un fond. */
  background-image: url("images/fondLiensHover.jpg");
}
 
/* Style des menus à puces. */
ul
{
  /* Choix de l'image de puce. */
  list-style-image: url("images/fleche.jpg");
  /* Définit la hauteur de l'interligne. */
  line-height: 30px;
}
 
/* Style de chaque élément des menus à puces. */
li
{
  /* Décalage gauche des éléments. */
  margin-left: -20px;
  /* Bordure sous chaque élément(jaune). */
  border-bottom: 1px solid #f6b920;
 
}
 
 
/*Forms defaults - change as needed*/
input, textarea {
        font-family:Verdana, Helvetica, sans-serif;
        font-size:12px;
        color:#404040;
}
 
label {
        color:#999;
        cursor:pointer;
        padding-left:2px;
        line-height:16px;
}
label.chosen {color:#333;}
 
/*Transparent items*/
.outtaHere {
        position:absolute;
        left:-3000px;
}
 
/*Radio buttons*/
.radioArea, .radioAreaChecked {
        display:block;
        float:left;
        clear:left;
        width:15px;
        height:14px;
        font-size:0;
        cursor:pointer;
}
.radioArea {background:url(images/formulaires/radio.gif) no-repeat left top;}
.radioAreaChecked {background:url(images/formulaires/radio.gif) no-repeat left bottom;}
 
/*Checkboxes*/
.checkboxArea, .checkboxAreaChecked {
        display:block;
        float:left;
        clear:left;
        width:13px;
        height:13px;
        font-size:0;
        padding:0;
        margin:0;
        cursor:pointer;
}
.checkboxArea {background:url(images/formulaires/checkbox.gif) no-repeat left top;}
.checkboxAreaChecked {background:url(images/formulaires/checkbox.gif) no-repeat left bottom;}
.focused {border:1px dotted #ddd;}
 
/*Text inputs*/
.textinput, .textinputHovered {
        height:15px;
        background:url(images/formulaires/input_bg.gif) repeat-x left top;
        border:none;
        padding:4px 0;
        vertical-align:middle;
}
.textinputHovered {background-position:left bottom;}
.inputCorner {
        padding-bottom:0;
        vertical-align:middle;
}
 
/*Text areas*/
.txtarea .tr, .txtarea .tr_xon {background:url(images/formulaires/txtarea_tr.gif) no-repeat top right;}
.txtarea .tr_xon {background:url(images/formulaires/txtarea_tr_xon.gif) no-repeat top right;}
.txtarea img.txt_corner {
        width:5px;
        height:5px;
        display:block;
}
.txtarea .br, .txtarea .br_xon {background:url(images/formulaires/txtarea_br.gif) no-repeat top right;}
.txtarea .br_xon {background:url(images/formulaires/txtarea_br_xon.gif) no-repeat top right;}
.txtarea .cntr {background:url(images/formulaires/txtarea_cntr.gif) repeat-y right top;}
.txtarea .cntr_xon {background:url(images/formulaires/txtarea_cntr_xon.gif) repeat-y right top;}
.txtarea .cntr_l, .txtarea .cntr_l_xon {
        width:5px;
        background:url(images/formulaires/txtarea_l.gif) repeat-y left top;
        float:left;
}
.txtarea .cntr_l_xon {background:url(images/formulaires/txtarea_l_xon.gif) repeat-y left top;}
.txtarea textarea {
        border:0;
        background:none;
        padding:0;
        margin:5px;
}
 
/*Selects*/
.selectArea {
        width:200px;
        height:21px;
        background:url(images/formulaires/select_bg.gif) repeat-x left top;
}
.selectArea .left {
        width:8px;
        height:21px;
        float:left;
        background:url(images/formulaires/select_left.gif) no-repeat left top;
}
.selectArea .right {
        width:21px;
        height:21px;
        float:right;
        background:url(images/formulaires/select_right.gif) no-repeat left top;
}
.selectArea .right a {
        display:block;
        width:200px;
        height:21px;
        margin-left:-179px;
        position:absolute;
}
.selectArea .right i {display:none;}
.selectArea .center {
        width:160px;
        color:#FFF;
        padding-top:3px;
        overflow:hidden;
        white-space:nowrap;
}
 
/*Selects drop-down*/
.optionsDivInvisible, .optionsDivVisible {
        position:absolute;
        margin-top:-1px;
        margin-left:3px;
        width:172px;
        background:#6f7074;
        padding:2px;
        font-size:11px;
        z-index:20;
}
.optionsDivInvisible {display:none;}
.optionsDivVisible {display:block;}
.optionsDivVisible p {
        margin:0;
        padding:0;
}
.optionsDivVisible a {
        color:#F2F2F2;
        text-decoration:none;
        display:block;
        padding:1px 4px;
        border:1px solid #6f7074;
}
.optionsDivVisible a:hover {
        color:#FFF;
        background:#5F6062;
        border-color:#cfd0d6;
}
 
/*Button*/
.buttonSubmit, .buttonSubmitHovered {
        width:auto;
        height:26px;
        color:#FFF;
        font-weight:bold;
        padding:2px;
        background:url(images/formulaires/button_bg.gif) repeat-x left top;
        cursor:pointer;
        border:none;
}
.buttonSubmitHovered {background-position:left bottom;}
.buttonImg {vertical-align:bottom;}

**GregPeck** · 22/05/2007, 13h31

Je n'ai pas eu le temps de regarder mais en sous IE, il y a un bug qui fait que les images ont un espace en dessous si tu ne cole pas les balises img.

Par exemple:

Code :

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

1
2
3
 
<img src='aa.jpg' width='700'/>
<img src='bb.jpg' width='700'/>

Ne donnera pas le même résultat que :

Code :

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

1
2
 
<img src='aa.jpg' width='700'/><img src='bb.jpg' width='700'/>

C'est peux etre une piste.

[XHTML] problème de décalage des images sous ie

HTML

Vue hybride

Discussions similaires

Partager

Partager