mise en page DIV : chevauchement

Version imprimable

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

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

Code:

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>

28/02/2005, 15h58
fabrisss

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

fabrisss
28/02/2005, 16h56
SpaceFrog

on est là pour ça ;-)