The Philosopher's Toolbox

Project updates for my collection of websites

Hi there. Not seeing this page in a two-column layout? Perhaps your browser doesn't support web standards (or you've turned style sheets off). Don't worry. The content of this page is accessible to any browser or internet device. However, to get the full 2-D effect simply turn style sheets on, or upgrade your old browser to one which supports web standards. For more information and quick links to browswer upgrades, just click here.

The Template Design Lab

Welcome to my template design lab -- a handy collection of web design resources, and my repository for template designs in progress. The templates listed below are development versions only, published for educational purposes. I retain the copyright. They may be used (in whole or in part) for non-commercial, non-profit use only, provided (i) that you retain the copyright notice and include an acknowledgement in your source code, and (ii) send me an email letting me know where they are being used (for my scrapbook!). Did I mention that commercial or for-profit use is not permitted? Good. You can never be too redundant.

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).


© Copyright 2003 Kevin Dancy. Click here to send an email to the editor of this weblog.
Last update: 5/29/03; 3:22:57 AM.

Validate this page to XHTML 1.0.
Validate the style sheet.