Hallo,
Ik zit met een probleem waar ik maar niet uit kom. Alle foefjes die gebruiken werken niet. Dus vandaar dat ik de vraag aan jullie voor leg.
Mijn website bestaat uit een header + mainframe en een footer. Binnen het contentblok zijn 2 div's. Namelijk sidebar en main, deze 2 div's hebben ook een background. Deze background moet als hoogte 100% zodat deze doorlopen naar de footer. Vervolgens moet als de inhoud van de 2 div's binnen het contentblok minimaal is, zoals in onderstaand voorbeeld, de footer onder aan het scherm zitten.
Oh ja, de header en de footer nemen de 100% width in van het scherm en het Mainframe is gecentreerd in het midden.
NU heb ik al verscheidene dingen geprobeerd, maar niks lijkt te werken. Hopelijk kan een van jullie mij uit de brand helpen. Ik heb hier onder de code toegevoegd voor zover ik heb nu heb.
Alvast bedankt,
Dennis de Jong
Ik zit met een probleem waar ik maar niet uit kom. Alle foefjes die gebruiken werken niet. Dus vandaar dat ik de vraag aan jullie voor leg.
Mijn website bestaat uit een header + mainframe en een footer. Binnen het contentblok zijn 2 div's. Namelijk sidebar en main, deze 2 div's hebben ook een background. Deze background moet als hoogte 100% zodat deze doorlopen naar de footer. Vervolgens moet als de inhoud van de 2 div's binnen het contentblok minimaal is, zoals in onderstaand voorbeeld, de footer onder aan het scherm zitten.
Oh ja, de header en de footer nemen de 100% width in van het scherm en het Mainframe is gecentreerd in het midden.
NU heb ik al verscheidene dingen geprobeerd, maar niks lijkt te werken. Hopelijk kan een van jullie mij uit de brand helpen. Ik heb hier onder de code toegevoegd voor zover ik heb nu heb.
Alvast bedankt,
Dennis de Jong
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
| html {
height:100%;
}
body {
background:url(../images/bg_main.png) no-repeat #782172 top left;
height:100%;
position:relative;
}
#container {
min-height:100%;
position:relative;
height:100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#headertop {
width:100%;
height:150px;
margin:auto;
}
#headersmall {
margin: 0px auto 0px auto;
width:900px;
height:150px;
}
#logo {
background:url(../images/logo_bloem.png) no-repeat top left;
width:500px;
height:150px;
text-indent:-9999px;
}
#mainframe {
margin: 0px auto 0px auto;
width:900px;
height:100%;
}
#sidebar {
background:url(../images/bg_menu.png) no-repeat top left;
width:200px;
height:100%;
min-height:100%;
float:left;
}
#main {
background:url(../images/bg_content.png) no-repeat top left;
width:675px;
height:100%;
min-height:100%;
float:left;
margin:0 0 0 25px;
}
#footer {
background:#0099a7;
width:100%;
height:50px;
clear:both;
}
#footerinfo {
margin: 0px auto 0px auto;
width:850px;
height:35px;
padding:15px 25px 0 25px;
} |
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
| <body> <!-- HEADER START --> <div id="headertop"> <div id="headersmall"> <div id="logo">Logo</div> </div> </div> <!-- END HEADER --> <!-- START MIDDLE CONTENT --> <div id="mainframe"> <!-- START SIDEBAR --> <div id="sidebar"> Hier komt info </div> <!-- START MAIN CONTENT --> <div id="main"> Dit is een test.<br /><br />Hier staat heel veel tekst. </div> </div> <!-- END MIDDLE CONTENT --> <!-- START FOOTER --> <div id="footer"> <div id="footerinfo"><h3>Footer info</h3></div> </div> </body> |
/u/241825/Avatar_for_terrorist.png?f=community){kind=avatar}
/u/102549/gimp_logo_icon.png?f=community){kind=icon}
/u/155722/Looneytunes.png?f=community)
:strip_icc():strip_exif()/u/5964/crop56503163e97a5.jpeg?f=community)
:strip_icc():strip_exif()/u/236824/avatar_tnet.jpg?f=community){kind=avatar}
/u/88456/crop5bf2f0f12fa48_cropped.png?f=community)