Ik heb al reeds gezocht naar "footer" en aanverwante termen maar kwam veelal op topics die gingen over het plaatsen van de footer onderaan het scherm die dan vervolgens mee verschuift naar mate de content langer wordt. Dit is niet wat ik wil bereiken. Ik heb de volgende situatie. 1 container, absoluut gepositioneerd met daarin 4 blokken die ook absoluut staan. Deze 4 blokken verdelen de gehele breedte en fungeren als kolommen. Nu wil ik daaronder een footer plaatsen. Helaas kan ik nu alleen per kolom een footer neerzetten. Ik wil juist een footer die de gehele breedte van alle 4 de blokken beslaat. Hoe krijg ik dit nu voor elkaar?
Dit is wat ik nu heb. Zoals de footer nu staat werkt het niet. Hopenlijk is duidelijk wat ik bereiken wil. Mocht het probleem zijn dat er absoluut gepositioneerd wordt in de content-div. Hoe kan ik dan met relatieve positionering deze zelfde 4 kolommen handhaven?
Alvast bedankt voor de hulp!
Dit is wat ik nu heb. Zoals de footer nu staat werkt het niet. Hopenlijk is duidelijk wat ik bereiken wil. Mocht het probleem zijn dat er absoluut gepositioneerd wordt in de content-div. Hoe kan ik dan met relatieve positionering deze zelfde 4 kolommen handhaven?
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
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
| <style>
html, body {
margin: 0px;
padding 0px;
width:100%;
}
#content {
position:absolute;
width:100%;
margin:0 auto;
background: #000000;
}
.col1{
position:absolute;
left:0px;
top:0px;
width:25%;
background: #00FF00;
}
.col2{
position:absolute;
left:25%;
top:0px;
width:25%;
background: #00FF00;
}
.col3{
position:absolute;
left:50%;
width:25%;
background: #00FF00;
}
.col4{
position:absolute;
left:75%;
width:25%;
background: #00FF00;
}
.blok1{
position:relative;
left:0px;
top:0px;
width:98%;
margin:0 auto;
background: #FF0000;
}
.blok2{
position:relative;
left:0px;
top:0px;
width:90%;
background: #FF0000;
}
.blok3{
position:relative;
left:0px;
top:0px;
width:90%;
background: #FF0000;
}
.blok4{
position:relative;
left:0px;
top:0px;
width:90%;
background: #FF0000;
}
#footer{
position:relative;
width:100%;
height:50px;
}
</style>
<body>
<div id="content">
<div class="col1">
<div class="blok1"></div>
</div>
<div class="col2">
<div class="blok1"></div>
</div>
<div class="col3">
<div class="blok1"></div>
</div>
<div class="col4">
<div class="blok1"></div>
</div>
</div>
<div id="footer">footer
</div>
</body> |
Alvast bedankt voor de hulp!
:strip_icc():strip_exif()/u/174343/crop5daf4ed127edb_cropped.jpeg?f=community)
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
:strip_exif()/u/41306/web_anim.gif?f=community)
/u/107351/crop605afc50944ad_cropped.png?f=community)
/u/67017/icon6.png?f=community)