Discussion :

[nicou_doude]

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