Un problème de positionnement de menu sur la page

**rosierk** · 20/11/2009, 13h51

Bonjour,

Je suis un vrai débutant dans le css, j'ai copié un code CSS me permettant de créer une menu de navigation pour ma page web. Je ne sais pas placer ce menu à l'endroit que je souhaite sur ma page. malgré toutes mes recherches, le menu ne reste que figé au coin gauche droit de ma page. Je voudrai le placer au milieu de ma page, dans un tableau et continuer ainsi avec les autres éléments de ma page. Je ne sais pas dans le code CSS qu'est-ce que je dois changer pour y arriver ... c'est à dire, placer mon menu là où je souhaite sur ma page. Merci pour votre aide.

Voici le code 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
body {
 font: 11px verdana, sans-serif;
 background: #FFFFFF url("fond.jpg") top right no-repeat;
 margin: 0;
 padding: 0;
}
 
/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */
 
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
	background: #ffffff;
	width: 644px;
	height: 24px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 296px;
	left: 2px;
}
#menuDeroulant li
{
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #000000;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px dotted #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: #FFF;
	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; }

Code HTML :

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
65
66
67
68
69
70
71
72
73
<!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>ESSAI</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="sheet.css" title="default" media="screen" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
</head>
 
<body>
 
	<ul id="menuDeroulant">
		<li>
			<a href="#">Les castors</a>
			<ul class="sousMenu">
				<li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
				<li><a href="#">Ils confectionnent des barrages !</a></li>
 
				<li><a href="#">Ils ont des grandes dents</a></li>		
			</ul>
		</li>
		<li>
			<a href="#">Partie 2</a>
			<ul class="sousMenu">			      
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
 
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 3</a>
 
			<ul class="sousMenu">			      
				<li><a href="#">pommes</a></li>
				<li><a href="#">poires</a></li>
				<li><a href="#">ananas</a></li>
				<li><a href="#">pamplemousse</a></li>
				<li><a href="#">banane</a></li>				
				<li><a href="#">raisins</a></li>
 
				<li><a href="#">framboises</a></li>
				<li><a href="#">fraises</a></li>
				<li><a href="#">mirabelles</a></li>
				<li><a href="#">groseilles</a></li>
			</ul>
		</li>
		<li>
 
			<a href="#">Partie 4</a>
			<ul class="sousMenu">			      
				<li><a href="#">tomates</a></li>
				<li><a href="#">haricots</a></li>
				<li><a href="#">carrottes</a></li>
				<li><a href="#">choux</a></li>
				<li><a href="#">concombres</a></li>				
				<li><a href="#">courgettes</a></li>
 
				<li><a href="#">endives</a></li>
				<li><a href="#">navets</a></li>
				<li><a href="#">epinards</a></li>
				<li><a href="#">avocat</a></li>
			</ul>
		</li>
</ul>
 
</body>
</html>

**Ethyde** · 20/11/2009, 15h31

Pour positionner ton menu ça ce passe :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#menuDeroulant
{
background: #ffffff;
width: 644px;
height: 24px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 296px;/* Défini la distance par rapport au haut */
left: 2px;/* Défini la distance par rapport à la gauche */
}

Un problème de positionnement de menu sur la page

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager