Hey,
afgelopen dagen ben ik bezig geweest om een "simpele" standaard layout met css te ontwerpen.
Echter levert dit mij enorme koppijn op, omdat ik het gewenste resultaat niet kan vinden of kan afleiden.
De bedoeling is om een soort van template te maken voor een toekomstige php-website.
De opmaak zou als volgt moeten worden:
De wrapper div moet 960px breed en gecentreerd zijn.
Hierbij is het de bedoeling dat de content en zijbalk div ten alle tijde volledig uitgerekt worden tot aan de footer die aan de onderkant van het venster geplakt zit.
Verder zou de content div de enige div moeten zijn die een scrollbalk laat zien als er meer content in staat dan de div groot is (overflow: auto ?).
Hopelijk kunnen jullie me hier weer een stukje verder mee helpen.
PS. En voor de compatibiliteit wil ik me concentreren op IE7+, FF3.6+ en Chrome 10+.
Voor de overige browsers is het marktaandeel te klein geworden om daar ook rekening mee te houden.
afgelopen dagen ben ik bezig geweest om een "simpele" standaard layout met css te ontwerpen.
Echter levert dit mij enorme koppijn op, omdat ik het gewenste resultaat niet kan vinden of kan afleiden.
De bedoeling is om een soort van template te maken voor een toekomstige php-website.
De opmaak zou als volgt moeten worden:
|-------------------------------------| | Header | |-------------------------------------| | Navigatiebalk | |-------------------------------------| | Content | Zijbalk | | | | | | | |-------------------------------------| | Footer | |-------------------------------------|
De wrapper div moet 960px breed en gecentreerd zijn.
Hierbij is het de bedoeling dat de content en zijbalk div ten alle tijde volledig uitgerekt worden tot aan de footer die aan de onderkant van het venster geplakt zit.
Verder zou de content div de enige div moeten zijn die een scrollbalk laat zien als er meer content in staat dan de div groot is (overflow: auto ?).
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!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> <title>JG Sound</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="test2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"><h1>Header</h1></div> <div id="navbar"><h2>Navbar</h2></div> <div id="content"><h3>Content</h3></div> <div id="sidebar"><h3>Sidebar</h3></div> </div> <div id="footer"><h4>Footer</h4></div> </body> </html> |
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
| * { margin: 0; /* zero out margin */ padding: 0; /* zero out padding */ } html, body { height: 100%; /* gives layout 100% height */ overflow: inherit; /* triggers 100% height in Opera 9.5 */ margin: 0; padding: 0; } #wrapper { overflow: hidden; /*float: left;*/ min-height: 100%; width: 960px; position: relative; margin: 0 auto; padding: 0; } * html #wrapper { height: 100%; /* IE6 treats height as min-height */ } #header { height: 150px; width: 960px; position: relative; float: left; margin: 0; padding: 0; background: red; } #navbar { height: 50px; width: 960px; position: relative; float: left; /*margin-top: 200px;*/ margin: 0; padding: 0; background: blue; } #content { overflow: auto; width: 760px; position: relative; float: left; /*margin-top: 300px;*/ padding-bottom: 50px; margin: 0; padding: 0; background: yellow; } #sidebar { width: 200px; position: relative; float: right; padding-bottom: 50px; margin: 0; padding: 0; background: orange; } #footer { height: 50px; width: 960px; position: absolute; clear: both; bottom: 0; margin: -50px auto 0; /* -50px sucks it back in & auto centers it */ padding: 0; background: lime; } |
Hopelijk kunnen jullie me hier weer een stukje verder mee helpen.
PS. En voor de compatibiliteit wil ik me concentreren op IE7+, FF3.6+ en Chrome 10+.
Voor de overige browsers is het marktaandeel te klein geworden om daar ook rekening mee te houden.
[Voor 2% gewijzigd door paulus4ever op 20-05-2011 01:38. Reden: Opmaak]
Css/u/226934/redheadmetnick.png?f=community)
:strip_icc():strip_exif()/u/18606/crop63ebc46666763_cropped.jpg?f=community)
:strip_exif()/u/64272/Ava1.gif?f=community)
/u/107051/jeroenmadtrix60.png?f=community)
/u/20329/donald%2520avatar.png?f=community){kind=avatar}
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
/u/105842/Homer_60x60.png?f=community)
:strip_exif()/u/14385/malibu.gif?f=community)
:strip_icc():strip_exif()/u/8269/msn12.jpg?f=community)
:strip_icc():strip_exif()/u/12612/tneticon_bart.jpg?f=community)
