Débutant - Menu - resultat différent sur IE et MF

**luc92** · 26/12/2008, 22h38

Bonjour,

Je rencontre des difficultés de nature différente selon les résultats de MF ou de IE.

Sous Mozilla :
- le dernier element de droite du menu se reporte en bas du 1er element de gauche (il va à la ligne !),
- le corps du texte se déplace vers le droite quand les sous menu sont trop long

Sous IE:
- le menu se position bien mais on ne peux pas séléctionner les sous menu à partir du 3eme éléments

Est ce qu'un pro peut m'apporter une précieuse aide. J'ai mis des dizaines d'heures pour arriver à ce résultat et je n'ose plus y toucher de peur de tout perdre.

Pour mieux comprendre mon objectif, j'essai de refaire ce site avec le moins de javascript possible pour mieux le référencer

Voici mes codes
HTML :

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
126
127
</head>
<body bgcolor="#993300" text="#FFCCFF" link="#FFFF00" vlink="#CCCC33" alink="#CCCC99" id="conteneur" onLoad="MM_preloadImages('AquaDream_images/fichier_travail_dreamweaver/image%20menu%20horizontal/menuitem31_over.gif','AquaDream_images/fichier_travail_dreamweaver/image%20menu%20horizontal/menuitem33_over.gif','AquaDream_images/fichier_travail_dreamweaver/image%20menu%20horizontal/menuitem34_over.gif','AquaDream_images/fichier_travail_dreamweaver/image%20menu%20horizontal/menuitem36_over.gif','AquaDream_images/fichier_travail_dreamweaver/image%20menu%20horizontal/menuitem35_over.gif','AquaDream_images/fichier_travail_dreamweaver/image%20menu%20horizontal/menuitem37_over.gif')">
<div id="ligne"> L'institut de beaut&eacute;, d&eacute;tente et soins bio, de 
  Chaville, Viroflay et S&egrave;vres, pour hommes et Femmes, soins du corps, 
  soins du visage, massages, maquillage, &eacute;pilation, ch&egrave;ques cadeaux,</div>
<div id="header"><!-- #BeginLibraryItem "/Library/Logo Aquamarine.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20logos/logo_institut_aquamarinebeaute.jpg" alt="Logo Aquamarine Chaville" name="LogoAquamarine" width="450" height="124" id="LogoAquamarine"><!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/Coccinelle.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20logos/coccinelle.gif" alt="Cocinelle" name="Coccinelle" width="149" height="125" id="Coccinelle"><!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/705avSalengroChaville.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/705_av_salengro_92370_chaville.png" width="195" height="124"><!-- #EndLibraryItem --></div>
<div id="deroulant">
  <div align="center">La nature n'a pas besoin de produit chimique pour être belle, 
    alors vous non plus !!...</div>
</div>
<div id="gauche"> 
  <h1><!-- #BeginLibraryItem "/Library/Consulter le Livre d'Or.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/consulter_institut_beaute.png" alt="Consulter le livre d'Or" name="ConsulterLivredOr" width="130" height="135" id="ConsulterLivredOr"><!-- #EndLibraryItem --></h1>
  <h1><!-- #BeginLibraryItem "/Library/Offrir un cadeau.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/cadeau_institut_beaut%E9.png" alt="Offrir un Cadeau" name="OffrirCadeaux" width="130" height="182" id="OffrirCadeaux"><!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/Cadeaux d'entreprises.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/cadeaux_soins_institut_entreprises%20.png" alt="Cadeaux d'entreprises" name="CadeauxEntreprise" width="130" height="70" id="CadeauxEntreprise"><!-- #EndLibraryItem --></h1>
  <p>&nbsp;</p>
  <h1><!-- #BeginLibraryItem "/Library/Cadeaux comités d'entreprise.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/cadeaux_soins_institut_comites%20.png" alt="Cadeaux Comit&eacute;s d'entreprise" name="CadeauxComites" width="130" height="90" id="CadeauxComites"><!-- #EndLibraryItem --></h1>
  <p>&nbsp;</p>
  <h1><!-- #BeginLibraryItem "/Library/Promotions Aquamarine.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/promotion_institut.png" alt="Promotions du mois Aquamarine" name="PromotionsAqua" width="130" height="132" id="PromotionsAqua"><!-- #EndLibraryItem --></h1>
  <p>&nbsp;</p>
  <h1><!-- #BeginLibraryItem "/Library/Laissez nous vos impressions.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/laisser_impressions_institut_beaute.png" alt="Laissez-nous vos impressions" name="LaisserImpression" width="130" height="140" id="LaisserImpression"><!-- #EndLibraryItem --></h1>
  <h1><!-- #BeginLibraryItem "/Library/Inscription à la newsletters.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/newsletter_institut_beaute.png" alt="Inscription &agrave; la Newsletters" name="NewsLetters" width="130" height="285" id="NewsLetters"><!-- #EndLibraryItem --></h1>
</div>
<div id="droit"> 
  <h1><!-- #BeginLibraryItem "/Library/Recommander l'Institut.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/recommander_institut_beaute.png" alt="Recommander l'institut" name="RecommanderLinstitut" width="130" height="197" id="RecommanderLinstitut"><!-- #EndLibraryItem --></h1>
  <h1><!-- #BeginLibraryItem "/Library/Contacter l'Institut.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/contacter_institut_beaute.png" alt="Contacter l'Institut Aquamarine Beaut&eacute;" name="ContacterInstitut" width="130" height="136" id="ContacterInstitut"><!-- #EndLibraryItem --></h1>
  <h1><!-- #BeginLibraryItem "/Library/Soins Hommes.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/institut_beaute_hommes_chaville.png" alt="Des soins pour les Hommes aussi" name="SoinsHommes" width="130" height="136" id="SoinsHommes"><!-- #EndLibraryItem --></h1>
  <h1><!-- #BeginLibraryItem "/Library/L'institut à domicile.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/domicile_institut_beaute.png" alt="L'institut &agrave; domicile" name="institutadomicilie" width="130" height="61" id="institutadomicilie"><!-- #EndLibraryItem --></h1>
  <p>&nbsp;</p>
  <h1><!-- #BeginLibraryItem "/Library/Logo Florame.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/logo_florame_chaville.png" alt="Logo Florame" name="LogoFlorame" width="130" height="39" id="LogoFlorame"><!-- #EndLibraryItem --></h1>
  <p>&nbsp;</p>
  <h1><!-- #BeginLibraryItem "/Library/Logo Phyt's.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/logo_phyts_chaville.png" alt="Logo Phyt's" name="logoPhyts" width="130" height="96" id="logoPhyts"><!-- #EndLibraryItem --></h1>
  <p>&nbsp;</p>
  <h1><!-- #BeginLibraryItem "/Library/Logo Couleur Caramel.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/logo_couleur_caramel_chaville.png" alt="Logo Couleur Caramel" name="LogoCouleurCaramel" width="130" height="27" id="LogoCouleurCaramel"><!-- #EndLibraryItem --></h1>
  <p><!-- #BeginLibraryItem "/Library/Logo Cosmebio.lbi" --><img src="AquaDream_images/fichier_travail_dreamweaver/image%20menu/institut_beaute_bio_chaville.png" alt="Logo Cosmebio" name="LogoCosmebio" width="130" height="92" id="LogoCosmebio"><!-- #EndLibraryItem --></p>
  <h1 class="menu">&nbsp;</h1>
</div>
<div id="menu">
<ul class="menu">
    <ul id="menuDeroulant">
      <li> <a href="#">L'Institut</a> 
        <ul class="sousMenu">
          <li><a href="#">valeurs</a></li>
          <li><a href="#">Coordonnées</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Livre d'Or</a></li>
          <li><a href="#">nouveautés</a></li>
        </ul>
      </li>
      <li> <a href="#">Nos soins</a> 
        <ul class="sousMenu">
          <li><a href="#">Soins visage</a></li>
          <li><a href="#">Soins corps</a></li>
          <li><a href="#">Soins ongles</a></li>
          <li><a href="#">Massages</a></li>
          <li><a href="#">Epilations</a></li>
          <li><a href="#">Domicile</a></li>
        </ul>
      </li>
      <li> <a href="#">Nos produits</a> 
        <ul class="sousMenu">
          <li><a href="#">Produits bio</a></li>
          <li><a href="#">Produits visage</a></li>
          <li><a href="#">Produits corps</a></li>
        </ul>
      </li>
      <li> <a href="#">Le maquillage</a> 
        <ul class="sousMenu">
          <li><a href="#">Les prestations</a></li>
          <li><a href="#">Les produits</a></li>
        </ul>
      </li>
      <li> <a href="#">Les Hommes</a> 
        <ul class="sousMenu">
          <li><a href="#">Nos soins</a></li>
          <li><a href="#">Nos produits</a></li>
        </ul>
      </li>
      <li> <a href="#">Les cadeaux</a> 
        <ul class="sousMenu">
          <li><a href="#">Présentations</a></li>
          <li><a href="#">Les idées cadeaux</a></li>
          <li><a href="#">Commander</a></li>
        </ul>
      </li>
      <li> <a href="#">Entreprises</a> 
        <ul class="sousMenu">
          <li><a href="#">Pour les Entreprises</a></li>
          <li><a href="#">Pour les Comités</a></li>
        </ul>
      </li>
      <li> <a href="#">Les prix</a> 
        <ul class="sousMenu">
          <li><a href="#">Les prix1</a></li>
          <li><a href="#">Les prix2</a></li>
        </ul>
      </li>
    </ul>
  </ul>
</div>
<div id="corps"> 
  <h1>&nbsp;</h1>
  <h1>L'institut de beaut&eacute; bio 
    Soins et D&eacute;tente,<br>
    Chaville - S&egrave;vres - Viroflay</h1>
  <h2>&nbsp;</h2>
  <h2>Entrez dans l’univers de 
    la beaut&eacute; Bio et laissez vous porter par vos sens.</h2>
  <p>D&eacute;couvrez tous les bienfaits 
    des plantes et des huiles essentielles au service de votre beaut&eacute; et 
    de votre bien-&ecirc;tre. Parce qu’&ecirc;tre bien dans sa t&ecirc;te, 
    c’est &ecirc;tre bien dans sa &laquo; peau &raquo; ...</p>
  <p>Aquamarine Beaut&eacute; Bio, 
    forte de son exp&eacute;rience depuis 20 ans, passionn&eacute;e, s’emploie 
    &agrave; prodiguer, aussi bien pour les Hommes que pour les Femmes, tous les 
    soins Institut : soins du visage, soins du corps, massages, &eacute;pilations, 
    maquillage sans oublier une richesse de conseils ... dans le respect de l’homme 
    et de la nature.</p>
  <p>Dans un cadre ou seule la &laquo; 
    zen attitude &raquo; &agrave; son code d’entr&eacute;e, vous oubliez 
    votre stress et vous y entrerez pour trouver d&eacute;tente et relaxation</p>
  <p>Vous avez compris que &laquo; Dame Nature &raquo; donne avec douceur et efficacit&eacute;.</p>
  <p>Vous &ecirc;tes sensibles aux gestes d’&eacute;co citoyennet&eacute; ...<br>
    N’attendez plus ... ne cherchez plus ... vous avez trouv&eacute; ...</p>
  <p>Cliquez et d&eacute;couvrez votre salon de beaut&eacute;d&eacute;tente et soins bio Aquamarine Beaut&eacute;</p> 
  <p>proche de V&eacute;lizy, Viroflay, Versailles, S&egrave;vres, Boulogne et Meudon</p>
</div>
<div id="pied">pied</div>
</body></html>

CSS
/* CSS Document */

Code css :

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
#conteneur {
	font-family: "Times New Roman", Times, serif;
	color: #990000;
	background-color: white;
	width: 90%;
	margin-left: 5%;
	border-top: 1px solid #990000;
	border-right: 1px solid #990000;
	border-bottom: 1px solid #990000;
	border-left: 1px solid #990000;
}
#ligne {
  color: white;
  font-family: "Times New Roman",Times,serif;
  background-color: #990000;
  text-align: center;
  height: 20px;
}
#header {
	border-style: none;
	border-color: #990000;
	width: 100%;
	height: 130px;
	background-color: white;
	color: #990000;
	vertical-align: text-top;
 
}
#gauche {
  width: 150px;
  float: left;
  background-color: white;
}
#droit {
  width: 150px;
  float: right;
  background-color: white;
}
#deroulant {
  background-color: white;
  font-family: "Times New Roman", Times, serif;
  color: #990000;
  width: 100%;
  text-align: left;
  border-top-style: solid;
  border-top-color: #990000;
}
#menu {
	background-color: #FFFFFF;
	margin-left: 150px;
	margin-right: 150px;
	height: 80px;
	padding: 0px;
 
 
 
}
#corps {
	margin-right: 150px;
	margin-left: 150px;
	text-align: left;
	font-family: "Times New Roman", Times, serif;
	color: #990000;
	background-color: #FFFFFF;
	background-repeat: repeat;
	padding: 0px;
 
 
}
#pied {
  clear: both;
  height: 60px;
  background-color: #990000;
  color: white;
  font-family: "Times New Roman",Times,serif;
  margin-right: 150px;
  margin-left: 150px;
}
h1 {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	margin-right: 15px;
	margin-left: 15px;
 
 
 
}
h2 {
	margin-top: 0;
	margin-bottom: 0px;
	text-align: center;
	margin-right: 15px;
	margin-left: 15px;
 
 
}
h3 {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 15px;
	margin-left: 15px;
 
}
h4 {
	margin-right: 15px;
	margin-left: 15px;
 
}
p {
	margin-bottom: 0px;
	margin-left: 15px;
	margin-right: 15px;
}
#menuDeroulant
{
	background: #FFFFFF;
	width: 850px;
	height: 15px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li
{
	float: left;
	width: 100px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: auto;
	color: #FFF;
	background: #339900;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
 
}
#menuDeroulant li a:hover { background-color: #990033; }
#menuDeroulant li a:active { background-color: #339900; }
 
#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #990033;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: #FFFFCC;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #FFFF99;
}
 
#menuDeroulant li:hover > .sousMenu { display: block;

**luc92** · 26/12/2008, 22h46

Oups !
Je prend la peine de me relire et de corriger les 15000 fautes en 5 lignes!!!

Je rencontre des difficultés de nature différente selon les résultats de MF ou de IE.

Sous Mozilla :
- le dernier élément de droite du menu se reporte en bas du 1er élément de gauche (il va à la ligne !),
- le corps du texte (qui se situe sous le menu) se déplace vers le droite quand les sous menus sont trop longs

Sous IE:
- le menu se positionne correctement; par contre, il est impossible de sélectionner les sous menus à partir du 3eme élément vers le bas.

Est ce qu'un pro peut m'apporter une précieuse aide. J'ai mis des dizaines d'heures pour arriver à ce résultat et je n'ose plus y toucher de peur de tout perdre.

Pour mieux comprendre mon objectif, j'essaie de refaire ce site avec le moins de javascript possible pour mieux le référencer

Débutant - Menu - resultat différent sur IE et MF

Dreamweaver

Vue hybride

Discussions similaires

Partager

Partager