Menu déroulant horizontal sous la bannière

**crissud** · 26/05/2010, 22h12

Bonjour,

Je cherche depuis un petit moment, je fais un site d'un club.
j'ai améliorer en faisant un menu déroulant horizontal
mais il se trouve en haut de ma page et je n'arrive pas à trouver comment le mettre juste en bas de la bannière.

Alors une petite aide de votre part

Code html :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr" >
<head>
	<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
	<title>Association Sportive  Badminton</title>
	<meta http-equiv="content-style-type" content="text/css">
	<meta name="generator" content="">
 
 
		<link rel="stylesheet" type="text/css" href="../_frame/menu01.css" title="default" media="screen"></head>
	<style type="text/css" media="print">
		.wg-maxheight {}
	</style>
	<style type="text/css" media="screen">
		.wg-maxheight { height:100%; }
	</style>
</head>
<body>
	<div id="menu">
	<table bgcolor="#F3FFED" class="wg-maxheight" border="0" cellspacing="0" cellpadding="0" width="100%">
			<!--BANNER-->
			<tr>
				<td align="center" valign="top" style="height:1px" bgcolor="#FFCC66">
					<a href="../acceuil/index.html"><img src="../_frame/bnr.png" border="0" alt=""></a>
 
				</td>
			</tr>
 
	</table>
	</div>
	<ul id="menuDeroulant">
		<li>
			<a href="../acceuil/index.html">Accueil</a>
 
		</li>
		<li>
			<a href="#">Agenda</a>
			<ul class="sousMenu">			      
				<li><a href="../agenda/index.html">Evènements à venir</a></li>
				<li><a href="../agenda/index.html">Evènements passés</a></li>
 
			</ul>
		</li>
		<li>
			<a href="#">Cour et Stage</a>
 
		</li>
 
 
	</ul>
	<tr>
	<td valign="top" style="height:1px">
		<table cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size:1px">
			<tr>
				<td width="100%" style="background-image:url(../_frame/border-top.png);height:7px"></td>
			</tr>
		</table>
	</td>
</tr>
<tr>
 
</tr>
</table>
</body></html>

css

Code css :

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
 
body {
 font: 11px verdana, sans-serif;
 background: #AFA99B url("fond.jpg") top left no-repeat;
 margin: 0;
 padding: 0;
}
 
/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */
 
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
	background: #FFCC66;
	width: 944px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
}
#menuDeroulant li
{
	float: left;
	width: 100px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #0700E1;
	background: #FFCC66;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #0700E1;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}
 
#menuDeroulant li:hover > .sousMenu { display: block; }

Merci d'avance de votre aide
Christian

**crissud** · 27/05/2010, 07h27

Bonjour,

j'ai pu trouver une solution, je ne sais pas si c'est LA meilleure solution.

mon menu déroulant vient en bas de ma bannière, je n'ai pas pu trouver pour la chevaucher.

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #FFCC66;
width: 944px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 1;
left: 1;
}

Si à présent vous avez un meilleur conseil

j'indiquerais résolu en fin de journée

Cordialement
Christian

**Damouille** · 27/05/2010, 08h54

Bonjour Christian,

C'est ta mise en page qui ne va pas du tout. Pour placer tes elements, tu utilises des tableaux et des positions absolues. Ce n'est pas conseille du tout, tu risques de galerer si tu continues dans cette voie.

Tu aurais moins de soucis avec des div et des positions relative qui, nativement, ont le comportement que tu recherche.

Tu devrais pouvoir trouver facilement des tutaux sur ce site concernant la mise en page generale. Meme chose pour les menus deroulant.

Bon courage

**crissud** · 28/05/2010, 08h05

Bonjour

Merci Damouille, de ton conseil
Pour le présent cela marche, mais je vais travailler pour évoluer vers le sens que tu me conseilles.

Bonne journée
Christian

Menu déroulant horizontal sous la bannière

CSS

Discussions similaires

Partager

Partager