/u/132982/crop61c4e428587f4.png?f=community)
Hallo,
ik ben bezig met een site en loop tegen het volgende probleem aan. Onderdaan de site komt een footer te staan. Dit is me deels gelukt, de footer staat keurig onderaan zolang er maar niet meer content is dan er op het scherm past. In dat geval blijft de footer staan maar loopt de tekst onder de footer door. Het zou nog mooier zijn als de footer gewoon altijd aansluit op de content, maar dit is al heel wat. Ik hoop dat iemand mij kan helpen. Hieronder mijn code:
ik ben bezig met een site en loop tegen het volgende probleem aan. Onderdaan de site komt een footer te staan. Dit is me deels gelukt, de footer staat keurig onderaan zolang er maar niet meer content is dan er op het scherm past. In dat geval blijft de footer staan maar loopt de tekst onder de footer door. Het zou nog mooier zijn als de footer gewoon altijd aansluit op de content, maar dit is al heel wat. Ik hoop dat iemand mij kan helpen. Hieronder mijn code:
Cascading Stylesheet:
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
| html { margin: 0; height: 100%; background: white; } body { position: relative; min-height: 100%; width: 900px; border: 1px solid black; margin: 0 auto; background: #eeeeee; } #container { width: 900px; padding: 0px 0 25px 0; } #top { width:900px; height:29px; background-color: red; } #header { position:absolute; width:657px; height:180px; background-color: yellow; } #logo1 { position:absolute; left:657px; height:180px; width: 243px; border: solid 1px #dddddd; } #menu { position: absolute; top:210px; margin:0px; width: 657px; height: 55px; border: solid 1px #dddddd; } #logo2 { position:absolute; top:210px; left:657px; height:55px; width: 243px; border: solid 1px #dddddd; } #content { position:absolute; top:266px; width:657px; border: solid 1px #dddddd; } #module { position:absolute; top:266px; left:657px; width:243px; border: solid 1px #dddddd; } #footer { position: absolute; bottom: 0; left: 0; border-top: 1px solid black; width: 900px; padding: 5px 0px 0px 0px; height: 15px; background: yellow; text-align: center; } |
HTML:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="template_css.css" rel="stylesheet" type="text/css" /> </head> <html> <body class="body"> <div id="container"> <div id="top"> </div> <div id="header">header </div> <div id="logo1">logo1 </div> <div id="menu">menu </div> <div id="logo2">logo2 </div> <div id="content"> content </div> <div id="module"> module </div> </div> <div id="footer"> footer </div> </body> </html> |
:strip_exif()/u/106968/belkar2.gif?f=community)
:strip_exif()/u/120881/bataleon_target.gif?f=community)
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
/u/215708/crop6888c777e9406_cropped.png?f=community)
/u/110816/matrixed.png?f=community)
/u/102549/gimp_logo_icon.png?f=community){kind=icon}