Ik heb een site met een header slice en een footer.
De footer staat altijd onderdaan de viewport dit werkt prima met onderstaande code.
Het probleem ontstaat bij een header afbeelding die transparant is op sommige plaatsen.
Dit resulteert echter in een ongewenst effect. De slice afbeelding loopt van onder
tot boven en is dus zichtbaar door de transparante stukken van de header.
Eigenlijk zou ik willen dat de slice bijvoorbeeld 300px (header hoogte in dit voorbeeld)van boven begint en 37px)
footer hoogte in dit voorbeeld) vanaf de bodem eindigt.
Nu heb ik gepoogd een extra div te gebruiken met de naam #holder en hier de slice.png te laten tonen.
Dit werkt dus zo niet, iemand een goed idee?
De footer staat altijd onderdaan de viewport dit werkt prima met onderstaande code.
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
| html {
background: #373636;
height: 100%;
text-align: center;
margin-bottom: 1px;/*dwingt FF tot een scrollbar*/
}
body {
position: relative;
margin: 0 auto;
width: 1000px;
background: url(../images/slice.png) repeat-y;
min-height: 100%;
text-align: left;
}
#container {
text-align: left;
overflow: hidden;
width:1000px
}
#header {
height: 300px;
width: 1000px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
}
#footer{
position: absolute;
bottom: 0;
left: 0px;
width: 1000px;
height: 37px;
background: url(../images/footer.png) no-repeat;
} |
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<!--[if lt IE 7]>
<style type="text/css"> body { height: 100%; } </style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="holder"></div>
<div id="footer"></div>
</div>
</body>
</html> |
Het probleem ontstaat bij een header afbeelding die transparant is op sommige plaatsen.
Dit resulteert echter in een ongewenst effect. De slice afbeelding loopt van onder
tot boven en is dus zichtbaar door de transparante stukken van de header.
Eigenlijk zou ik willen dat de slice bijvoorbeeld 300px (header hoogte in dit voorbeeld)van boven begint en 37px)
footer hoogte in dit voorbeeld) vanaf de bodem eindigt.
Nu heb ik gepoogd een extra div te gebruiken met de naam #holder en hier de slice.png te laten tonen.
code:
1
2
3
4
| #holder {
background-image: url(../images/slice.png);
background-repeat: repeat-y;
min-height: 100%; |
Dit werkt dus zo niet, iemand een goed idee?
