Positionner le menu en Bas de Page

**elition** · 20/04/2010, 16h45

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

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
<!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

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
#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

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
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

**elition** · 21/04/2010, 17h41

J'ai finalement trouvé, j'ai ajouté ceci :

Code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#position_bas
{ 
width: 100%;
position:absolute;
display: block;
bottom: 0px;
}

Code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="position_bas"> </div>

Cette DIV englobe tout le menu (celui du BAS)

J'ai ensuite testé les Deux menus sur la même page et cela à fonctionner (j'ai changer les noms et voilà, Bon j'étais vraiment désespéré que j'y ai passé toute la nuit et toute cette journée soit plus de 20h... mais j'ai trouvé lol

Positionner le menu en Bas de Page [CSS 2]

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager