Ik zit met een probleem waar ik al dagen mee aan het klooien ben. De oplossing zal ongetwijfeld simpel zijn, maar ik kom er maar niet uit.
Eerst maar eens de bijbehorende code:
Iemand enig idee wat ik fout doe? Ik ben het spoor bijster.
Eerst maar eens de bijbehorende 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
| #html, body { padding: 0px; margin: 0px; height: 100%; font: 11px "trebuchet ms"; color: #303840; background: #515159; } #container { position: absolute; padding-top: 26px; padding-bottom: 10px; margin-left: -383px; top: 0px; left: 50%; height: 100%; width: 766px; -moz-box-sizing: padding-box; } #top { position: absolute; top: 0px; height: 26px; width: 100%; background: url("../images/menu_bg.gif") no-repeat; } #header { position: absolute; top: 26px; height: 213px; width: 100%; background: url("../images/header.gif") no-repeat; } #main { position: absolute; left: 0px; height: 100%; top: 239px; width: 589px; background: #FCFCFD; overflow: auto; } #maincontent { padding-left: 25px; padding-right: 25px; } #right { position: absolute; top: 239px; right: 0px; height: 100%; width: 177px; background: transparent url("../images/submenu_bg.gif") repeat-y; } #rightcontent { padding-left: 11px; padding-right: 11px; padding-top: 16px; } #bottom { position: absolute; bottom: 0px; height: 10px; width: 100%; font-size: 1px; background: #EF4135; } |
HTML:
Het probleem is dat de 'main' en de 'right' div's dusdanig uitrekken, dat ze nog tot onder de 'bottom' div reiken. De pagina lijkt goed op het eerste gezicht, ware het niet dat er rechts nog een scrollbar zit i.v.m. die uitrekkende div's.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
| <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//golem.ph.utexas.edu//DTD XHTML 1.1 plus Target 1.0//EN" "http://golem.ph.utexas.edu/DTD/xhtml11-target.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" > <head> <title>Bla</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="content-language" content="nl" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="imagetoolbar" content="false" /> <style type="text/css" media="all"> @import "css/common.css"; </style> <script type="text/javascript" src="js/common.js"></script> </head> <body> <div id="container"> <div id="top"> Bla menu </div> <div id="header"></div> <div id="main"> <div id="maincontent"> Bla main </div> </div> <div id="right"> <div id="rightcontent"> Bla rechts </div> </div> <div id="bottom"></div> </div> </body> </html> |
Iemand enig idee wat ik fout doe? Ik ben het spoor bijster.