Problème d'alignement de menu

**BnA** · 16/08/2006, 09h29

Bonjour!

Voici mon problème: j'ai une page html+css dans laquelle il y a 3 menu:
- un horizontal qui prend toute la largeur de la page (en haut de celle-ci);
- un vertical à gauche;
- et un vertical à droite.

Dans Internet Explorer, une fois n'est pas coutume, ça marche sans souci, alors que sous FF, mon menu de droite se positionne bien à droite, mais en dessous du dernier menu de la gauche.

Bref, un long discours ne servant pas à grand chose sans exemple, voici mes codes html css

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
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
182
183
184
185
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <meta name="Description" content="ELLA - E-Language Learning Academy">
    <meta name="Keywords" content="ELLA, language, langue, idioma, taal, spräche, academy, learning, e-learning, apprentissage, online">
    <meta name="Identifer-URL" content="http://www.ella.be">
    <meta name="Copyright" content="© 2006 ELLA">
    <meta name="Robots" content="All">
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">    
    <link href="style.css" rel="stylesheet" type="text/css">    
    <title>
      ELLA - E-Language Learning Academy
    </title>    
  </head>
  <body>    
    <div id="conteneur">
      <div id="header">       
        Animation FLASH + Formulaire (Flash) de login (+ récup. pswd + recharge tps)
      </div>
      <div id="haut">
        <ul id="menuhaut">
          <li>
          <a href="#">Home</a></li>
          <li>
          <a href="#">About</a></li>
          <li>
          <a href="#">Particuliers</a></li>
          <li>
          <a href="#">Entreprises</a></li>
          <li>
          <a href="#">Education</a></li>
        </ul>
      </div>
      <div id="hautimage">
      Emplacement de l'image
      </div>
 
     <div id="colonnegauche">
 
 
      <div id="gauche">               <!-- Premier menu de gauche -->
        <p>        menu gauche
        </p>
        <ul id="menugauche">
          <li>
          <a href="#">Menu 1</a></li>
          <li>
          <a href="#">Menu 2</a></li>
          <li>
          <a href="#">Menu 3</a></li>
          <li>
          <a href="#">Menu 4</a></li>
        </ul>
      </div>
      <div id="gauche">             <!-- Deuxième menu de gauche -->
        <p>          menu gauche
        </p>
        <p>          largeur: 150px
        </p>
        <ul id="menugauche">
          <li>
          <a href="#">Menu 1</a></li>
          <li>
          <a href="#">Menu 2</a></li>
          <li>
          <a href="#">Menu 3</a></li>
          <li>
          <a href="#">Menu 4</a></li>
        </ul>
      </div>
      </div>
 
      <!-- Si désactivation du menu droite, commenter #centre.margin-right dans style.css-->
      <div id="colonnedroite">
      <div id="droite">               <!-- Premier menu de doite -->
      <p>
      menu droit
      </p>
      <p>
      largeur : 150px
      </p>
      <ul id="menudroit">
      <li>
      <a href="#">Menu 1</a>
      </li>
      <li>
      <a href="#">Menu 2</a>
      </li>
      <li>
      <a href="#">Menu 3</a>
      </li>
      <li>
      <a href="#">Menu 4</a>
      </li>
      </ul>
      </div>
 
 
      <!-- Si désactivation du menu droite, commenter #centre.margin-right dans style.css-->
      <div id="droite">           <!-- Deuxième menu de doite -->
      <p>
      menu droit
      </p>
      <p>
      largeur : 150px
      </p>
      <ul id="menudroit">
      <li>
      <a href="#">Menu 1</a>
      </li>
      <li>
      <a href="#">Menu 2</a>
      </li>
      <li>
      <a href="#">Menu 3</a>
      </li>
      <li>
      <a href="#">Menu 4</a>
      </li>
      </ul>
      </div>
       </div>
 
 
 
      <div id="centre">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer augue. Donec ipsum. Proin imperdiet cursus 
          elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus 
          egestas egestas nunc. In suscipit. Aenean placerat sapien. Duis justo purus, hendrerit vitae, consequat interdum, 
          aliquam vel, eros. In hac habitasse platea dictumst. Proin consectetuer dolor quis urna. Curabitur quam. Fusce 
          in nulla sed magna suscipit pellentesque. Donec tempus tortor non nisi. Nam accumsan sapien ac sapien. Curabitur
          laoreet suscipit sem. Aliquam ultricies magna sed augue. Sed commodo mauris vitae quam. Cras id elit.
        </p>
 
        <p>
          Phasellus vel urna. Pellentesque porta turpis vitae lorem. Praesent suscipit. Nulla lorem orci, adipiscing a, 
          tincidunt ac, accumsan id, leo. In at mi vel enim blandit aliquet. In a diam vel odio consectetuer porta. Donec 
          nisi massa, porta non, convallis ac, hendrerit eu, orci. Donec nisi ipsum, venenatis eget, blandit a, tempus at, 
          libero. Donec ipsum nunc, tempor sed, volutpat eu, fermentum id, sapien. Nullam porttitor enim ut risus faucibus 
          pulvinar. Duis augue ipsum, suscipit nec, semper vitae, malesuada ac, neque. Nunc lacinia nunc in lacus. Morbi nec
          est vitae lacus porta vulputate. Nunc auctor interdum massa. Phasellus non nibh. Suspendisse potenti. Sed 
          scelerisque, tellus ut sodales ullamcorper, nibh lectus lobortis leo, ac mattis elit lectus tincidunt odio. 
          Pellentesque pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
          Suspendisse fringilla tincidunt sem.
        </p>
 
        <p>
          Maecenas eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
          Aliquam luctus. Cras euismod laoreet augue. Vivamus convallis, nulla a varius fringilla, magna magna ornare nunc,
          ac nonummy justo orci ut pede. Nulla at mauris. Nam aliquam suscipit nunc. Aliquam in lacus semper purus laoreet 
          eleifend. Ut luctus ipsum ac leo. Aenean vel diam. Ut sed dui. Donec ut lorem. Quisque placerat porttitor magna. 
          Duis viverra. Vestibulum sagittis malesuada enim. Duis dui libero, laoreet at, fringilla vel, bibendum vel, ipsum. 
        </p>
      </div>
      <div id="centre">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer augue. Donec ipsum. Proin imperdiet cursus 
          elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus 
          egestas egestas nunc. In suscipit. Aenean placerat sapien. Duis justo purus, hendrerit vitae, consequat interdum, 
          aliquam vel, eros. In hac habitasse platea dictumst. Proin consectetuer dolor quis urna. Curabitur quam. Fusce 
          in nulla sed magna suscipit pellentesque. Donec tempus tortor non nisi. Nam accumsan sapien ac sapien. Curabitur
          laoreet suscipit sem. Aliquam ultricies magna sed augue. Sed commodo mauris vitae quam. Cras id elit.
        </p>
 
        <p>
          Phasellus vel urna. Pellentesque porta turpis vitae lorem. Praesent suscipit. Nulla lorem orci, adipiscing a, 
          tincidunt ac, accumsan id, leo. In at mi vel enim blandit aliquet. In a diam vel odio consectetuer porta. Donec 
          nisi massa, porta non, convallis ac, hendrerit eu, orci. Donec nisi ipsum, venenatis eget, blandit a, tempus at, 
          libero. Donec ipsum nunc, tempor sed, volutpat eu, fermentum id, sapien. Nullam porttitor enim ut risus faucibus 
          pulvinar. Duis augue ipsum, suscipit nec, semper vitae, malesuada ac, neque. Nunc lacinia nunc in lacus. Morbi nec
          est vitae lacus porta vulputate. Nunc auctor interdum massa. Phasellus non nibh. Suspendisse potenti. Sed 
          scelerisque, tellus ut sodales ullamcorper, nibh lectus lobortis leo, ac mattis elit lectus tincidunt odio. 
          Pellentesque pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
          Suspendisse fringilla tincidunt sem.
        </p>
      </div>
      <div id="pied">
        JOBS - VIE PRIVEE - CONDITIONS GENERALES DE VENTE - PREREQUIS MATERIELS - CONTACTEZ-NOUS - PLAN DU SITE - COPYRIGHT
      </div>
        <h5>&copy; 2006 - l.tribolet[at]gmail[dot]com pour Ella.be</h5>
    </div>    
  </body>
</html>

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
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
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color:#eee;
margin-top:15px;
margin-bottom:15px;
padding: 0px;
text-align:center;
 
}
 
b{
border-bottom:1px dotted black;
}
 
p {
margin: 0 0 10px 0;
}
 
h5 {
font-family:verdana;
font-size: 8pt;
color:black;
padding-bottom:5px;
font-weight:lighter;
 
}
 
#header {
height:100px;
background-color: #fff;
margin-bottom:15px;
border:1px dotted black;
}
 
#haut {
height: 30px;
background-color:#fff;
 
border:1px dotted black;
}
 
#hautimage {
height: 80px;
background-color:#fff;
margin-bottom:15px;
border:1px dotted black;
border-top:none;
}
 
#conteneur {
margin-left: auto;
margin-right: auto;
width: 1008px;
background-color:#fff;
text-align:center;
 
}
 
#centre {
background-color:#fff;
margin-left: 165px;       /*largeur du menu gauche (150px) + 15px de margin */
margin-bottom:15px;
border:1px dotted black;
text-align:justify;
padding:10px;
margin-right: 165px;      /* à mettre en commentaire si menu droite désactivé */
}
 
#colonnegauche{
float:left;
width:150px;
clear:both;
}
 
#colonnedroite{
float:right;
width:150px;
clear:both
}
 
#gauche {
float:left;
width: 150px;
background-color:#fff;
margin-right:15px;
margin-bottom:15px;
clear:both;
border:1px dotted black;
}
 
#droite {
 
float:right;
width: 150px;
border:1px dotted black;
background-color:#fff;
margin-left:15px;
margin-bottom:15px;
 
}
 
#pied {
clear:both;
height:20px;
background-color: #fff;
margin-top:15px;
margin-bottom:15px;
border:1px dotted black;
 
}
 
#menuhaut {
position:relative;
list-style-type: none;
margin: auto;
padding:0;
background-color:#fff;
width:50%;
}
 
#menuhaut li {
display: inline;
}
 
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
 
#menuhaut a:hover {
text-decoration: none;
}
 
#menugauche {
list-style-type: none;
margin: 15px;
padding:0;
background-color:#fff;
}
 
#menugauche li {
margin-bottom: 5px;
}
 
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
 
#menugauche a:hover {
text-decoration: none;
}
 
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}
 
/* CSS Document */

Voilà. Si vous arrivez à régler le problème, ça m'enlèverai une vilaine (et grosse) épine du pied!!

Merci d'avance!

**<romain/>** · 16/08/2006, 11h37

Ca ca vient surement du "modèle en boite de microsof".

A l'avenir je te conseille de faire un site pour firefox (ou tout autre navigateur respectueux des standards) et ensuite de faire en sorte que ca marche sous IE et non l'inverse sinon tu auras toujours ce genre de déconvenu. ils y apas mal de chose qui sont mal géré par IE.

**BnA** · 16/08/2006, 11h47

A la base je développe mon site sous FireFox, mais étant donné qu'il s'agit d'un site commercial, j'ai du vérifier sous IE.

Au départ, j'avais un problème avec IE et en voulant le régler, il a disparu, mais un autre problème est apparu sous FF...

Je viens de lire "Gérer les modèles de boîtes CSS standard et Microsoft", mais ça ne résoud pas mon problème. Mon problème n'est pas un problème de taille des boxes, mais plus un problème de positionnement...

**sedryk** · 16/08/2006, 16h20

Hello BnA,

A priori, dans tes css les clear: both; sur colonnegauche et colonnedroite entraine ton problème.

A noter que je te conseille aussi de retirer dans #droite et #gauche respectivement margin-left: 15px; et margin-right:15px; vu que les float et la taille fixe de #centre mettent en place cette marge. Cela permet aussi à ta page de s'afficher correctement sous Opéra

Sinon, un petit détail, même si ca ne provoque pas d'erreur, il est de bon ton de ne pas donner le même id à plusieurs éléments dans une page.

**BnA** · 16/08/2006, 16h33

Merci, ça m'avance bien, mais ça ne règle pas tout à fait mon problème.

En fait, sur ma page, il faut que j'aille la possibilité "d'empiler" différents menus, aussi bien à gauche qu'à droite (une sorte de modules, en quelque sorte).

C'est pour cela que j'ai utilisé plusieurs fois les mêmes DIV. Mais si tu as une solution plus adaptée, je suis preneur!

Salut!

**sedryk** · 17/08/2006, 09h18

BnA,

Quand j'ai repris ton code, je me suis contenter de remplacer tes id par des classes et ça marche aussi bien

Problème d'alignement de menu

HTML

Vue hybride

Discussions similaires

Partager

Partager