How to Create a Frames Layout with CSS by stanleysmyth

VIEWS: 0 PAGES: 15

									How to Create a Frames Layout with CSS
By Stu Nicholls.

Introduction

By far the most sought after use of CSS is to emulate the dated html 'frame' layout,
whereby the header, navigation and footer stay on screen at all times and the content area
will scroll. Since the adoption of the fixed position style by the latest browsers this is
quite an easy task for CSS. Unfortunately, Internet Explorer hasn't introduced this style
into it's repertoire (perhaps IE7 will correct this deficiency when it's released later this
year).

Fortunately, there are ways around this and it's possible to make Internet Explorer
versions IE5.01, 5.5 and 6 fall into line with the rest.

The following article will detail how to set up a 'frame' style layout with a fixed header,
which can incorporate the navigation, a fixed footer and a scrolling content area, all of
which will resize down to virtually nothing and still be usable (with scroll bars added as
required). It has been tested on PC browsers Mozilla 1.7.5, Netscape 7.1, FireFox 1.0.3,
Opera 8, Internet Explorer IE5.01, IE5.5 and IE6 and also Mac browsers Safari (1.3) and
FireFox (1.0.3).

Method
Step 1

The (X)HTML setup

The layout I am aiming for will have a header the full width of the browser window that
is 120px high and a footer the full width of the browser window by 50 px high. The
header and footer will be fixed to the top and bottom of the browser window and the
space in between will hold the scrolling content.

An example of the layout can be seen here.

‡ Proposed layout




                                                                                              1
Since Internet Explorer doesn't recognize position fixed we need to make use of another
'bug' which will allow us to use an alternative method. This bug is the well known and
documented faulty box model whereby the size of a box includes the padding and border
(more on this later).

In order to make use of the faulty box model and still write valid code we need to use the
following code at the start of our (X)HTML.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=UTF-8" />
<title> A CSS Frame Layout </title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">




                                                                                         2
</style>
</head>

<body>


</body>
</html>

Note the first line - <?xml version="1.0" encoding="UTF-8"?> - is valid (X)HTML and
will not affect other browsers, but will have the effect of switching Internet Explorer into
'quirks' mode. If you want Standards Compliant Mode in Internet Explorer 6 the FIRST
line has to be the !DOCTYPE declaration. Using the first line as above will give us valid
code and the faulty box model.

Step 2

Styling the body tag

We do NOT need to style the <html> tag

body {
  margin:0;
  border:0;
  padding:0;
  height:100%;
  max-height:100%;
  background:#eee;
  font-family:arial, verdana, sans-serif;
  font-size:76%;
  overflow: hidden;
  }

The body styling

margin:0; - removes the body margin.

border:0; - removes the body border.

padding:0; - removes the body padding.

The above styling just gives us the whole window to work with.

height:100%; - sets the height of the browser window to 100%

max-height:100%; - ensures that the body is not larger than 100% - This is for all
browsers except Internet Explorer.

background:#eee; - sets the body background to light grey (choose any color you like).



                                                                                           3
font-family:arial, verdana, sans-serif; - select your fonts for the page. Note: You
should always end the list with a generic font.

font-size:76%; - select a basic font size for the page. I find that 76% works well in all
browsers.

overflow: hidden; - this has the effect of hiding the scroll bars in Internet Explorer.

Now we have a blank canvas with which to work. It will not scroll and doesn't have
scroll bars.

‡ Step 2

Here there's not much to see except a blank, gray window.




Step 3

Placing the HEADER


                                                                                            4
We can easily add the header to our page as follows:

(X)HTML

<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.

Style

#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.


                                                                                            5
‡ Step 3




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.

Step 4

Placing the FOOTER

The footer is added in the same way as the header but fixed to the bottom of the browser
window.

(X)HTML

<body>

<div id="header">
<h1>This is the HEADER area</h1>


                                                                                           6
<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.

Style

#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.

‡ Step 4




                                                                                            7
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.

Step 5

Placing the CONTENTS

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.


                                                                                               8
(X)HTML

<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.

The style for NON INTERNET EXPLORER BROWSERS

#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.




                                                                                              9
‡ Step 5




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.

Step 6

The style for INTERNET EXPLORER BROWSERS

/* for internet explorer */

* html body {
  padding:120px 0 50px 0;
  }

* html #contents {
  height:100%;
  width:100%;
  }



                                                                                         10
* 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.

‡ Step 6




                                                                                          11
If you have Internet Explorer you will see the text content displayed correctly.

Step 7

Seeing the scroll bars

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.

(X)HTML

<body>

<div id="header">
<h1>This is the HEADER area</h1>
<h2>Resize me to see the scroll bars.</h2>
</div>


                                                                                             12
<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.

Style

p {width:250px;}

Fix the width of the paragraphs to 250px so that the text should extend below the contents
area.




                                                                                       13
‡ Step 7




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.




                                                                                             14
Conclusion

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.

‡ Demonstration page




About the Author

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/



                                                                                         15

								
To top