RuthsarianLayouts

These are layouts that have grown a bit old and perhaps aren't the best choice for a layout. However some of the exercises and lessons to be learned by reviewing these layouts may prove useful. They remain for use as a learning tool and not for use as a website layout.

Skidoo Too : Deprecated
A remake of the original skidoo layout that has the middle column appear first in the source. Only one stylesheet is used. The layout is in 3 columns but can easily be converted into 2 columns by using the enhancement stylesheet found in the original skidoo.
Highlights:
  • No Tables
  • Source Ordered
  • Degrades cleanly in older browsers such as NN4 and IE4
  • Horizontal and Vertical navigational elements based on unordered lists
[ Download Skidoo Too ]
Skidoo : 2 or 3 Column w/Background Colors : Deprecated
Masthead, 2 or3 columns w/background colors and footer.
A three column CSS-based layout that allows for separate background colors for each column. This layout will degrade in version 4 and under browsers but retains the logical structure.
Highlights:
  • No Tables
  • Degrades cleanly in older browsers such as NN4 and IE4
  • Horizontal and Vertical navigational elements based on unordered lists
  • Several demos available
[ Download Skidoo ]
Two Columns With Footer - v5 : Deprecated
Masthead and 2 columns (menu and content) and footer.
This one will degrade acceptably, while keeping the two-column format, under version 4 browsers. Compatibility is foremost in the design of this layout.
Highlights:
  • No Tables
  • No JavaScript
  • Netscape 4 & IE4 Compatible
  • Horizontal and Vertical navigational elements based on unordered lists
Previous versions available here
Two Columns With CSS-Defined Background Colors - v3 BETA : Deprecated
Two column layout where each column has its own background color that runs the height of the window regardless of content size or which column is taller. The background colors are defined with CSS and no images are used.
Highlights:
  • No Tables
  • No JavaScript
  • No Images
  • Columns have CSS-defined background colors
Version one was a first attempt at using the fixed positioning hack for IE.

Version two has the right-hand column first in the document flow. This means that information is displayed first in non-CSS browsers.
MBar - v2 : Deprecated
Horizontal navigational element
A CSS version of an old Flash-based navigation element found on Macromedia's website. Version 2 is updated to use anchor tags rather than rely on :hover pseudoclass support for non-anchor objects. This update adds greater compatibility and really turns this into a viable option for your website.
Highlights:
  • No Tables
  • No Flash
Three Columns With Footer - v2 : Deprecated
No tables here. All CSS. Three columns, fixed-width for left and right columns with a fluid center. Variable height masthead and footer. Fairly compatible and degrades okay in version 4 browsers. Borders don't carry if certain columns are longer than others. Needs some work to get better compatibility.
Highlights:
  • Degrades okay in version 4 browsers
  • No JavaScript
  • No Tables
Version one is still available, although it uses tables to achieve a more compatible layout.