Scalable Page Layout with Fixed Banner and Navigation Bar

Originally written on Thursday 6th January 2011

All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/splftnb/index.php and it reads as though you are viewing the actual page:

This page was my first stab at getting XHTML and CSS to work together and it has become the basic design for this site. My goal was to have a fixed top banner and left-hand navigation sidebar with a scrolling main content area, all in a scalable page. This sounds simple but it took me about a day to learn how to get it like this.

I'm sure there are lots of other ways of achieving these goals and probably more simply than I have done it. I am a total novice after all. Hopefully though my solution is pretty straightforward and the code fairly tidy. All formatting, both content and layout, is dealt with by the CSS stylesheet.

There are two files used to produce this page: index.php - the XHTML code for this page and rwa1.css - the stylesheet for this page. The stylesheet rwa1.css must reside 1 directory/folder up from index.php if you want to mess about with them or you can edit the reference that loads the CSS file in index.php.

It maybe that you cannot directly open files with the .php extension in your browser - if this is the case then you can download an older version of the files using the .htm extension instead. All files in the older version must reside in the same directory. Please see the My Sytsem page for information about running php on your system.

I'm going to assume that since you are reading this you have at least some basic knowledge of XHTML and CSS and how they realate to eachother. Most especially you will need to understand the use of class and id element identifiers. They are really the key to how the CSS affects the XHTML. If you don't understand this then you won't get the rest of it. There is a good explanation about both at W3.org.

OK, so now down to talking about the code. The key behind this page is using the stylesheet to manage the layout and keeping the XHTML organised into distinct div tags so that the content picks up the correct formatting from the stylesheet.

I'm not going to go into minute detail about how every value and attribute is set, I'd fall asleep doing it. Hopefully I will point out the key facts and you can work out the rest by mucking about with the code yourself. Take bits out, put bits in, move them around, change values and properties and see what happens. It's always easy to use comments to block sections of code and then easy to remove them too.

The head section is quite simple. It sets the character set to utf-8, sets the page title - this shows up in your browser as a tab-lable - and calls the stylesheet rwa1.css.

The body section is where all the action is. It contains 4 distinct div tags. Each one neatly contains all the content for a specific section on the page. The names are meaningful.

The first div is of id titlebar. This places a rectangle at the top of the screen with the page title which is also a link back to the Home page. There are several formatting properties set in the stylesheet for this. These are the three relevant lines:

#titlebar {position:fixed; top:0px; left:1%; 
 margin-top:5px; background:#FF0000; 
 width:98%;}
#titlebar a {color:#FFFFFF;} 
 /* fix title bar links to solid white */
#titlebar h1 {font:30px "Helvetica Bold", 
 sans-serif; text-align:center;} 
    

Briefly, this code fixes the bar at the top of the page, i.e. it will not scroll, sets the background colour, the link colour to solid white, regardless of state, and sets the font properties.

Next up is the navigation div. This places the sidebar at the left of the screen and the links inside it. The CSS is fairly similar to that for the titlebar. The only major difference is that the display property is set to block - this makes the links come out on separate lines with less code in the XHTML.

The contents div comes next. This is the section which contains all this text. The only feature of note here is the CSS property/value pair overflow:auto which tells the browser to add the scrollbar if it's needed. I ended up adding this pair to the navigation div too.

Finally there is one further div called pagelinks. This was just a test originally to see if I could get a scalable and scrollable box on the page. The idea of putting links to various parts of this page came later.

There's one more thing I want to mention about the CSS and it's to do with the scalability or dynamic re-sizing of the page. Play with the window size of the browser window you are using to view this page and you will notice that the sections dynamically re-size themselves as you do it. This is achieved by using percentage values for many of the values in the CSS code.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/splftnb/index.php and it reads as though you are viewing the actual page: