:strip_icc():strip_exif()/u/4421/sas.jpg?f=community)
Ik heb de volgende code:
Met bijbehorende CSS:
De content_container div dient de pagina in hoogte op te vullen, dit werkt prima in IE6, IE7 en Firefox maar helaas niet in Opera.
Ondersteund Opera height: auto; niet of ligt het probleem ergens anders? Heb al diverse dingen geprobeerd maar kom er niet uit
De footer is trouwens altijd bottom gelined, en er wordt geen gebruik gemaakt van een content overflow = scroll, dus wanneer er meer content is dan wordt de footer daar gewoon onder gezet zonder gebruik te maken van inline scrolling
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
| <!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>Geen</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="css/style.css?v=5" type="text/css" media="screen,projection" title="default style" /> </head> <body> <div id="page_container"> <div id="page_verline"></div> <div id="header_container"> <div id="header_logo"></div> <div id="header_horline"></div> <div id="header_rightbox"> <div>Header tekst</div> </div> </div> <div id="content_container"> <div id="content_subcontainer"> <div id="content_rightcontainer"></div> </div> </div> </div> <div id="footer"> <div></div> </div> </div> </body> </html> |
Met bijbehorende CSS:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| html {overflow: -moz-scrollbars-vertical;} html, body, #page_container {width: 100%; height: 100%; min-height: 100%; } html>body, html>body #page_container {height: auto;} body {font-family: Arial, Tahoma, Verdana; font-size: 11px; line-height: 14px; margin: 0; padding: 0; cursor: default;} form {margin: 0;} #page_container {position: absolute; width: 958px; border-left: 1px solid #bfbfbf; border-right: 1px solid #bfbfbf;} #page_verline {position: absolute; width: 1px; left: 100px; font-size: 0; line-height: 0; height: 100%; background: #bfbfbf; z-index: 10;} #header_container {height: 112px;} #header_logo {position: relative; width: 434px; height: 53px; left: 15px; top: 59px; background: url('/images/logo.gif') no-repeat; z-index: 2;} #header_horline {position: absolute; width: 100%; height: 1px; font-size: 0; line-height: 0; top: 100px; background: #bfbfbf; z-index: 1;} #header_rightbox {position: absolute; width: 208px; height: 100px; right: 0; top: 0; line-height: 18px; border-left: 1px solid #bfbfbf;} #header_rightbox div {margin: 13px 0 0 13px;} #content_container {border: 1px solid green; height: auto; min-height: auto; margin-top: 20px; margin-bottom: 36px;} #content_rightcontainer {margin-left: 140px;} #footer {position: absolute; width: 858px; height: 36px; left: 100px; bottom: 0; color: #666666; border-left: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf;} #footer div {margin: 10px 0 0 38px;} |
De content_container div dient de pagina in hoogte op te vullen, dit werkt prima in IE6, IE7 en Firefox maar helaas niet in Opera.
Ondersteund Opera height: auto; niet of ligt het probleem ergens anders? Heb al diverse dingen geprobeerd maar kom er niet uit
De footer is trouwens altijd bottom gelined, en er wordt geen gebruik gemaakt van een content overflow = scroll, dus wanneer er meer content is dan wordt de footer daar gewoon onder gezet zonder gebruik te maken van inline scrolling
:strip_icc():strip_exif()/u/148505/31bb5b263ef71bb4d5751e9a89035105.jpeg.jpg?f=community)
:strip_icc():strip_exif()/u/118820/47lMXhL.jpg?f=community)
/u/66746/crop60bb33c8d667f_cropped.png?f=community)