demos and tests…

…collection…

old and new, and even some obsolete…

I create demos and/or test pages whenever I feel like exploring or demonstrating a method or feature, and I'll add them to the list below if I see a need.

Although I delete the really old ones from time to time, there will still be some pretty obsolete ones around. I keep a few of the older and less useful ones on-line, as stepping-stones into the future.

Time and progress (and even some regress) take its toll on every solution and method ever proposed and/or used in web design.
Consequently: all listed demos and tests are delivered as is, with no guarantee for usefulness in a real-world scenario.

sincerely 

Hageland 27.nov.2007
last updated: 19.feb.2009

Contents…

using site-layout as playground:

1. play #1 - demo (2005) note: [1]
2. play #2 - demo (2005) note: [1]
3. play #3 - demo (2005) note: [1]
4. play #4 - demo (2005) note: [1]
5. play #5 - demo (2005) note: [1]
6. play #6 - demo (2005) note: [1]
7. play #7 - demo (2005) note: [1]

position fixed experiments:

• position: fixed in IE6 - article (2006)

1. position fixed in IE6 - test (2005) note: [2]
2. position fixed in IE6 - test (2005) note: [2]
3. position fixed in IE6 - test (2005) note: [2]
4. position fixed in IE6 - test (2005) note: [2]
5. flexible position fixed #1 - test (2005) note: [2]
6. flexible position fixed #2 - test (2005) note: [2]

mixed layouts:

1. elastic-fixed-elastic - test (2005)
2. fluid-fixed-fluid #1 - test (2005)
3. fluid-fixed-fluid #2 - test (2005)
4. fluid-fixed-fluid #3 - test (2007)
5. fluid-fixed-fluid #4 - demo (2007)
6. fluid-fixed-fluid #5 - demo (2007)
7. fluid-fixed-fluid #6 - demo (2007)
8. fluid-fixed-fluid #7 - test (2007)
9. fluid-fixed-fluid #8 - demo (2007)
10. indestructible #1 - demo (2006)
11. indestructible #2 - demo (2006)
12. indestructible #3 - test (2006)

CSS tables:

• equal height columns - article (2007)

1. CSS table #1 - test (2006)
2. CSS table #2 - test (2006)
3. CSS table #3 - test (2006)
4. CSS table #4 - test (2007)
5. CSS table #5 - test (2007)
6. CSS table based equal height clumns - demo (2007)
7. CSS table based equal height clumns in reverse - demo (2007)
8. multirow CSS table based equal height columns - demo (2007)
9. source-ordered CSS table based equal height columns - demo (2007)
10. complex CSS table - demo (2007)

Conditional Elastic

• min/max – making IE6 work - article (2006)

1. Conditional Elastic Layout #1 - demo (2006)
2. Conditional Elastic Layout #1 - test (2006)
3. Conditional Elastic Layout #2 - debugging Gecko - test (2006)
   1. Conditional Elastic #tp0 - demo (2006)
   2. Conditional Elastic #tp1 - demo (2006)
   3. Conditional Elastic #tp2 - demo (2006)
4. Multicolumn Conditional Elastic layout - basic - test (2006)
   1. Multicolumn Conditional Elastic layout - #1 - test (2006)
   2. Multicolumn Conditional Elastic layout - #2 - test (2006)
   3. Multicolumn Conditional Elastic layout - #3 - test (2006)
5. Elastic shapes - demo (2006)
   1. Elastic shapes - demo (2006)
   2. Elastic shapes - demo (2006)
6. Conditional Liquid #tp3 - demo (2006)

navigation-bars with rounded corners:

1. navigation-bar above - (2006)
2. navigation-bar above - with “sprites” - (2006)
3. navigation-bar below - (2006)

100% tall web pages:

• The 100% tall web page - article (2007)

1. 100% tall – basic - demo (2007)
2. 100% tall but never taller - demo (2007)
3. 100% tall with CSS table - demo (2007)
4. 96% tall with margins - demo (2007)
5. 100% tall minus margins - demo (2007)

horizontally and vertically centered:

• fully centered across browser-land - article (2007)

1. demo #1 - demo (2007)
2. demo #2 - demo (2007)
3. demo #3 - demo (2007)
4. demo #4 - demo (2007)

float margins:

• hide and seek - article (2005)

1. how margins affect floats and their surroundings - demo (2007)

IE/win bug/fix:

1. fix for IE/win's “background-overflow on fieldset with legend” bug - demo (2007)
2. resizing text in pixels in IE/win - demo (2007)
3. positioning the list-bullet in IE/win - demo (2007)

image scaling in browsers:

• image-scaling in browsers is pretty unreliable - article (2007)

1. the original - unscaled - version - demo (2007)
2. the half-size scaled version - demo (2007)
3. the quarter-size scaled version - demo (2007)
4. the max-width scaling version - demo (2007)
5. the 'em' scaled version - demo (2007)
6. too wide images can be handled by hiding the overflow - demo (2007)
7. too wide images can be handled by scrolling - demo (2007)

tabular line-up:

1. float #1 - test (2007)
2. float #2 - test (2007)
3. elastic - test (2007)

text leaders:

1. demo #1 - demo (2007)
2. demo #2 - demo (2007)

CSS based multilevel menus:

1. fly-out/drop down - demo (2007)
2. drop down/fly-out - demo (2007)
3. compact 5-level drop down/fly-out - demo (2008)

Slideshow:

1. javascript enhanced CSS slideshow - demo (2007) final, I think
2. javascript enhanced CSS slideshow - test (2007)
3. pure CSS slideshow #1 - test (2007)
4. pure CSS slideshow #2 - test (2007)
5. pure CSS slideshow #3 - test (2007)
6. pure CSS slideshow #4 - test (2007)

the present site-layout exposed:

• the basic layout used on this site - article (2007)

1. main containers exposed - demo (2007)
2. outer containers exposed - demo (2007)
3. inner containers exposed - demo (2007)
4. undressed and uncluttered - demo (2007)

creating shapes with Javascript & CSS:

Added to this list in october 2008, but the demos are old and the method even older. I may write an article about it one day.

1. Rounded Corners and other shapes – #1 - demo (2006)
2. Rounded Corners and other shapes – #2 - demo (2006)
3. Rounded Corners and other shapes – #3 - demo (2006)
4. Elastic shapes - demo (2006)
   1. Elastic shapes - demo (2006)
   2. Elastic shapes - demo (2006)
5. Rounded Corners and other shapes – the original non-script method - demo

auto-centering of absolute positioned elements:

First created: 17.feb.2009.
Opera, Safari, Firefox, Konqueror, Chrome, IE8rc1 are all doing fine. IE7, IE6 and older can't handle such centering.

1. absolute centering - basic version
2. absolute centering - variant #2

notes…

[1] IE/win fixes are not updated for IE7.

[2] IE6 fixes are for quirks mode.

[3] IE7 may hang - lock up.