Template Info

Hi, this is a sample HTML document showing how to use the css templates I developed.

Credit where credit is due though, this layout is based on one of the freely available layouts at BlueRobot.com,
Is it a straight copy then? Actually no, there are a few modifications I made to it which I think make it a little better, (though not if you're viewing this page in IE3 or something I suspect:-).

The main enhancement has been the replacement of pixel sizing with em's.
Why's that a big deal? well it's not that big a deal really it just means that the width of the menu and the margin of the content are now resized relative the the text size (in browsers which support this), which I think gives it a better overall look. (if you're using IE for example select a different text size from the view menu to see what I mean).

What comes with all this stuff?

well you should have got the this (1) html document, (3) stylesheets and (3) graphics.

The HTML document you are reading shows how I structured my documents in a valid way to ensure that the stylesheets worked correctly.

The three stylesheets deal with three different aspects of the document:

style.css

This stylesheet handles the font style, colours (yes that's how we spell it in england), background images and the like.

screenlayout.css

This handles the layout of the page on the screen, note that in the HTML version I use the @import rule to hide this from Netscape 4.x.

printlayout.css

This layout handles the layout of the page when it is printed. The sidebar stuff is hidden and the margins are slightly different from the screen layout.

The three graphics are two menu backgrounds and one page background.
There is nothing special here, but I like the fact that the two menu backgrounds are semi transparent gif's so that when viewed on a browser like IE6, NS6 or Opera 6 (all tested on Windows PC) you get a cool filtered effect on the image used for the page background (I was pretty pleased when I first thought of trying it and it worked!).

+ +

I used 16 by 16 pixel images rather than 2 by 2 images for the menus as these render faster on slower computers (like I used to have! I know from experience)

Well that's about it

Feel free to use and modify anything I have supplied in the zip package. Stuff that is on my website but not in the zip is not being offered freely by myself so please don't copy it. If you have any comments to make about these stylesheets or my website feel free to email me [email protected]. If you do use this stuff on your website I would appreciate a link back to my site if appropropiate (and if you consider my site worth linking back to!), though this is not required or anything.

Last minute note for IE6 (and probably the others IE's as well) make sure that the names of the menu items are not too long, or that you adjust the sidebar width accordingly (if an item is too long e.g. superfragiliciousexpiallidociuos or something, then the menu width will take the width of that word, so make sure your menu items are relatively short, or have spaces in them, so they can be split onto more than one line).

If you're interested in learning about how one site dealt with the move from table based layouts to the style sheet method read about the process one site made towards that goal. alistapart.com

This web site, webstandards.org, explains the role webstandards have to play in all in making the web more accessible for everyone.

This was the first site to link to this resource (of which I am aware) www.web-building.com so I am going to include this site in here as well.