The Final Page

The bare essentials of the page I worked from Fixed Layout version 2

This one has a full height scroll bar, of the content div and works the same in all browsers and does not require IE to be in quirks mode.

This preumes that you have your Resources or Images folder in the same folder as the web pages them selves. This leads to the Line 
Background:url(Resources/picname.pictype)
In the current version mine are actually in images/

CSS - the html tag:

  html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#fff; /*color background - only works in IE */
font-size:85%; /*set default font size */
font-family:"trebuchet ms", tahoma, verdana, arial, sans-serif; /* set default font */
background:url(Images/jets.jpg) #E5F1FD;
background-position:-18px 0;
background-repeat: no-repeat;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}

CSS - the body tag:

  body {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
overflow:hidden; /*get rid of scroll bars in IE */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
}

This now gives a html / body size of 100% x 100% with no scroll bars on which we can place a header and footer using position absolute in the normal way. The header and footer will stay fixed because the body cannot scroll.

OK. now to tackle the content which must appear below the header, above the footer and scroll on overflow. As I changed the layout to fit in with Mac IE it has other changes from the page link to above and displays slightly differently in PC IE. The original code had the header and footer placed 18px away form the right. This is about the size of the scroll bars. This allowed for a full height scroll bar but it only scrolled the overflow on the content even though it's placing made it look like a normal scroll bar.

 
margin:0; /* No Margins */
top:0; /* Fix to top-left */
right:0px; /* Fix to Right */
display:block; /* type of display mode */
width:100%;/* reference to Width */
height:80px; /* nad height */
background:url(Resources/header.gif); /* pic and location */
background-repeat: no-repeat; /* number of repeats */
background-position: 50% 10px; /* where the pic goes */
font-size:1em; z-index:5; color:#fff; /* font size (to overide HTML size) and layer index plus background colour */
border-bottom: 1px solid;} /* a pretty border */

#head h1 /* This describe s the atributes of h1 for just the header */
{
font-size: 40px;
text-align: center;
color: #fff;
margin: 0;
padding: 20px 0px 0px 0px;
}

H2 and H3 for everwhere else on the page.

 
font: 120% georgia, times, "times new roman", serif;
font-weight: bold;
margin: 0 0 2px 0;}

h3 {color: #5B5E0E;
font: 106% georgia, times, "times new roman", serif;
font-weight: bold;
margin-top: 0;}

The #content div is set up as follows:

 #content {
overflow:auto; /* add scroll bars as necessary */
position:absolute; /* position absolutely */
padding: 10px 10px 10px 10px;
z-index:3; /* If required to cover any other divs */
top:82px; /* a value to miss the header */
bottom:105px; /* a value to miss the footer */
left:200px; /* a value to miss any navigation div */
right:0px; /* this will put the scroll bar at the right of the page */
background-image: url("Resources/grid.gif");
}

The key to the shading is the background pis to the content area.

To make it work in PC IE and then Mac IE the following have to be included.

 * html #content {overf;ow:auto;
height:55%; /* screen height */}
right: 0px; /* stops it going too far right in Mac IE */
}
*html #content{
/* \*/
overflow:auto;
height:80%;
width:75%;
/* */}

More magic hiding of in the way Mac IE deals with the above instruction to let the PC IE work in a similar way.

This now gives you a full height content div, but wih specified start point from top and left and instruction not to go beyond the bottom. BUT we need to avoid the header and footer when first viewed. So we add top and bottom 'padding'.
If we literally added padding-top and padding-bottom then the vertical scroll bar will move down the screen so instead we add a padding div at the top and bottom of our content.

This means that this div class object that is 100px tall is placed before and after the text in to the #content so that it will scroll down or up far enough to read it all.

 .pad2 {
display:block;
height:100px; /* height to miss header and footer */
}

You can now add the header and footer using position:absolute; with a suitable z-index such that it appears over the content div. When the content is scrolled it will disappear under the header / footer.

The z-index is 3 for the content and is the lowest number. The footer is set at 5 tomake it appear over the content which tend to display longer in Window IE. The Header is also a 5. The div the menu sits in is a 6 to make sure it sits or at least covers anything it pokes out over.

The menu is on the other example. The only difference here is that the background colour has been removed from it's normal position in the CSS and two others have been added. "transparent" is recognised as a colour., and is placed at the top level of the menu CSS. This shows the blue of the picture through it. A later CSS point has the background colour for the popouts. This is so you can read them when they pop out over the content area.

So there you have it !! Just three divs. Placement is crucial so an understanding of the way different browser display things like borders, margins and padding is helpful (or do what I do and use someone else's if it is on show and use it to create your own creation). It helps to have three or more browsers to check the page on. Access to a PC that is networked to your Site's folder is useful as well.

Ralph

Back to the web page journey