Discussion :

[baggie]

Bonjour

Je suis actuellement en plein développement d'un site et j'en suis au niveau de la compatibilité entre les différents navigateurs. J'ai eu plusieurs problèmes sous IE et j'en ai réglé la plupart, mais là je bloque. (pour info je suis sous IE8)

J'ai un menu créé avec trois divs : une image de gauche, un div avec les liens qui s'affichent, et une image de droite.

Sur ma page d'accueil, je n'ai pas de header, j'ai directement le menu : mes 3 divs s'affichent correctement (image A sur le screen ci-joint).

Sur une seconde page où là j'ai un header (2 images), l'image de gauche de mon menu saute et vient se mettre dans le header (image B sur le screen ci-joint).

Sur une troisième page, où j'ai exactement le même header que sur ma seconde page, l'image de gauche vient se caler en haut à droite de mon header.

Ce qui diffère entre la seconde et la troisième page : ce qu'il y a dans le contenu, dans un div se trouvant après mon menu.

Voici mon code HTML (pour 2ème et 3ème page) :

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
 
<div id="wrapper" class="center_content">
	<!-- header -->
	<div class="header">
		<div id="bandeau">
			<div class="img_truc"><img src="images/logo_truc.gif" /></div>
			<div class="main_img"><img src="images/photo_top01.png" /></div>
		</div>
		<div style="clear: both;"></div>
		<div id="left_header_menu"></div>
		<div id="header_menu">
			<div><a href="..."><img src="images/boff.png" id="button_ho" /></a></div>
			<div class="main_menu">
				<ul>
					<li>lien</li>
					<li>lien</li>
					<li>lien</li>
				</ul>
			</div>
			<div class="secondary_menu">
				<ul>
					<li>lien</li>
					<li>lien</li>
				</ul>
			</div>
		</div>
		<div id="right_header_menu"></div>
	</div>
	<div style="clear: both;"></div>
	<!-- Fin header -->
	<div id="content" class="inside">
...

Ma 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
 
#wrapper {
	width: 900px;
	margin: 0 auto;
	margin-top: 40px;
}
 
.header div, .header_actus div {
	float: left;
}
 
/* Header */
#bandeau {
	height: 196px;
}
 
.img_truc {
	margin-left: 45px !important;
}
 
#left_header_menu {
	background: url('images/menu_top_left.png') no-repeat;
	width: 17px;
	height: 35px;
}
 
#header_menu {	
	background: url('images/menu_top_center01.png') repeat-x;
	height: 28px;
	width: 856px;
	padding-top: 8px;
}
 
#right_header_menu {
	background: url('images/menu_top_right.png') no-repeat;
	width: 19px;
	height: 35px;
}

C'est donc au niveau de #left_header_menu (n°3 sur l'image) que j'ai un problème, enfin c'est ce div qui a un comportement que je ne comprends pas.

Normalement, sur chaque page, je devrais avoir ce qu'il y a d'illustré sur la figure A pour le menu.

Je ne comprends pas bien ce qui pose problème

Donc un peu d'aide serait la bienvenue, merci

[miss_socrates]

Il me semble que certaines images dans des div (la 3e et la 5e) remontent dans la div supérieure. Pour empêcher cela, je mettrais un

Code :

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

clear: both;

avant chaque div.
Donc aussi pour la left_header_menu (ligne 22 de la css).

[baggie]

Merci pour ta réponse. Cela ne règle pas tout malheureusement

Mon div n°3 vient du coup se caler sur la gauche là où il faut MAIS en dessous du menu principal Horizontalement il est bon, verticalement pas du tout.

[miss_socrates]

Il faudrait essayer avec une position: relativepour chaque div de sorte qu'elle vienne se placer dans le flux càd à la suite de la précédente.
Pour l'alignement vertical, essayer vertical-align: topou mettre la div3 en float :left et le menu en float : right

[baggie]

J'ai fait tous les tests, ça ne change rien du tout.

J'ai toujours mon left_header_menu un peu en dessous de header_menu. C'est galère comme truc

[miss_socrates]

J'ai testé sur toutes versions de IE, je ne trouve pas de problème, l'affichage est identique sur tous.
Si la div3 "voyage" il faut essayer la position:absolute ou fixed pour la caler.
Mais je ne comprends pas le souci de "la div3 est un peu en dessous du header"

[baggie]

J'ai mis une image en PJ pour mieux comprendre.

En orange, mon header principal où mon contenu se trouve (mon menu). Et en rouge left_header et right_header.

Et left_header est décalé verticalement.

[NoSmoking]

Bonjour,
à voir sur la base de

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#wrapper {
  width:900px;
  margin:0 auto;
  height:100px;
  background-color: #e0e0e0;
}
#header {
  height:196px;
  background-color:#0ff;
}
#left_header_menu {
  background-color:#f00;
  width:100px;
  height:35px;
  float:left;
}
#header_menu {
  background-color:#0f0;
  width:700px;
  height:35px;
  float:left;
}
#right_header_menu {
  background-color:#00f;
  width:100px;
  height:35px;
  float: right;
}
</style>
</head>
<body>
<div id="wrapper">
  <div class="header">
    <div id="left_header_menu"></div>
    <div id="header_menu"></div>
    <div id="right_header_menu"></div>
  </div>
</body>
</html>

[baggie]

Merci NoSmoking ! Cela fonctionne très bien sur une partie de mes pages, je vais voir pourquoi ça ne fonctionne pas sur le reste (qui utilise la même base html ).

Merci pour votre aide à tous les 2

EDIT : problème complètement réglé !