Please Note: the templates listed below have not been properly tested. Use them at your own risk. If you find any bugs, etc., please let me know by email. But keep in mind that I don't provide technical support.
Project No. 1: Redesign the classic toolbox pages.
- Here's the original.
- Version 1.0: Forward compatible design. Converted the table-based layout to xhtml and css. This version floats the outside columns above the middle one.
- Version 2.0: This version is basically the same as Version 1.0, except that he left column is given a fixed width to prevent overlap as extremely (ok, insanely) small window sizes.
- Version 2.0b: Same as Version 2.0, except that all the links in the left column were made block level elements to remove the line breaks, and make the unstyled page a little more legible. Benefits: The unstyled page is a little more reader friendly.
- Version 3.0: Forward compatible design. Converted the table-based layout to xhtml and css. This version uses two nested floats to produce the left and middle columns. Benefits: If you turn off style sheets the content will appear right under the title block; navigation and sidebars are pushed to the bottom of the page. This puts your main content front-and-center on pda's, screen reader's, etc.
- Version 3.0b: Same as above except that the left sidebar is given a fixed width. This puts the navigation ahead of the middle column on the unstyled page. Benefits: Despite what Mark says, it sometimes makes sense to put some navigation elements before your main content. After all, navigation is there for a reason: to help you make sense of a site, move through it intelligently, and find what you want quickly. Even those who use screen readers and pda's need that. Perhaps they need it even more than others, since they may not have the advantage of other visual clues wise designers use to communicate with readers. In this version, if you turn off style sheets the site navigation appears, then the title bar, then the section and subsection navigation, then the main column, then the left side bar.
- Version 5.0: This version uses float and absolute positioning to provide a layout which puts the primary content right after the title block on the unstyled page, while preserving the footer. Much simpler structure than in 3.0 and 3.0b. Works great, except in IE5.5 win, where it is a complete disaster.
- Version 6.0: This version floats the left and middle column without nesting. Works in IE 5.1 Mac, Mozilla 1.1 Mac, Netscape 6.2 Win, IE5 5/6 Win.
- Version 7.0: This is the final version. Structural html and css. The page content is divided according to importance into primary, seocndary and tertiary. The source is set out as follows: site navigation, title, section navigation, primary, secondary and tertiary content (including subsection navigation), and footer. The primary content (the middle column) floats left, with a wide left margin into which the tertiary content (the left column) is placed by means of position: absolute. The secondary content (the right column) belongs to the normal flow. (It's what the middle column floats over).