Discussion :

[baggie]

Bonjour

J'ai un header composé de 2 images l'une à côté de l'autre.
Ensuite, en dessous, j'ai un menu qui fait la longueur des 2 images.

Mes 2 images devraient être "collées" au menu mais j'ai un espacement entre les images et le menu sur IE (8).

J'ai joint à mon message 2 screens pour mieux comprendre :
> celui où "2" est collé contre le menu : version OK
> celui où on a un espace blanc entre "2" et "3" : ce que j'obtiens sous IE.

Voici le code 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
 
<div class="header">
	<div id="bandeau">
		<div class="img_logo"><img src="images/logo_medium.gif" /></div>
		<div class="main_img"><img src="images/photo_top01.png" /></div>
	</div>
	<div style="clear: both;"></div>
	<div class="header2">
		<div id="left_header_menu"></div>
		<div id="header_menu">
			...
		</div>
		<div id="right_header_menu"></div>
	</div>
</div>

Et mon code CSS :

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
 
#bandeau {
	height: 196px;
}
 
.main_img {
	height: 200px;
}
 
.img_logo {
	margin-left: 45px !important;
	margin-top: 25px !important;
}
 
.header2 { 
	height: 35px;
}
 
#left_header_menu {
	background: url('images/menu_top_left.png') no-repeat;
	width: 17px;
	height: 35px;
	float: left;
}
 
#header_menu {	
	background: url('images/menu_top_center01.png') repeat-x;
	height: 35px;
	width: 864px;
	float: left;
}
 
#right_header_menu {
	background: url('images/menu_top_right.png') no-repeat;
	width: 19px;
	height: 35px;
	float: right;
}

J'ai tenté de mettre un margin-top négatif sur "3" mais si du coup ça résout le problème pour un navigateur, ça mange un morceau de "2" sur un autre.
Quand je fais une modification pour un navigateur, ce sera directement pire pour un autre.

Donc je ne vois pas vraiment comment faire

[NoSmoking]

Bonjour,
un bandeau de 196px de hauteur avec une image de 200px de hauteur, tu pars au casse pipe

Pourquoi encapsuler les images du bandeau dans des DIV ?

Mets tes images du bandeau en display:block;.

Pourquoi je ne peux pas enlever l'espacement sous mon image ?

[baggie]

Merci pour ta réponse.

Pour le 196px, je l'avais vu oui, j'avais modifié

Mes div sont là car je suis sous un CMS qui me permet de dire : à tel div on associe telle ou telle image.

Merci pour le lien sur la FAQ, j'avoue avoir complètement zappé Par contre, ça ne fonctionne pas pour autant, j'ai même l'impression que mon espacement est plus important qu'avant

[NoSmoking]

Il te faut virer la hauteur du bandeau ainsi que celle des deux DIV qui sont contenues dans celui ci.

Vires également le margin-top: 25px !important; de la class .img_logo, en règle générale il faut éviter de contrarié le flux inutilement.

Les images ont-elles des hauteurs compatibles ?

[baggie]

Merci pour les infos !

Je pense avoir compris pourquoi j'ai cet espace ! En fait dans mon div "main_img", j'ai un diaporama généré via un plugin. Il contient une liste <ul></ul> qui a donc un padding-bottom, qu'il faudrait que je fasse disparaître. Je pense qu'il correspond tout pile à l'espacement que j'ai