[XHTML] problème de décalage des images sous ie
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:
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">
<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>
</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:
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:
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;} |