Start of Content
(More information on the alternative stylesheets. Note: using the javascript style buttons doesn't affect the alert above)
'Content' Element
Introduction
I've noticed that many websites tend to be over-complicated, non-intuitive, and definitely not user-friendly. Some of the best are the ones that foresake flashy graphics and animations and concentrate on providing information and links. Here's a couple of examples of the best (in my opinion!) - www.friesian.com, and Wikipedia. Having said that, there are also many sites with very good graphical styles, such as the BBC News site. I've also tried my hand at this with my own site, and a site for some friends. This experience has got me thinking how to get the best of both worlds. Simple: Use HTML and CSS as they are intended to be used; XHTML to mark up the document in a logical, structural, contextual manner; CSS to provide presentation of this marked up information. One obvious upshot of this is that there should be no markup in the HTML purely for presentation (so drop shadows are probably out).
Page Structure
This page is an attempt at a cross-browser template for a website.The main structure consists of six block-level elements (I've used divs):
- A pagewrapper element: This provides a container for everything else. This container can fill the body element, or be positioned within it (e.g. centered). There shouldn't really be anything in the body except for this, and the only things within it should be the five elements below. Everything else should be within them.
- A header element: For all those bits you want to group as a banner across the top
- A navigation element: Your main navigation links
- A content element: This is where you put the main stuff.
- An advertisements element: For miscellaneous stuff
- A footer element: For all those copyright notices and legal stuff you want to put at the very bottom of the page.
Alternative Styles / CSS Files
(To view the source for any stylesheet use the link alongside the relevant heading below)
If your browser allows the selection of alternative stylesheets try viewing this page with them - you'll be amazed at how different it looks.
Alternatively, different styles can be applied with javascript (but this doesn't reset styles to the browser's default before applying a new set of styles. These buttons may not reflect what's in the stylesheets):
Selecting Alternate Stylesheets
To use alternate stylesheets in Firefox select "View>Page Style". In Opera - "View>Style". In IE: download my external stylesheet to your PC. then select Tools > Internet Options, select the /General\ tab, click the [Accessibility] button, check the 'Format documents using my stylesheet', and select the stylesheet you've downloaded. Easy! (And don't forget to undo this once you've finished viewing my site)
Default Page Style (style0.css source / style0-ie-lt-7.css source)
The default page style is not very pretty. It's supposed to look like everythings written on a sheet of blue perspex with bevelled edges, held over a sandy beach. It should work around some common cross-browser (i.e. IE!) problems. The problems addressed include the box-model and lack of support for transparent PNGs.
The idea for this stylesheet is from Eric Meyer's complex spiral demo, and the IE workaround is based on Lloyd Dalton's cross-browser transparent backgrounds. See my notes on transparent PNGs for more details. (Note: If you're using IE check that all the links on this page work because the semi-transparent background, or more accurately Microsoft's AlphaImageLoader filter, could bugger them up!)
Alternative Stylesheet (petew_rtw.css source)
A very basic stylesheet used for other pages on this site, at least until I sort things out.
Alternative Stylesheet (style1.css source)
Nothing yet.
Alternative Stylesheet (style2.css source)
Nothing yet.
Alternative Stylesheet (style3.css source)
Nothing yet.
Alternative Stylesheet (style4.css source)
Nothing yet.
Alternative Stylesheet (style5.css source)
Nothing yet.
Alternative Stylesheet (style6.css source)
Nothing yet.
BBC News Style (style7.css source)
An attempt to create a similar appearance to the BBC News website. Note that the main page elements all floated. The ads, content and navigation elements are all floated left, and the displayed order of the navigation and content elements is reversed by making them relatively positioned and offsetting their left edges. More work needs to be done to convert the list in the head element into a set of tabs (would be more relevant if the links were other pages on this site - maybe a new tabs element?), and to sort out the footer
Dark And Cool Style (style8.css source)
This is a nice one, at least in Firefox/Opera (and probably most browsers except IE, with the navigation element based on Eric Meyer's pure CSS menus and the colour scheme and layout based on his pure CSS popups page.
End of content
