Bonjour j'utilise un menu déroulant mis en forme en CSS mais je n'arrive pas à le modifier pour qu'il réponde à ceci :
Le menu doit rester sur une seule ligne horizontale prenant les 3/4 gauche de la page (cela doit fonctionner en 800 ou en 1024 !!) uniquement sur IE 5.5 et 6 (hélas, pas de firefox...). (Pour info le dernier 1/4 sera utilisé par autre chose...)
Voici le css issu d'ici justementmais adapté à mon besoin, que dois-je changer pour le positionner correctement, mes essais ne fonctionnent pas
![]()
voici le html (pardon !)
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 * { /* ça veut dire quoi cette étoile ? */ margin:0px; padding:0px; } /*moi je voudrais calé à gauche !!!! pas centré ! :( */ #centrer { margin-left:0; margin-right:auto; width:980px; } /****************************/ /* début menu déroulant */ /****************************/ ul, li { list-style-type:none; } /*chaque sous-menu*/ #menu ul li { position:relative; display:inline; float:right; width:150px; cursor:pointer; display:block; background:none; height:22px; color:white; background-color:#3366cc; background-image:url(../img/img_new/coin.png); background-repeat:no-repeat; font-variant: small-caps; text-align:center; } /*carré déroulant sous un sous-menu niveau 1*/ #menu ul li ul { display:none; position:absolute; width:125px; border:1px solid #dddddd; border-top:none; top:22px; left:0; } #menu ul li ul li { height:100%; text-align:left; } #menu ul li ul li a { font-size:14px; font-weight:normal; display:block; height:100%; border-top:1px solid #dddddd; text-decoration:none; } /*au passage de la souris on inverse les couleurs de la case*/ #menu ul li ul li a:hover { color:#ffffff; } #smenu1 li a:hover { background:#f8dce8; } #smenu1 li a { color:white; background-color:#df9dc4; } #smenu2 li a:hover { background:#b4ad70; } #smenu2 li a { color:white; background-color:#a19a55; } #smenu3 li a:hover { background:#f47e8f; } #smenu3 li a { color:white; background-color:#f16075; } #smenu4 li a:hover { background:#8bb58b; } #smenu4 li a { color:white; background-color:#76a674; }
Au secours !!! ....je suis perdu
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <head> <title>Menu horizontal déroulant</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="css/menu_der.css" type="text/css" /> <script type="text/javascript" src="js/menu_der.js"></script> </head> <body> <div id="centrer"> <div id="menu"> <ul> <li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);">Nos activités <ul id="smenu4"> <li><a href="budget.php">Budget</a></li> <li><a href="camping.php">Camping</a></li> <li><a href="cerebral.php">Cérébral club</a></li> <li><a href="chasse.php">Chasse</a></li> <li><a href="cinema.php">Chèques cinéma</a></li> <li><a href="culture.php">Culture</a></li> <li><a href="dessins.php">Dessins de Noël</a></li> <li><a href="enfants.php">Enfants</a></li> <li><a href="fete_meres.php">Fête des mères</a></li> <li><a href="fin_annee.php">Fêtes fin d'année</a></li> <li><a href="participation.php">Part. financière</a></li> <li><a href="prets.php">Prêts</a></li> <li><a href="section_autonome.php">Section autonome</a></li> <li><a href="serrechevalier.php">Serre chevalier</a></li> <li><a href="socios.php">Socios</a></li> <li><a href="soirees.php">Soirées</a></li> <li><a href="sporting.php">Sporting club</a></li> <li><a href="vac_ete.php">Vacances d'été</a></li> <li><a href="vac_hiver.php">Vacances d'hiver</a></li> <li><a href="weekend">Week ends</a></li> </ul> </li> <li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);">Les formulaires <ul id="smenu3"> <li><a href="sports.php">Les sports</a></li> <li><a href="creche.php">La crêche</a></li> <li><a href="balneo.php">La balnéothérapie</a></li> <li><a href="#">Les enfants</a></li> <li><a href="#">Les prêts</a></li> </ul> </li> <li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);">Les offres <ul id="smenu2"> <li><a href="partenaires.php">Nos partenaires</a></li> <li><a href="billetterie.php">La billetterie</a></li> <li><a href="annonces.php">Vos annonces</a></li> </ul> </li> <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);">Découvrir le CE <ul id="smenu1"> <li><a href="role.php">Le rôle du CE</a></li> <li><a href="specificites.php">Ses spécificités</a></li> <li><a href="elections.php">Les élections</a></li> <li><a href="seances.php">Séances plénières</a></li> <li><a href="equipe.php">Notre équipde</a></li> </ul> </li> </ul> </div> </div> <div align="left"></div> </body> </html>![]()
Merci d'avance![]()
Partager