[XHTML] Pb d'espaces entre Div contenant des images en XHTML Strict
Bonjour
Je ne vous cache pas que vous êtes ici ma dernière chance car j'ai beau parcourir le Net, rien ne marche :cry:
J'ai créé un gabarit de site sous Photoshop. J'ai exporté les images et rebidouillé les div générés par Toshop car c'était tout mis en absolute (je veux mon site centré).
J'ai placé 3 div horizontaux avec mes images dedans. Le problème est que j'ai des espaces entre ces lignes d'images ...
J'ai tout essayé :
- display:block; au niveau de ces div (toutes mes images se retrouvent alors à la verticale ...)
- vertical-align: middle; (ca ne change rien)
- définir une height dans ces div qui correspond à la taille des images. (rien non plus)
- mettre chaque image dans un div ou un span. (rajoute un espace entre chaque image d'une ligne ...)
- des <br /> en fin de div (avec ou sans, ca revient au même)
Mon code marche en Transitional mais dès que je passe en Strict, les lignes d'espace vide apparaissent ...Et c'est même Firefox qui affiche mal, IE trouve ca tout à fait correct :cry:
Voici la partie de XHTML et la CSS qui correspond :
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
| <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body background="images/FondSite.png">
<div id="divGeneral">
<div class="divLignes">
<a href="index.php"><img src="images/imageSite_01.jpg" width="169" height="133" alt="" /></a><img src="images/imageSite_02.jpg" width="655" height="133" alt="" /><img src="images/imageSite_03.jpg" width="127" height="133" alt="" /><br />
</div>
<div class="divLignes">
<img src="images/imageSite_04.jpg" width="169" height="82" alt="" /><img src="images/imageSite_05.jpg" width="30" height="82" alt="" /><a href="index.php"><img src="images/imageSite_06.jpg" width="70" height="82" alt="Accueil" /></a><img src="images/imageSite_07.jpg" width="52" height="82" alt="" /><a href="index.php?page=services"><img src="images/imageSite_08.jpg" width="71" height="82" alt="Services" /></a><img src="images/imageSite_09.jpg" width="45" height="82" alt="" /><a href="index.php?page=realisations"><img src="images/imageSite_10.jpg" width="97" height="82" alt="Réalisations" /></a><img src="images/imageSite_11.jpg" width="46" height="82" alt="" /><a href="index.php?page=contact"><img src="images/imageSite_12.jpg" width="74" height="82" alt="Contact" /></a><img src="images/imageSite_13.jpg" width="26" height="82" alt="" /><a href="index.php?page=client"><img src="images/imageSite_14.jpg" width="121" height="82" alt="Espace Client" /></a><img src="images/imageSite_15.jpg" width="23" height="82" alt="" /><img src="images/imageSite_16.jpg" width="127" height="82" alt="" /><br />
</div>
<div class="divLignes">
<img src="images/imageSite_17.jpg" width="169" height="81" alt="" /><img src="images/imageSite_18.jpg" width="655" height="81" alt="" /><img src="images/imageSite_19.jpg" width="127" height="81" alt="" /><br />
</div>
</div>
</body>
</html> |
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
| body{
margin:0px;
padding:0px;
width:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:11px;
background-color: #14a5d5;
/*background-image: url("../images/FondSite.png")*/
background-repeat:repeat-x;
}
/* Structure */
#divGeneral {
margin-left: auto;
margin-right: auto;
width:951px;
height:650px;
}
#divLignes {
display: block;
vertical-align: middle;
}
#contenu{
width:79%;
float:left;
}
#basCentre{
float:left;
}
#cadre{
width:18%;
background-image: url(../images/cadre.jpg);
background-repeat:no-repeat;
float:right;
line-height:20px;
padding:10px;
margin-top:250px;
} |
Merci pour votre aide car le site doit être rapidement mis en ligne et je désepère un peu :cry: :cry:
