| home / programming / css_frames / 1 |   [previous] |
|
|
|
If you look at the above example with Internet Explorer you will NOT see the contents div since Internet Explorer does not understand any of the above positional styling, but if you're using another browser, you should see the white contents area between the header and footer.
/* for internet explorer */
* html body {
padding:120px 0 50px 0;
}
* html #contents {
height:100%;
width:100%;
}
* html body { - target Internet Explorer ONLY. This is the ususal hack to add styling to the body that is only understood by Internet Explorer.
padding:120px 0 50px 0; - since we're using the faulty box model, in which the padding is included within the height and width of the body, this will have the effect of reducing the usable body size by 120px from the top of the window and 50px from the bottom. In other words, any content placed in the body will now occupy the space between our header and footer.
* html #contents { - targets the contents div for Internet Explorer only.
height:100%; - sets the height of the content div to 100%. In our case, this is the size of the vertical space between the header and footer.
width:100%; - sets the width of the contents div to 100%, the full width of the browser window.
The overflow auto and background color will be set by the general styling for ALL browsers.
If you have Internet Explorer you will see the text content displayed correctly.
The above example has displayed the header, footer and contents in their correct positions in the browser window. When the window is resized the header and footer scroll bars will appear. In order for the contents scroll bar to be visible we need to add more content to the contents area.
<body> <div id="header"> <h1>This is the HEADER area</h1> <h2>Resize me to see the scroll bars.</h2> </div> <div id="footer"> <h3>This is the FOOTER area</h3> </div> <div id="contents"> <h1>This is the CONTENTS area</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div>
Just to add some text to the contents div.
p {width:250px;}
Fix the width of the paragraphs to 250px so that the text should extend below the contents area.
If you are viewing this with a resolution of 1024 x 768 or less, you should now see a vertical scroll bar in the contents area. Resizing the window will show the header and footer in place and scrolling the contents will allow all the text to be seen. If the width is reduced enough, horizontal scroll bars will be added.
Note: If you are browsing with Firefox, the mousewheel will not work within the contents area. This is a known bug which Firefox has promised to fix at it's next major release later this year. If you can't wait, there's an extension available which will correct this problem.
The above tutorial gives you the basics of the layout. The contents area can be treated as if it were the body and will cope with floats, absolute and relative positions (although Opera is a little quirky with position absolute).
Finally, as an example of how this can be used, I have the following demonstration available on my web site.Stu's website documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. All of his examples are produced with JUST CSS--no javascript, or any other language, has been used in any of the examples. [Editor's note: Prepare to be amazed!] http://www.stunicholls.myby.co.uk/
| home / programming / css_frames / 1 | [previous] |
Created: March 27, 2003
Revised: April 26, 2005
URL: http://webreference.com/programming/css_frames/1
