Probleme d'affichage divs sous IE 6

**12monkeys** · 12/01/2007, 18h19

Bonjour,

J'ai crée un ensemble de menus verticaux, composés de plusieurs sous menus qui se composent ainsi : voir pièce jointe

Ces différents menus s'affichent correctement sauf à chaque fois le dernier : la colone de gauche se déplace sous le corps et emmene le pied avec...

Code html :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Accueil</TITLE>
 
<META http-equiv="Content-Style-Type" content="text/css">
 
<LINK href="style.css" rel="stylesheet" type="text/css">
 
<!-- STYLE type="text/css" -->
 
<!-- /STYLE -->
 
</HEAD>
 
<BODY>
<div id="centrer">
 
    <div style="width:1000px;height:43px;background-image: url(im/bord/a.jpg)"></div>
 
    <div id="cb1" style="float:left;height:2000px"></div>
 
    <div style="float:left;width:914px">
 
 
<!-- Les menus -->
 
	<div style="float:left;width:150px;margin-right:4px">
 
	    <div style="text-align:center">
	      <A href="index.htm" title="Retour à l'index">
	      <IMG src="im/singes.gif" border="0" width="100" alt="Retour à l'index">
	      </A>
	    </div>
 
<!-- Menu 1 -->
	    <div style="margin-top:10px;width:150px;height:43px;background-image: url(im/menus/2/ptimhadm.gif)"></div>
	    <div style="float:left;width:2px;height:99px;background-image: url(im/menus/2/ptimc.gif)"></div>
	    <div style="float:left;width:146px">
 
		<div class="polmenugch" style="margin-left:1px">
		  <IMG src="im/fleche.gif" alt="">&nbsp;<!-- A href="accueil.htm" title="Retour à l'accueil" -->Retour à l'accueil</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="contact.htm" title="Envoyer un message">Me contacter</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="contact.htm#envoimages" title="Envoyer des images">Envoyer des images</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="liens.htm" title="Les liens">Les liens</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="zonembres.htm" title="Accéder à la Zone Membres">Zone Membres</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="contact.htm#newsletter" title="Recevoir la newsletter">La newsletter</A><BR>
		</div>
 
	    </div>
	    <div style="float:left;width:2px;height:99px;background-image: url(im/menus/2/ptimc.gif)"></div>
	    <div style="float:left;width:150px;height:19px;background-image: url(im/menus/2/ptimb.gif)"></div>
 
 
<!-- Menu 2 -->
	    <div style="float:left;width:150px;height:43px;margin-top:20px;background-image: url(im/menus/2/ptimhlist.gif)"></div>
	    <div style="float:left;width:2px;height:302px;background-image: url(im/menus/2/ptimc.gif)"></div>
	    <div style="float:left;width:146px">
 
		<div class="polmenugch" style="margin-left:1px">
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="listes/page.htm" title="">Page principale</A>
		  <HR width="125" color="red" align="center" size="1">
		  <IMG src="im/fleche.gif" alt="">&nbsp;Type 1 :<BR>
		  <div class="rettxt05">- <A href="listes/page1.htm" title="">Page 1</A><BR></div>
		  <div class="rettxt05">- <A href="listes/page2.htm" title="">Page 2</A><BR></div>
		  <div class="rettxt05">- <A href="listes/page3.htm" title="">Page 3</A><BR></div>
		  <div class="rettxt05">- <A href="listes/page4.htm" title="">Page 4</A><BR></div>
		  <div class="rettxt05">- <A href="listes/page5.htm" title="">Page 5</A><BR></div>
		  <div class="rettxt05">- <A href="listes/page6.htm" title="">Page 6</A><BR></div>
		  <div class="rettxt05">- <A href="listes/page7.htm" title="">Page 7</A><BR></div>
		  <HR width="125" color="red" align="center" size="1">
		  <IMG src="im/fleche.gif" alt="">&nbsp;Type a :<BR>
		  <div class="rettxt05">- <A href="listes/pagea.htm" title="">Page A</A><BR></div>
		  <div class="rettxt05">- <A href="listes/pageb.htm" title="">Page B</A><BR></div>
		  <div class="rettxt05">- <A href="listes/pagec.htm" title="">Page C</A><BR></div>
		  <div class="rettxt05">- <A href="listes/paged.htm" title="">Page D</A><BR></div>
		  <div class="rettxt05">- <A href="listes/pagee.htm" title="">Page E</A><BR></div>
		  <div class="rettxt05">- <A href="listes/pagef.htm" title="">Page F</A><BR></div>
		  <div class="rettxt05">- <A href="listes/pageg.htm" title="">Page G</A><BR></div>
		</div>
 
	    </div>
	    <div style="float:left;width:2px;height:302px;background-image: url(im/menus/2/ptimc.gif)"></div>
	    <div style="float:left;width:150px;height:19px;background-image: url(im/menus/2/ptimb.gif)"></div>
 
<!-- Menu 3 -->
	    <div style="float:left;width:150px;height:43px;margin-top:20px;background-image: url(im/menus/2/ptimhtyp.gif)"></div>
	    <div style="float:left;width:2px;height:111px;background-image: url(im/menus/2/ptimc.gif)"></div>
	    <div style="float:left;width:146px">
 
		<div class="polmenugch" style="margin-left:1px">
		  <IMG src="im/fleche.gif" alt="">&nbsp;Les photos :<BR>
		  <div class="rettxt05">- <A href="listes/ph-1.htm" title="">Galerie 1</A><BR></div>
		  <div class="rettxt05">- <A href="listes/ph-2.htm" title="">Galerie 2</A><BR></div>
		  <div class="rettxt05">- <A href="listes/ph-3.htm" title="">Galerie 3</A><BR></div>
		  <HR width="125" color="red" align="center" size="1">
		  <IMG src="im/fleche.gif" alt="">&nbsp;Les vidéos :<BR>
		  <div class="rettxt05">- <A href="listes/videos.htm" title="">Toutes les vidéos</A><BR></div>
		</div>
 
	    </div>
	    <div style="float:left;width:2px;height:111px;background-image: url(im/menus/2/ptimc.gif)"></div>
	    <div style="float:left;width:150px;height:19px;background-image: url(im/menus/2/ptimb.gif)"></div>
 
<!-- Menu 4 -->
	    <div style="float:left;width:150px;margin-top:20px;height:43px;background-image: url(im/menus/2/ptimhfak.gif)"></div>
	    <div style="float:left;width:2px;height:107px;background-image: url(im/menus/2/ptimc.gif)"></div>
	    <div style="float:left;width:146px">
 
		<div class="polmenugch" style="margin-left:1px">
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="listes/zm-momo.htm" title="">Momo</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="listes/zm-mumu.htm" title="">Mumu</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="listes/zm-mama.htm" title="">Mama</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="listes/zm-mimi.htm" title="">Mimi</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="listes/zm-meme.htm" title="">Meme</A><BR>
		  <IMG src="im/fleche.gif" alt="">&nbsp;<A href="listes/zm-mm.htm" title="">MM</A><BR>
		</div>
 
	    </div>
	    <div style="float:right;width:2px;height:107px;background-image: url(im/menus/2/ptimc.gif)"></div>
	    <div style="float:left;width:150px;height:19px;background-image: url(im/menus/2/ptimb.gif)"></div>
 
	</div>
 
<!-- fin du menu -->

J'ai du rajouter ce code : un menu supplémentaire invisible pour que le problème n'apparaisse plus...

Code html :

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

1
2
3
4
5
	    <div style="float:left;width:150px;margin-top:20px;height:3px;border:1px solid white"></div>
	    <div style="float:left;width:2px;height:1px;border:1px solid white"></div>
	    <div style="float:left;width:140px;border:1px solid white"></div>
	    <div style="float:right;width:2px;height:1px;border:1px solid white"></div>
	    <div style="float:left;width:150px;height:1px;border:1px solid white"></div>

L'affichage se fait correctement sous FF mais pas sous IE 6.
Que pensez vous de mon code en général, et quel est le souci dans mon code ?? Merci

**MasterOfChakhaL** · 12/01/2007, 18h42

Salut,

J'en pense que tu détournes totalement l'usage du css et que du fait, tu perds son interêt.

L'interêt est de séparer le contenu de la présentation. Par conséquent l'usage à outrance de la balise style est fortement déconseillé.

De plus, les blocs flottants étant mal pris en charge par IE, tu cours à ta perte si c'est le seul moyen que tu connaisses pour placer et dimensionner tes éléments.

quelques lectures interessantes:
CSS : Notions de base
Div et CSS : une mise en page rapide et facile

la page des cours (X)HTML/CSS

PS: si tu connais a l'avance la largeur la hauteur de tes éléments, ansi que l'endroit où tu veux les placer, je te conseille très fortement d'utiliser position: absolute;

**12monkeys** · 12/01/2007, 20h19

Envoyé par MasterOfChakhaL

Salut,

J'en pense que tu détournes totalement l'usage du css et que du fait, tu perds son interêt.

L'interêt est de séparer le contenu de la présentation. Par conséquent l'usage à outrance de la balise style est fortement déconseillé.

Je n'utilise la basile style que provisoirement parce que je trouve que c'est plus pratique de travailler ainsi que de mettre le css dans un fichier différent (on doit naviguer de l'un à l'autre, on ne sais pas ce qui correspond à quoi...) Dès que ma page sera finie j'enlèverais toutes les balises style et je mettrais le css dans un fichier css...

De plus, les blocs flottants étant mal pris en charge par IE, tu cours à ta perte si c'est le seul moyen que tu connaisses pour placer et dimensionner tes éléments.

Je trouve ça quand même incroyable, il y a des rêgles à respecter en ce qui concerne le css, le html... si des entreprises ne savent pas les respecter il faudrait leur interdire de distribuer de tels programmes ..................

quelques lectures interessantes:
CSS : Notions de base
Div et CSS : une mise en page rapide et facile

la page des cours (X)HTML/CSS

J'ai déjà lu tout ça mais je débute et j'ai du mal à conceptualiser les choses...

PS: si tu connais a l'avance la largeur la hauteur de tes éléments, ansi que l'endroit où tu veux les placer, je te conseille très fortement d'utiliser position: absolute;

pour ce qui est de position:absolute, j'ai du mal à l'utiliser, je sais pas pourquoi, une sorte d'aversion.
je vais réessayer avec ça, il me reste plus qu'à retourner à mes leçons...
Je regrette presque les tableaux...

**12monkeys** · 14/01/2007, 02h52

bonsoir,

J'ai tout revu et voilà ce que ça donne :

Code html :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Accueil</TITLE>
 
<META http-equiv="Content-Style-Type" content="text/css">
 
<LINK href="style.css" rel="stylesheet" type="text/css">
 
<!-- STYLE type="text/css" -->
 
<!-- /STYLE -->
 
</HEAD>
 
<BODY>
<div id="centrer">
 
    <div style="width:1000px;height:43px;background-image: url(im/bord/a.jpg)"></div>
 
    <div id="cb1" style="float:left;height:2000px"></div>
 
    <div style="float:left;width:914px">
 
 
<!-- Les menus -->
 
	<div style="position:absolute;width:150px;margin-right:4px">
 
	    <div style="text-align:center">
	      <A href="index.htm" title="Retour à l'index">
	      <IMG src="im/singes.gif" border="0" width="100" alt="Retour à l'index">
	      </A>
	    </div>
 
<!-- Menu "Administratif" -->
	    <div style="position:absolute;top:150px">
 
		<div style="width:150px;height:43px;background-image: url(im/menus/2/ptimhadm.gif)"></div>
		<div style="width:2px;height:96px;background-image: url(im/menus/2/ptimc.gif)"></div>
		<div style="position:absolute;left:2px;top:43px;width:146px">
 
		    <div class="polmenugch" style="margin-left:1px">
		      <IMG src="im/fleche.gif" alt="">&nbsp;<!-- A href="accueil.htm" title="Retour à l'accueil" -->Retour à l'accueil</A><BR>
		      <IMG src="im/fleche.gif" alt="">&nbsp;<A href="contact.htm" title="Envoyer un message">Me contacter</A><BR>
		      <IMG src="im/fleche.gif" alt="">&nbsp;<A href="contact.htm#envoimages" title="Envoyer des images">Envoyer des images</A><BR>
		      <IMG src="im/fleche.gif" alt="">&nbsp;<A href="liens.htm" title="Les liens">Les liens</A><BR>
		      <IMG src="im/fleche.gif" alt="">&nbsp;<A href="zonembres.htm" title="Accéder à la Zone Membres">Zone Membres</A><BR>
		      <IMG src="im/fleche.gif" alt="">&nbsp;<A href="contact.htm#newsletter" title="Recevoir la newsletter">La newsletter</A><BR>
		    </div>
 
		</div>
		<div style="position:absolute;left:148px;top:43px;width:2px;height:96px;background-image: url(im/menus/2/ptimc.gif)"></div>
		<div style="width:150px;height:19px;background-image: url(im/menus/2/ptimb.gif)"></div>
 
	    </div>
 
 
	</div>
 
 
    </div>
 
    <div id="cb2" style="float:right;height:2000px"></div>
 
    <div style="float:left;width:1000px;height:43px;background-image: url(im/bord/c.jpg)"></div>
 
 
 
</div>
 
</BODY>
</HTML>

Et a priori l'affichage ne pose plus de problème, comme avant.

Sauf

un autre souci qui éxistait déjà avant, soit entre IE 6 et Firefox le texte ne s'affiche pas de manière identique : cela semble être une différence générale entre les deux que vous devez surement connaitre (mais pas moi

). c'est qu'il y a un pixel de plus qui sépare chaque ligne dans FF (on le voit bien quand on sélectionne le texte dans l'un et l'autre navigateur...
Cela pose un petit souci parce que le menu est plus long dans FF ce qui fait que je dois descendre plus l'image du bas du menu, et dans IE alors il y un espace trop important entre la dernière phrase et l'image du bas du menu, comment peut on régler ça ????

**12monkeys** · 24/01/2007, 22h23

Envoyé par 12monkeys

Sauf

un autre souci qui éxistait déjà avant, soit entre IE 6 et Firefox le texte ne s'affiche pas de manière identique : cela semble être une différence générale entre les deux que vous devez surement connaitre (mais pas moi

). c'est qu'il y a un pixel de plus qui sépare chaque ligne dans FF (on le voit bien quand on sélectionne le texte dans l'un et l'autre navigateur...
Cela pose un petit souci parce que le menu est plus long dans FF ce qui fait que je dois descendre plus l'image du bas du menu, et dans IE alors il y un espace trop important entre la dernière phrase et l'image du bas du menu, comment peut on régler ça ????

Pour ceux que ça interesse ou qui ont le même souci que moi, j'ai fait des recherches et découvert que ça venait en fait de la police : times new roman. J'ai changé la police en arial et le problème n'existe plus...
merci

Probleme d'affichage divs sous IE 6

CSS

Discussions similaires

Partager

Partager