| home / programming / css_frames / 1 |    [previous][next] |
|
|
|
We can easily add the header to our page as follows:
<body> <div id="header"> <h1>This is the HEADER area</h1> <h2>Resize me to see the scroll bars.</h2> </div> </body> </html>
The (X)HTML is just a div with h1/h2 headings.
#header {
position:absolute;
top:0;
left:0;
width:100%;
height:120px;
overflow:auto;
background:#53829d;
color:#fff;
}
The style is the same for all browsers.
position:absolute; - since the body size is set to 100% high (by 100% wide) this will have the same effect as position:fixed; but using position:absolute allows Internet Explorer to interpret it correctly.
top:0; - positions the header at the top of the browser window.
left:0; - positions the header at the left hand side of the browser window.
width:100%; - makes the header as wide as the browser window.
height:120px; - makes the header 120px high.
overflow:auto; - allows scroll bars to be added if the content overflows the header area. To resize the browser window, use the step 3 example below to see the scroll bars.
background:#53829d; - sets the background color (to allow the header area to show up in step 3 example below).
color:#fff; - sets the font color to white so that it shows up against the background.
The above example will show the header with its associated text. Try resizing the browser window to see the horizontal scroll bars. These scroll bars will take up space within the header dimension and not encroach upon the body area.
The footer is added in the same way as the header but fixed to the bottom of the browser window.
<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> </body> </html>
The (X)HTML is just a div with a h3 heading.
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:50px;
overflow:auto;
text-align:right;
background:#73a2bd;
}
This styling is identical to the header style except that the absolute position is set to bottom:0; to position it at the bottom of the browser window. The height is set to 50px and the background color is a shade lighter than the header.
The above example now shows the footer in position at the bottom of the browser window. The footer will have scroll bars added as required when the window is resized.
The footer text is also aligned right to show that it can be placed at the right side of the window.
Note: As the browser window is resized the footer will stay at the bottom of the screen.
This is the only tricky part of the whole tutorial and requires two different aproaches, one for Internet Explorer and another for all other browsers. Both achieve the same appearance and also function in the same way.
To begin, I placed the contents area on the page with a single line of text and a background color to show the unscrolled look.
<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> </div> </body> </html>
Just another div with a h1 heading.
#contents {
position:fixed;
top:120px;
left:0;
bottom:50px;
right:0;
overflow:auto;
background:#fff;
}
position:fixed; - Internet Explorer doesn't understand this but all other browsers do and will place a fixed position contents div at the position defined below. In this case we are defining the top, bottom, left and right position so that the height and width will be calculated by the browser.
top:120px; - makes the contents miss the header.
left:0; - starts at the left hand side.
bottom:50px; - makes the contents miss the footer.
overflow:auto; - Adds scroll bars if necessary.
background:#fff; - makes the background color white.
| home / programming / css_frames / 1 | [previous][next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: April 26, 2005
URL: http://webreference.com/programming/css_frames/1
