Décalage du au menu

**darkphenx** · 10/11/2006, 15h34

Bonjour, je vais essayer d'uploader des screens pour vous aider,

Bon alors mon site se décompose en 4 parties (banniere, menudéroulant, corps, design, pied de page).

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
74
75
76
77
78
79
80
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<div id="banniere">
<object type="application/x-shockwave-flash" data="banniere_soleil.swf" width="559" height="150">
<param name="movie" value="banniere_soleil.swf" />
<param name="loop" value="false" />
<param name="border" value="false" />
<embed src="images/banniere_soleil.swf" width="559" height="150" loop="false" movie="banniere_soleil.swf" border="false"></embed>
</object>
</div>
 
<ul id="menuDeroulant">
		<li>
			<a href="#">Qui sommes nous ?</a>
			<ul class="sousMenu">
				<li><a href="#">Qui sommes nous?</a></li>
				<li><a href="#">Notre équipe</a></li>
			</ul>
		</li>
 
		<li>
			<a href="#">Nos services</a>
			<ul class="sousMenu">			      
				<li><a href="#">Etude, Audit, Conseil</a></li>
				<li><a href="#">Développement d'applications métiers</a></li>
				<li><a href="#">Concéption de site Internet</a></li>
				<li><a href="#">Ventes, Installation, et Maintenance</a></li>
				<li><a href="#">Suivi de votre système d'informations</a></li>
				<li><a href="#">Vente de consommables informatiques</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Nos logiciels</a>
			<ul class="sousMenu">			      
				<li><a href="#">Gestion commerciales déstinées aux entreprises de négoces</a></li>
				<li><a href="#">Gestion d'achats</a></li>
				<li><a href="#">Gestion des temps (Pointage, Contrôle de présence,...)</a></li>
				<li><a href="#">Gestion des notes de frais</a></li>
				<li><a href="#">Dispatch EDI</a></li>				
				<li><a href="#">Suivi VPN</a></li>
				<li><a href="#">Pour tous développement spécifiques, Contactez-nous.</a></li>
 
			</ul>
		</li>
		<li>
			<a href="#">Nos réalisations</a>
			<ul class="sousMenu">			      
				<li><a href="#">Rollcutting</a></li>
			</ul>
			</li>
 
			<li>
			<a href="#">Nous contacter</a>
			</li>
 
			<li>
			<a href="#">Espace Client</a>
			</li>
 
			<li>
			<a href="#">Actualités</a>
			<ul class="sousMenu">			      
				<li><a href="#">Actualités</a></li>
				<li><a href="#">News</a></li>				
			</ul>
			</li>
	</ul>
 
</div>
 
<div id="corps">
<p>Voici l'actu du moment.</p>
</div>
<div id="design">
</div>
<div id="pied_de_page">
<p align="center"></p>
</div>
</body>

et le css qui l'accompagne:

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
122
/* CSS Document */
* {
  margin: 0;
  padding:0;
}
 
body
{
width: 90%;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
background-color:#CC9933;
 
}
 
#banniere
{
width:90%;
height:150px;
float:left;
background-color:#FFFFFF;
border:1px solid #000000;
}
 
#menuDeroulant
{
float:left;
background:#FFFFFF;
width: 90%;
height: auto;
list-style-type: none;
margin: 0;
padding: 0;
border:solid 1px #000000;
	}
#menuDeroulant li
{
	float: left;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#CC6633;
	font-size:11px;
	width: 112px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: auto;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover {
background-color:#CC6600 top;
}
#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("images\fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}
 
#menuDeroulant li:hover  .sousMenu { display: block; }
 
#corps
{
float:none;
width:90%;
background-color:#FFFFFF;
margin-left:0px;
margin-bottom:0px;
padding-left:0px;
padding-bottom:0px;
border:solid 1px #000000;
 
}
 
#Pied_de_page
{
float:left;
width:90%;
background-color:#FFFFFF;
margin:0;
padding:0;
border:solid 1px #FFFFFF;
}

C'est en ordre, bien comme je le souhaité. Mais quand je survol une partie du menu déroulant, le corps (qui est juste en dessous du menu) se décale en dessous du menu dont l'arborescence est développée. Comment pourrais-je faire pour que le menu passe au dessus du corps?

Merci d'avance,
Salutations.

**Bisûnûrs** · 10/11/2006, 15h52

Dans ta déclaration de #menuDeroulant, rajoute :

Code CSS :

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

position:absolute;

**darkphenx** · 14/11/2006, 09h01

Merci pour ta réponse rapide, (plus que le mienne

) mais cela ne semble ^pas convenir, si je rajoute cette ligne, mon vient se coller en haut de la page, au dessus et à droite de la banniere qui est censée le précedé.

**Bisûnûrs** · 14/11/2006, 09h18

Dans ce cas n'oublie pas de renseigner top et left :

Code CSS :

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

1
2
3
position:absolute;
top:100px;
left:200px;

**darkphenx** · 14/11/2006, 09h40

Super merci, Désolé du dérangement pour finalement si peu.

A+

**darkphenx** · 15/11/2006, 14h20

Bonjour, de nouveau un petit souci, concernant le même sujet, (donc je n'ai pas ré-ouvert un nouveau topic).

Donc l'ancien problème est résolu, a savoir que le menu n'agrandi plus sa fenetre et ne décale plus le corps. Ceci dit, quand mon menu se développe, il reste en arriere plan.

Que faire?!

Merci,

Décalage du au menu

CSS

Vue hybride

Discussions similaires

Partager

Partager