Menu déroulant, position

**nicou_doude** · 14/04/2008, 19h11

Bonjour,

J'essaie de raliser un site internet, mais j'ai qq problèmes avec la mise en page.

Sous Firefox :

- mon menu n'est pas centré (contrairement à IE)
- Lorsque un mênu se déroule, tout le reste de la page descend

Sous IE :

- les sous-menu ne se déroule pas

J'ai mis en image les résultats. Voici mon code :

CSS :

Celle du menu :

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
body {
    font: 0.7em verdana, sans-serif; /*11px*/
    margin: 0;
    padding: 0;
}
 
#menuDeroulant {
    width: 750px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
 
#menuDeroulant li {
    float: left;
    width: 150px;
    margin: 0;
    padding: 0;
    border: 0;
}
 
#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: 149px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
}
 
#menuDeroulant li a:link, #menuDeroulant li a:visited {
    display: block;
    height: auto;
    color: #FFFFFF;
    background: #3B4E77; /* Couleur de fond des menus principaux  */
    margin: 0;
    padding: 4px 8px;
    border-right: 1px solid #fff;
    text-decoration: none;
}
 
#menuDeroulant li a:hover {
    background-color: #2E46F2;
}
 
#menuDeroulant li a:active {
    background-color: #5F879D;
}
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited {
    display: block;
    color: #FFF;
    margin: 0;
    border: 0;
    text-decoration: none;
}
 
#menuDeroulant .sousMenu li a:hover {
    background-image: none;
    background-color: #2E46F2;
}
 
#menuDeroulant li:hover > .sousMenu {
    display: block;
}

et celle des autres pages :

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
/* CSS Document */
body {
    font-family: Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;  
    text-align:center;  
    background-color:#8399d6;
}
 
/* Zone de placement */
.page {
    width: 600px;   
    margin-left:auto;   
    margin-right:auto;   
    position: relative;      
}
 
.titre {
    width: 800px;  
    height: 160px;  
    text-align:center;  
    background-image : url(images/PageTitre.png) ;
}
 
.menuZone {
    width:800px;  
    height:50px;  
    text-align:center;  
    background-image : url(images/MenuZone.png) ;  
    position: relative;
}
 
.corps {
    width: 800px;   
    text-align:center;  
    background-image : url(images/page_corps.png) ;
}
 
.contenuHaut{
    width: 600x;  
    height:60px;  
    text-align:center;  
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 1.4em;
    color : #0000FF;
    background-image : url(images/ContenuHaut.png) ;
    background-repeat : no-repeat;
    padding-top : 15px;
}
 
.contenuCorps{
    width: 600x;  
    text-align:left;    
    background-image : url(images/ContenuCorps.png) ;
    padding-left : 10px;
    padding-right : 10px;
}
 
.contenuBas{
    width: 600x;
    height:50px;  
    background-image : url(images/ContenuBas.png) ;
    background-repeat : no-repeat;
}    
 
.finPage {
    width:800px;  
    height:50px;  
    background-image : url(images/page_corps.png) ;  
    float:left;
}
 
.imageCentre{
    text-align:center;
}
 
.copyright {
    width:600px;  
    height:50px;  
    text-align:center;  
    font-size:12px;  
    font-style:italic;  
    background-image : url(images/page_bas.png);  
    background-repeat: no-repeat;
}
 
#infoHaut {
    width : 180px;   
    height : 30px;   
    background-image : url(images/InfoHaut.png);
}
 
#infoMilieu {
    width : 180px;   
    background-image : url(images/InfoMilieu.png);
}
 
#infoBas {
    width : 180px;  
    height : 10px;   
    background-image : url(images/InfoBas.png);
    background-repeat : no-repeat;
    margin-bottom : 15px;
}
 
/* TEXTE */
#infoTitre {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 1.1em;
    color : #0000FF;
    text-align : center;
    padding-top : 5px;
}
 
#infoDate {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 1.0em;
    color : #0000FF;
    padding-left : 10px;
    padding-top : 5px;
    padding-bottom : 5px;
    text-align : left;
}
 
#infoTexte {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 0.8em;
    color : #0000FF;
    padding-left : 15px;
    text-align : left;
}
 
#infoVisite {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 0.8em;
    color : #0000FF;
    padding-top : 15px;
    padding-bottom : 5px;
    text-align : center;
}
 
#contenuTexte {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 0.8em;
    color : #000000;
}
 
td {
    vertical-align : top;
}

Et les pages :

Celle qui inclus le menu :

Code html :

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

1
2
3
4
5
 
<body>     
    <div class = "titre"></div>
    <div class="menuZone"><?php include("EssaiMenu.php");?></div>
</body>

et celle qui inclu l'entete :

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
<body>
<table border=0 align=center cellpadding=0 cellspacing=0>
    <tr>
        <td><?php include("entete.php");?></td>
    </tr>
    <tr>
        <td height=5>&nbsp;</td>
    </tr>
    <tr>
        <td><?php include("Corps.php");?></td>
</table>
 
 
</body>

Qqun a-t-il une idée de ce qui ne peux pas fonctionner ?

Merci d'avance pour votre aide précieuse

**blueice** · 15/04/2008, 08h42

Tu ne donnes pas le code de ton menu...

**pierre24** · 15/04/2008, 09h42

Une solution pour que lors du déroulement de ton menu, le reste de la page ne se décale pas :

met la propriété z-index = 1 dans le CSS de ton menu.

**mLk92** · 15/04/2008, 10h31

Pourquoi un margin 0 ?

Pour bien centrer il te faut une taille et marge de gauche et droite en auto

**nicou_doude** · 15/04/2008, 11h21

Voici le code du menu :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Menu</title>
  <link rel="stylesheet" href="CSSMenu.css">
</head>
 
<body>
<ul id="menuDeroulant">
<li>
<a href="index.php?page=Accueil.php">Accueil</a>
</li>
<li>
<a href="#">Le club</a>
<ul class="sousMenu">
<li><a href="index.php?page=Historique.php">Historique</a></li>
<li><a href="index.php?page=Organisation.php">Organisation</a></li>
<li><a href="index.php?page=EcoleSki.php">Ecole de Ski</a></li>
<li><a href="index.php?page=Tarifs.php">Tarifs</a></li>
<li><a href="index.php?page=Moniteurs.php">Moniteurs</a></li>
<li><a href="index.php?page=Agenda.php">Agenda</a></li>
</ul>
</li>
<li>
<a href="#">Inscriptions</a>
<ul class="sousMenu">
<li><a href="#">Club</a></li>
<li><a href="#">Chamonix</a></li>
</ul>
</li>
<li>
<a href="index.php?page=Contact.php">Contact</a>
</li>
<li>
<a href="index.php?page=Administration.php">Administration</a>
</li>
</ul>
 
 
</body>
</html>

Encore merci pour votre aide

**pierre24** · 15/04/2008, 12h02

ton id menuDeroulant devrait ressembler à cela au niveau du positionnement :

Code :

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

1
2
3
4
5
6
7
8
9
 
 
menuDeroulant{
 
position :absolute;
z-index : 1;
top: //ta position;
left: //ta position;
}

Voici une solution;

**nicou_doude** · 21/04/2008, 21h21

Maintenant cela marche avec Firefox, mais pas avec IE.
Les sous-emnus ne se déroulent pas.

Qqun a-t-il une idée ?

Encore merci

**No3l_tek** · 22/04/2008, 08h33

Personnellement ne cherche pas à développer sous IE6.

Prends IE7 et FF il suffit de regarder statistiques sur l'utilisation des browsers en espérant que IE disparaisse ou se mette à suivre FF, c'est mieux pour les développeurs.

voici un lien vers un topic :

ICI

J'ai adapté pour IE7 et FF. De toute manière IE6 gère mal le CSS2.
Bonne chance.

**nicou_doude** · 23/04/2008, 08h16

Merci.

Le problème est que le site existe déjà et là je le reprend.
De ce que j'ai pu voir, il y a pas mal de visite depuis IE, donc je nepeux laisser tomber ce navigateur.

C'est vraiment pénible ces différences entre navigateurs !!

A noter que tout fonctionne très bien avec FF (menu centré, déroulant ...)
Sous IE, le menu est aux fraises et ne se déroule pas.
Je peux s'il le faut poster le code modifié entre temps

**Er3van** · 23/04/2008, 11h36

Envoyé par No3l_tek

Personnellement ne cherche pas à développer sous IE6.

Prends IE7 et FF il suffit de regarder statistiques sur l'utilisation des browsers en espérant que IE disparaisse ou se mette à suivre FF, c'est mieux pour les développeurs.

Heu, j'suis pas vraiment d'accord.
Ne serait-ce que par principe, ce n'est pas à l'outil de s'adapter au développeur, mais au développeur de s'adapter à l'outil.
Ensuite, il y a bcp d'entreprise qui sont restreintes à l'utilisation d'IE6 ( sans même parler de l'utilisateur lambda qui a acheté son Vista/Xp est qui ne sait même pas ce qu'est un navigateur, et qui n'installera jamais FF, Safari ou Opera)

Après, moi j'aurais tendance à penser qu'IE6 est plus rigoureux que Mozilla qui est plus arangeant, c'est pas forcément une bonne idée de développer directement sur Mozilla, puisque certaines erreurs passent à travers. Et à la fin pour essayer de rectifier toutes les petites erreurs....

D'une manière générale, y a pas de raisons pour que MSIE change de façon de faire. Leur logiciel marche, IE7 est au point et sans doute mieux que la version 2.0 de FF qui a des fuites de mémoires énormes.

Et, pour limiter les différences entre navigateurs, développer en XHTML est une première méthode efficace.

Menu déroulant, position

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager