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).
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:
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)
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 Ben@BenMeadowcroft.com. 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).
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.