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

**Candygirl** · 16/07/2007, 16h00

Tu as mis un class="divLignes" dans ton html et dans ton css tu l'appelle comme si c'était un ID: #divLignes

Normalement un

Code css :

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

1
2
3
.divLignes img {
	vertical-align:middle;
}

devrait résoudre ton problème.

Après tu pourrais peut-être revoir ta structure.

**Strix** · 16/07/2007, 16h04

C'est normal que tu ais un trait noir de 1px noir dans tes images (au-dessus pour les boutons?

**kiouz** · 16/07/2007, 16h08

Aaahhhhhhhh merciiiiiiiiiiii

Je fais tout le temps cette boulette c'est impressionnant

Sinon tu aurais vu la structure comment ?

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

Envoyé par Strix

C'est normal que tu ais un trait noir de 1px noir dans tes images (au-dessus pour les boutons?

Ben c'était un peu ça le problème

**Strix** · 16/07/2007, 16h12

Envoyé par kiouz

Ben c'était un peu ça le problème

Oui mais dans tes images même, pas dans ton html ou autre...
J'hallucine...

**blueice** · 16/07/2007, 16h20

Alors pas eu le temps de tous vous lire.
J'ai isolé le problème, ca vient des images et c'est super bizarre !
Bref vire toutes les tailles de tes images...

**kiouz** · 16/07/2007, 16h40

Ouais mais si j'enleve ca, je ne serai plus XHTML Strict

J'ai fait le changement dans la CSS et je suis compatible XHTML 1.1 donc c'est cool

Merci Candygirl

**blueice** · 16/07/2007, 16h53

Désolé, mais c'est totalement compatible XHTML STRICT...

**Candygirl** · 16/07/2007, 17h15

Envoyé par kiouz

Sinon tu aurais vu la structure comment ?

Les images de déco en image de fond, un alt renseigné pour ton logo qui contient une information textuelle (voir une balise de titre autour), une structure en liste pour ton menu.

A noter qu'en l'état ton espace réapparaîtra si le line-height devient plus grand que la hauteur de ton image ( si tu fais ctrl + plusieurs fois sur FF).

Envoyé par blueice

vire toutes les tailles de tes images.

Il me sembe que virer les dimensions des images peut parfois créer un bug d'affichage (selon la configuration de la page) ? j'ai eu le cas il n'y a pas longtemps sur FF...

Envoyé par kiouz

J'ai fait le changement dans la CSS et je suis compatible XHTML 1.1

Je ne trouve perso pas judicieux d'utiliser ce doctype dans ton contexte cf cette discussion sur le choix du doctype

**blueice** · 16/07/2007, 17h40

Il me sembe que virer les dimensions des images peut parfois créer un bug d'affichage (selon la configuration de la page) ? j'ai eu le cas il n'y a pas longtemps sur FF...

Je ne donne jamais le format des images sauf cas particulier dans le cas où je ne gère pas les images, exemple : issues d'un upload et dans ce cas il faut forcer...
Jamais eu aucun problème...

**Candygirl** · 16/07/2007, 19h19

Envoyé par blueice

Jamais eu aucun problème...

J'ai retrouvé le site qui m'avait posé problème à l'époque et j'en ai tiré une version simplifiée du problème.

C'est le truc à côté du quel on peut passer aisément puisque cela ne se produit pas en local et le "bug" n'apparaît que tant que l'image n'est pas en cache, soit que la première fois qu'on affiche la page sur le serveur distant. Perso j'ai un de mes navigateurs qui ne garde aucun cache et donc je peux observer le problème à chaque fois.

Maintenant il est clair que je ne l'ai pas observé souvent, je ne sais pas exactement quelle sont les conditions requises (à voir, des positions relatives et un float).

Il semblerait donc que le moteur Gecko ait parfois besoin de connaître la taille des images avant leur téléchargement afin d'afficher correctement le reste de la page.

page-test sans le width/height de l'image renseigné = bug avant mise en cache
page-test avec le width/height de l'image renseigné = ok

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

HTML

Discussions similaires

Partager

Partager