Probleme au niveau du menu

**Kaaya** · 11/09/2010, 22h42

Bonjour, je débute en html/css, et j'ai un petit soucis au niveau du menu (source en pièce jointe), quand on passe sur le menu, ca descends le corps de la page. Mais quand je met dans le css "position:absolute" certes ca permet de ne plus faire bouger le corps de la page, mais tout le décors part en nuts.

Merci d'avance au forumeur(se) qui aura gentillesse de regarder ce que j'ai fait.

**Rahim-US** · 12/09/2010, 15h35

Salut, j'ai modifier complètement tes fichiers html et css
voilà le code tu peux le tester:

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
<!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" xml:lang="fr">
<head>
	<title>GG</title>
    <link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
 
	<div align="center" class="header">
		<img src="images/header.png" height="105px" width="530px" />
		<div class="recherche"><input type="text" size="20" />&nbsp;<input type="submit" value="Rechercher" /></div>
	</div>
 
	<div class="menu">
		<div class="menu-gauche"></div>
		<center>
			<div class="menu-centre">
				<ul id="topmenudebut">
					<li><a href="#">Premier menu</a>
						<ul class="sousMenu">
								<li><a href="item.htm">1er item</a></li>
							<li><a href="item.htm">2em item</a></li>
							<li><a href="item.htm">3em item</a></li>
						</ul>
					</li>
				</ul>
				<ul id="topmenu">
					<li><a href="#">Menus du millieu</a>
						<ul class="sousMenu">
							<li><a href="item.htm">1er item</a></li>
							<li><a href="item.htm">2em item</a></li>
							<li><a href="item.htm">3em item</a></li>
							<li><a href="item.htm">4em item</a></li>
							<li><a href="item.htm">5em item</a></li>
							<li><a href="item.htm">6em item</a></li>
						</ul>
					</li>
					<li><a href="#">Menus du millieu</a>
						<ul class="sousMenu">
							<li><a href="item.htm">1er item</a></li>
							<li><a href="item.htm">2em item</a></li>
							<li><a href="item.htm">3em item</a></li>
							<li><a href="item.htm">4em item</a></li>
							<li><a href="item.htm">5em item</a></li>
							<li><a href="item.htm">6em item</a></li>
						</ul>
					</li>
				</ul>
				<ul id="topmenufin">
					<li><a href="#">Dernier menu</a>
						<ul class="sousMenu">
							<li><a href="item.htm">1er item</a></li>
							<li><a href="item.htm">2em item</a></li>
							<li><a href="item.htm">3em item</a></li>
							<li><a href="item.htm">4er item</a></li>
							<li><a href="item.htm">5em item</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</center>
		<div class="menu-droit"></div>
	</div>
 
	<div class="contenu">
		<img src="images/header.png" height="105px" width="530px" />
	</div>
 
</body>
</html>

et pour le fichier css voilà le code aussi:

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
body {
font:14px "COMIC SANS MS", sans-serif;
background:#dbc278;
margin: auto;
padding:0;
min-width:800px;
}
div.header{
background:black;
margin: 0 auto;
height:105px;
}
div.recherche{
float:right;
padding-right:4%;
padding-top:70px;
}
div.menu{
height:34px;
background-image: url('images/menu-background-barre.png');
background-repeat: repeat-x;
margin: 0;
}
div.menu-gauche{
height:34px;
float: left;
width:15px;
background-image: url('images/menu-gauche.png');
background-repeat: no-repeat;
}
div.menu-droit{
height:34px;
float: right;
width:15px;
background-image: url('images/menu-droit.png');
background-repeat: no-repeat;
}
div.menu-centre
{
margin:0;
position: relative;
z-index: 1;
}
div.contenu{
position: absolute;
margin: 0;
padding:0;
}
#topmenudebut,#topmenu,#topmenufin{
list-style-type:none;
border:0;
margin:0;
padding:0;
}
#topmenu {
width:476px;
}
#topmenudebut {
width:625px;
}
#topmenufin {
}
#topmenu li,#topmenudebut li,#topmenufin li {
width:150px;
}
#topmenudebut li,#topmenufin li,#topmenu li {
float:left;
border:0;
text-align:center;
margin:0;
padding:0;
}
#topmenudebut .sousMenu li a:link,#topmenudebut .sousMenu li a:visited,#topmenu .sousMenu li a:link,#topmenu .sousMenu li a:visited ,#topmenufin .sousMenu li a:link,#topmenufin .sousMenu li a:visited {
display:block;
color:#FFF;
border:0;
text-decoration:none;
background:transparent url("images/sousmenu.png") repeat;
margin:0;
}
#topmenu .sousMenu,#topmenudebut .sousMenu,#topmenufin .sousMenu {
display:none;
list-style-type:none;
border:0;
margin:0;
padding:0;
}
#topmenu .sousMenu li,#topmenudebut .sousMenu li,#topmenufin .sousMenu li {
float:none;
border:0;
width:149px;
border-top:2px solid transparent;
border-right:2px solid transparent;
margin:0;
padding:0;
}
#topmenufin li a:link,#topmenufin li a:visited,#topmenu li a:link,#topmenu li a:visited,#topmenudebut li a:link,#topmenudebut li a:visited {
display:block;
height:1%;
color:#FFF;
background:url("images/menu-background.png") repeat;
text-decoration:none;
margin:0;
padding:7px 10px;
}
#topmenu li a:link,#topmenu li a:visited,#topmenudebut li a:link,#topmenudebut li a:visited {
border-right:2px solid #fff;
}
#topmenu li a:hover,#topmenudebut li a:hover,#topmenufin li a:hover {
background:url("images/menu-background-over.png") repeat;
}
#topmenu li a:active,#topmenudebut li a:active,#topmenufin li a:active {
background-color:#5F879D;
}
#topmenu .sousMenu li a:hover,#topmenudebut .sousMenu li a:hover,#topmenufin .sousMenu li a:hover {
background-image:none;
background-color:#F2462E;
}
#topmenu li:hover > .sousMenu,#topmenudebut li:hover > .sousMenu,#topmenufin li:hover > .sousMenu {
display:block;
}

**Kaaya** · 12/09/2010, 15h42

Je te remercie beaucoup, ca fait ce que je voulais, sans les problèmes.

Je vais regarder les modif que tu as fait. Mais si tu pouvais m'expliquer ce qui n'allais pas. Le but est aussi de comprendre ce qui n'allait pas.

sinon petit détail, on voit un bout de background dans le coin je vais tricher en enlevant la transparence du coin, et en mettant la couleur du fond a la place.

**Rahim-US** · 12/09/2010, 15h58

j'ai simplifier un peut ton fichier html en mettant les div du header, menu, et contenu (sous le menu) bien sur en ajoutant aussi les paramètre css de chaque div et j'ai corriger quelques erreurs html.
voila bonne chance.

Probleme au niveau du menu

HTML

Vue hybride

Discussions similaires

Partager

Partager