Bonjour,
Je débute en programmation html et suis confronté à 2 problèmes que je n'arrive pas à résoudre.
1) Mon menu déroulant vertical m'affiche en permanence le dernier sous-menu (Contact).
2) Certaines cases de mon menu verticale nécessitent un élargissement en hauteur afin de faire tenir le texte... hors les proportions sont les mêmes pour toutes les cases... de ce fait une partie de mon texte est masqué... et je ne souhaite pas l'élargir en longueur ("maintenance & navigabilité", "manuel des procédures associées", "Notes de service et d'information").
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 <dl id="menu" name="menu"> <dt class="Style14" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">Agréments</dt> <dt class="Style14" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Qualité</dt> <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> <ul> <li><a href="#">Documents</a></li> <li><a href="#">Formulaires</a></li> <li><a href="#">Ponctualité</a></li> <li><a href="#">Statistiques d'audits</a></li> <li><a href="#">Flash Qualité</a></li> <li><a href="#">Bulletins de Sécurité des vols</a></li> <li><a href="#">Répertoire Documentaire Compagnie</a></li> </ul> </dd> <dt class="Style14" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Maintenance & Navigabilité</dt> <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> <ul> <li><a href="#">Documents</a></li> <li><a href="#">Aircraft Data Sheet</a></li> <li><a href="#">Production</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Engineering</a></li> <li><a href="#">Interior</a></li> </ul> </dd> <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Manuel des Procédures Associées </dt> <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> <ul> <li><a href="#">Direction Générale</a></li> <li><a href="#">Qualité</a></li> <li><a href="#">Maintenance</a></li> <li><a href="#">Gestion de Navigabilité</a></li> <li><a href="#">Opérations</a></li> <li><a href="#">Escales</a></li> <li><a href="#">Bureau d'Etudes</a></li> </ul> </dd> <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">Notes de Service & d'information </dt> <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"> <ul> <li><a href="#">Direction Générale</a></li> <li><a href="#">Qualité</a></li> <li><a href="#">Direction Ressources Humaines</a></li> <li><a href="#">Direction Opérations Aériennes</a></li> <li><a href="#">Direction Opérations Sol</a></li> <li><a href="#">Officier Sécurité des Vols</a></li> <li><a href="#">P.N.C</a></li> <li><a href="#">Resp. Désigné Entretien</a></li> <li><a href="#">Resp. Entretien en Ligne</a></li> <li><a href="#">Bureau Technique</a></li> <li><a href="#">P.C.T</a></li> <li><a href="#">Logistique</a></li> <li><a href="#">Bureau d'Etudes</a></li> <li><a href="#">Escales</a></li> </ul> </dd> <dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">Opérations Aériennes </dt> <dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">Opérations Sol </dt> <dt onmouseover="javascript:montre('smenu8');" onmouseout="javascript:montre();">Escales</dt> <dt onmouseover="javascript:montre('smenu9');" onmouseout="javascript:montre();">Divers</dt> <dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">Organigrammes</dt> <dd id="smenu10" onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();"> <ul> <li><a href="#">Compagnie</a></li> <li><a href="#">Qualité</a></li> <li><a href="#">Maintenance & Gestion Nav</a></li> <li><a href="#">Opérations Aériennes</a></li> <li><a href="#">Opérations Sol</a></li> </ul> </dd> <dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">Contact</dt> <dd id="smenu11" onmouseover="javascript:montre(smenu11)" onmouseout="javascript:montre();"> <ul> <li><a href="#">Personnel Sol</a></li> <li><a href="#">P.N.T.</a></li> </ul> </dd> </dl>
Je bloque sur ces points
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 body { padding:0px; margin:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #003366; line-height: 16px; text-decoration: none; background-color: #c0dffd; background-image: url(mm_arrow.gif); background-repeat: no-repeat; background-position: 14px 45%; letter-spacing: 0.1em; display: block; font-weight: normal; } dl, dt, dd, ul, li { margin: 0; list-style-type: none; list-style-position: outside; padding-top: 8; padding-right: 6; padding-bottom: 10; padding-left: 26; } #menu { position: absolute; top: 171px; left: 0px; width: 198px; background-color: #c0dffd; } #menu dt { cursor: pointer; height: 35px; line-height: 35px; text-align: left; font-weight: normal; margin-top: 2px; margin-right: 0; margin-bottom: 2px; margin-left: 0; letter-spacing: 0.1em; background-image: url(mm_arrow.gif); background-repeat: no-repeat; background-position: 14px 45%; text-indent: 25px; padding: 0px; float: Aucune; background-color: #e6f3ff; } #menu dt:hover { text-transform: none; color: #FF6600; background:#ffffff; text-decoration: none; background-image: url(mm_arrow.gif); background-repeat: no-repeat; background-position: 14px 45%; font-size: 11px; } #menu dd { position: absolute; z-index: 100; left: 8em; margin-top: -1.4em; width: 250px; background: #e6f3ff; border: 1px solid gray; } #menu ul { padding: 2px; } #menu li { text-align: left; font-size: 11px; height: 18px; line-height: 18px; font-weight: normal; } #menu li a, #menu dt a { color: #003366; text-decoration: none; display: block; font-size: 11px; } #menu li a:hover { text-transform: none; color: #FF6600; background:#ffffff; text-decoration: underline; font-size: 11px; } #mentions { font-family: verdana, arial, sans-serif; position: absolute; bottom : 200px; left : 10px; color: #000; background-color: #ddd; } #mentions a {text-decoration: none; color: #222; } #mentions a:hover{text-decoration: underline; } </style>
Merci pour vos conseils et votre aide.
Partager