Modification du placement du menu par CSS
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 justement ;) mais adapté à mon besoin, que dois-je changer pour le positionner correctement, mes essais ne fonctionnent pas :?
Code:
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;
} |
voici le html (pardon !)
Code:
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> |
Au secours !!! ....je suis perdu :(
Merci d'avance ;)
