How to Build a CSS Web Site » Summary

Tested No-Hacks Design

The layout and design you have seen being built in this tutorial has been tested in Internet Explorer 5, 6 and 7, Firefox 2 and 3, Opera 9, Safari 3, as well as a host of other Windows browsers. It should also work fine on Mac browsers to include Safari. This design uses no hacks, no special style sheets, and actually lets the browser do most of the layout work. I tried to keep it simple. There is nothing about this layout that should impede accessibility to devices like screen readers and text browsers. Due to it being a fixed width layout, though, users of hand held devices may have difficulty. For hand held device users you may want to create a separate style sheet for the “handheld” media type — media="handheld" in which you’d add no wide background imagery (header and footer) and you’d also want to remove the wrapper, jump link, header, content, sidebar, and footer widths.

Tutorial Assets

To help you, I will again offer the resources used in this tutorial by way of the links below:

The Globally Used Markup File

Extensible HyperText Markup Language (XHTML) File »

The Cascading Style Sheet Files

Cascading Style Sheet 1 »

Cascading Style Sheet 2 »

Cascading Style Sheet 3 »

Cascading Style Sheet 4 »

Cascading Style Sheet 5 »

Cascading Style Sheet 6 »

Cascading Style Sheet 7 »

Cascading Style Sheet 8 »

Cascading Style Sheet 9 »

Cascading Style Sheet 10 »

Cascading Style Sheet 11 »

Cascading Style Sheet 12 »

Cascading Style Sheet 13 »

Cascading Style Sheet 14 »

Cascading Style Sheet 15 »

Cascading Style Sheet 16 »

Cascading Style Sheet 17 »

Cascading Style Sheet 18 »

Cascading Style Sheet 19 »

Cascading Style Sheet 20 (Final) »

The Background Image Files

Wrapper Background »

Jump Links Background »

Masthead Background »

Navigation Links Background (static) »

Navigation Links Background (selected) »

Navigation Links Background (hover) »

Footer Background »

That’s It

Hopefully this was useful to you. If you want to use the Cascading Style Sheet for your own use you are welcome to do so, though providing a credit link on your site using this code would be most appreciated and really cool of you. Here’s the code:

 <p>Template by 
  <a href="http://green-beast.com/" title="Green-Beast.com">Mike Cherim</a>
 </p>
      

That said, it will be most beneficial for you to take from this tutorial knowledge only and apply it to a layout of your own making. Doing that will empower you. That’s it, school’s out.