mise en page DIV : chevauchement

**fabrisss** · 28/02/2005, 14h47

je crée une page web composée de 2 blocs DIV fixes (topmenu et footer) et 1 bloc DIV "scrollable" (content):

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
 
.topmenu {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 40px;
	width: 100%;
}
.footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	height: 20px;
	width: 100%;
	text-align: center;
}
.content {
	position: absolute;
	top: 41px;
	left: 0px;
	bottom: 21px;
}

...le problème est que lorsque je scrolle dans le bloc "content", le texte de ce bloc chevauche les blocs "topmenu" et "footer"...que puis-je faire pour éviter ce désagrément ?

merci pour ce forum très utile,

fabrisss

**SpaceFrog** · 28/02/2005, 15h13

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
<style type='text/css'>
body {margin:0px;}
.topmenu {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 5%;
   width: 100%;
   display:block;
   background-color:red;
}
.footer {
   position: absolute;
   bottom:0px;
   left: 0px;
   height: 5%;
   width: 100%;
   text-align: center;
   display:block;
   background-color:gray;
}
.content {
   position: absolute;
   top: 5%;
   height:90%;
   width:100%;
   left: 0px;
   display:block;
   background-color:salmon;
 
} 
</style>
</head>
 
<body>
<div class="topmenu">top</div>
<div class="content">middle</div>
<div class="footer">bottom</div>
</body>
</html>

**fabrisss** · 28/02/2005, 15h58

merci pour ce petit exemple qui m'a permis de tout comprendre et qui a résolu mon problème,

fabrisss

**SpaceFrog** · 28/02/2005, 16h56

on est là pour ça ;-)

mise en page DIV : chevauchement

HTML

Discussions similaires

Partager

Partager