[XHTML] Pb d'espaces entre Div contenant des images en XHTML Strict

**kiouz** · 16/07/2007, 14h09

Bonjour

Je ne vous cache pas que vous êtes ici ma dernière chance car j'ai beau parcourir le Net, rien ne marche

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

Voici la partie de XHTML et la CSS qui correspond :

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
<!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 :

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
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

**Strix** · 16/07/2007, 14h31

Salut.

Déjà passe doctype en DOCTYPE

J'vais voir le reste

Edit : Supprime background="images/FondSite.png" dans ta balise body et ton document sera valide.
Dans ton css (body), écris bien

Code CSS :

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

background-image: url(../images/FondSite.png);

et non

Code CSS :

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

background-image: url("../images/FondSite.png")

On a pas le chemin complet de tes images, difficile de voir ce que ça doit donner... Essaye de rajouter :

Code CSS :

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

1
2
3
4
img {
   margin:0;
   padding:0;
}

**kiouz** · 16/07/2007, 14h46

Je n'ai pas mis background-image: url(../images/FondSite.png); dans le CSS car sous IE ca ne fonctionne pas

**Strix** · 16/07/2007, 14h53

Tu peux donner le chemin de ton dossier image svp, là on peut pas voir le problème

**blueice** · 16/07/2007, 15h15

background-image fonctionne très bien avec IE, mais le PNG peut poser problème.
Il faut un exemple en ligne ou un dossier complet que tu places en pièce jointe.
Tu auras ta solution très rapidement de cette manière...

**kiouz** · 16/07/2007, 15h29

Je vous ai fait une page de démo sans le contenu (car il est un peu confidentiel).

Vous pourrez voir les lignes d'espaces dans les images du header

http://marinetts.com/test/

[XHTML] Pb d'espaces entre Div contenant des images en XHTML Strict

HTML

Vue hybride

Discussions similaires

Partager

Partager