Bonjour tout le monde, Je voudrais Mettre 2 menus sur mon site Web :
Un en en-tête, et Un autre en Pied de page.
J'ai réussi a faire celui en en-tête, mais je n'arrive pas a positionner le deuxième en Pied de page.
Je vous fourni tous les codes et les images utilisées.
Voici le Code HTML
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Exemple Menu 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="style.css" title="default" media="screen" />
</head>
<body>
<div id="droplineMenu">
<ul id="menuOuter">
<li class="lv1-li">
<ul>
<li class="current"><a href="#url"><b>Menu 1</b></a></li>
<li><a href="#url"><b>Menu 2</b></a>
<div><b></b>
<ul>
<li><a href="#url">Sous-Menu 1</a></li>
<li><a href="#url">Sous-Menu 2</a></li>
<li><a href="#url">Sous-Menu 3</a></li>
<li><a href="#url">Sous-Menu 4</a></li>
<li><a href="#url">Sous-Menu 5</a></li>
<li><a class="last" href="#url">Sous-Menu 6</a></li>
</ul>
</div>
</li>
<li><a href="#url"><b>Menu 3</b></a>
<div><b></b>
<ul>
<li><a href="#url">Sous-Menu 1</a></li>
<li><a href="#url">Sous-Menu 2</a></li>
<li><a href="#url">Sous-Menu 3</a></li>
<li><a href="#url">Sous-Menu 4</a></li>
<li><a class="last" href="#url">Sous-Menu 5</a></li>
</ul>
</div>
</li>
<li><a href="#url"><b>Menu 4</b></a>
<div><b></b>
<ul>
<li><a href="#url">Sous-Menu 1</a></li>
<li><a href="#url">Sous-Menu 2</a></li>
<li><a href="#url">Sous-Menu 3</a></li>
<li><a class="last" href="#url">Sous-Menu 4</a></li>
</ul>
</div>
</li>
<li><a href="#url"><b>Menu 5</b></a>
<div><b></b>
<ul class="right">
<li><a href="#url">Sous-Menu 1</a></li>
<li><a href="#url">Sous-Menu 2</a></li>
<li><a href="#url">Sous-Menu 3</a></li>
<li><a href="#url">Sous-Menu 4</a></li>
<li><a class="last" href="#url">Sous-Menu 5</a></li>
</ul>
</div>
</li>
<li><a href="#url"><b>Menu 6</b></a>
<div><b></b>
<ul class="right">
<li><a href="#url">Sous-Menu 1</a></li>
<li><a href="#url">Sous-Menu 2</a></li>
<li><a href="#url">Sous-Menu 3</a></li>
<li><a href="#url">Sous-Menu 4</a></li>
<li><a class="last" href="#url">Sous-Menu 5</a></li>
</ul>
</div>
</li>
<li><a href="#url"><b>Menu 7</b></a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> |
Code utilisé pour le menu Haut
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
| #droplineMenu {height:66px; background:url(background.gif); position:relative; text-align:center; width:100%; margin:0 auto; z-index:100;}
#droplineMenu ul {padding:0; margin:0; list-style:none;}
#droplineMenu table {border-collapse:collapse; width:0; height:0; margin-top:-1px;}
#droplineMenu ul ul li {float:left;}
#droplineMenu ul ul li a {display:block; float:left;}
#droplineMenu ul ul div {position:absolute; left:-9999px;}
#droplineMenu ul ul div b {display:block; width:100%; height:40px; position:absolute; left:0; top:0; background:#006789; z-index:-1; filter: alpha(opacity=60); opacity:0.55;}
#droplineMenu ul#menuOuter {display:inline-block;}
#droplineMenu ul#menuOuter li.lv1-li {display:inline-block; display:inline; height:66px;}
#droplineMenu ul ul li a {height:66px; line-height:66px; padding:0 20px 0 0; font-size:14px; font-family: tahoma, sans-serif; color:#fff; text-decoration:none; text-transform:uppercase;} /* uppercase = texte en MAJUSCULE */
#droplineMenu ul ul li a b {display:block; height:66px; float:left; padding:0 0 0 20px; font-weight:normal; cursor:pointer;}
#droplineMenu ul ul li a:hover {background:url(tab.gif) right top; line-height:60px;}
#droplineMenu ul ul li a:hover b {color:#fc0; background:url(tab.gif) left top; line-height:60px;}
#droplineMenu ul ul li:hover > a {background:url(tab.gif) right top; line-height:60px;}
#droplineMenu ul ul li:hover > a b {color:#fc0; background:url(tab.gif) left top; line-height:60px;}
#droplineMenu ul ul li.current a {background:url(tab.gif) right top; line-height:60px;}
#droplineMenu ul ul li.current a b {color:#fc0; background:url(tab.gif) left top; line-height:60px;}
#droplineMenu ul ul li.current div {left:0; top:66px; width:100%; text-align:center;}
#droplineMenu ul ul :hover div {left:0; top:66px; width:100%; text-align:center;}
#droplineMenu ul ul li div ul {display:inline-block;}
#droplineMenu ul ul li div ul li {display:inline-block; display:inline;}
#droplineMenu ul ul li div ul li a {height:40px; line-height:40px; font-size:12px; padding:0 20px;}
#droplineMenu ul ul li div ul li a:hover {background-image:none; color:#fc0; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover {direction:ltr;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div {left:-9999px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div {left:-9999px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover div {left:0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover div {left:0;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current a {background-image:none; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current a b {background-image:none; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a {background-image:none; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a b {background-image:none; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover a {background:url(tab.gif) right top; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover a b {color:#fc0; background:url(tab.gif) left top; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover {background:url(tab.gif) right top; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover b {color:#fc0; background:url(tab.gif) left top; line-height:60px;}
#droplineMenu ul ul li.current div ul li a {background-image:none; color:#fff; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover ul li a {background-image:none; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover ul li a {background-image:none; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div ul li.current_sub a {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div ul li a:hover {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div ul li.current_sub a {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div ul li a:hover {color:#fc0;}
#droplineMenu ul ul li.current div ul li.current_sub a {background-image:none; color:#fc0; line-height:40px;}
#droplineMenu ul ul li.current div ul li.current_sub a:hover {background-image:none; line-height:40px;}
#menuOuter ul li :first-letter {color:#fc0;} |
----------------------------------------------------------------------
Et le code pour le Menu du Bas
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
| body
{
padding-top: 100px;
}
#droplineMenu {height:66px; background:url(background2.gif); position:relative; text-align:center; width:100%; margin:0 auto; z-index:100;}
#droplineMenu ul {padding:0; margin:0; list-style:none;}
#droplineMenu table {border-collapse:collapse; width:0; height:0; margin-top:-1px;}
#droplineMenu ul ul li {float:left;}
#droplineMenu ul ul li a {display:block; float:left;}
#droplineMenu ul ul div {position:absolute; left:-9999px;}
#droplineMenu ul ul div b {display:block; width:100%; height:40px; position:absolute; left:0; top:0; background:#006789; z-index:-1; filter: alpha(opacity=60); opacity:0.55;}
#droplineMenu ul#menuOuter {display:inline-block;}
#droplineMenu ul#menuOuter li.lv1-li {display:inline-block; display:inline; height:66px;}
#droplineMenu ul ul li a {height:66px; line-height:66px; padding:0 20px 0 0; font-size:14px; font-family: tahoma, sans-serif; color:#fff; text-decoration:none; text-transform:uppercase;} /* uppercase = texte en MAJUSCULE */
#droplineMenu ul ul li a b {display:block; height:66px; float:left; padding:0 0 0 20px; font-weight:normal; cursor:pointer;}
#droplineMenu ul ul li a:hover {background:url(tab2.gif) right top; line-height:60px;}
#droplineMenu ul ul li a:hover b {color:#fc0; background:url(tab2.gif) left top; line-height:60px;}
#droplineMenu ul ul li:hover > a {background:url(tab2.gif) right top; line-height:60px;}
#droplineMenu ul ul li:hover > a b {color:#fc0; background:url(tab2.gif) left top; line-height:60px;}
#droplineMenu ul ul li.current a {background:url(tab2.gif) right top; line-height:60px;}
#droplineMenu ul ul li.current a b {color:#fc0; background:url(tab2.gif) left top; line-height:60px;}
#droplineMenu ul ul li.current div {left:0; top:66px; width:100%; text-align:center;}
#droplineMenu ul ul :hover div {left:0; top:-40px; width:100%; text-align:center;}
#droplineMenu ul ul li div ul {display:inline-block;}
#droplineMenu ul ul li div ul li {display:inline-block; display:inline;}
#droplineMenu ul ul li div ul li a {height:40px; line-height:40px; font-size:12px; padding:0 20px;}
#droplineMenu ul ul li div ul li a:hover {background-image:none; color:#fc0; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover {direction:ltr;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div {left:-9999px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div {left:-9999px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover div {left:0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover div {left:0;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current a {background-image:none; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current a b {background-image:none; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a {background-image:none; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a b {background-image:none; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover a {background:url(tab2.gif) right top; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover a b {color:#fc0; background:url(tab2.gif) left top; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover {background:url(tab2.gif) right top; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover b {color:#fc0; background:url(tab2.gif) left top; line-height:60px;}
#droplineMenu ul ul li.current div ul li a {background-image:none; color:#fff; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover ul li a {background-image:none; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover ul li a {background-image:none; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div ul li.current_sub a {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div ul li a:hover {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div ul li.current_sub a {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div ul li a:hover {color:#fc0;}
#droplineMenu ul ul li.current div ul li.current_sub a {background-image:none; color:#fc0; line-height:40px;}
#droplineMenu ul ul li.current div ul li.current_sub a:hover {background-image:none; line-height:40px;}
#menuOuter ul li :first-letter {color:#fc0;} |
----------------------------------------------------------------------
Bon, la je vous ai donné les code pour faire ca sur 2 page Différente, mais il me suffira juste a modifier le ID pour avoir les 2 menus sur la même page.
Donc je me suis renseigné, il faudrait que j'utilise Bottom dans le CSS, mais j'ai tout essayé, je n'arrive pas à positionner mon Deuxième menu en bas de page...
Je vous serez très reconnaissant si vous pouviez me dire quelle(s) ligne(s) de code je dois modifier.
EDIT: j'ai modifié le code car il y avait une erreur (ligne 30) pour le menu 2
Positionner le menu en Bas de Page
Répondre avec citation
Partager