BitWareSolutions

A quick demo of how Variable HTML™ works.

The use of tables vs. CSS positioning to construct the page layout is a personal preference. Use whichever you are most comfortable with. Variable HTML™ will work the same way with either design methodology.

The following table demonstrates the interaction between the HTML coding and the stylesheets as they are activated by the Variable HTML™ script when you change the width of your browser window.

Note how the #ID directives change portions of the table to red as they are hidden from view while the .class directives change the primary content between one and two columns.

Your browser window is currently 00 pixels wide.

W0 W1 W2 W3 W4 W5 W6 W7 W8 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
br 00 00 00 00 00 00 00 00 0  
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1
div . col 2
td
#
toc
sp
td # toc

div # alt ads
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1
div . col 2
td
#
toc
sp
td # toc

div # alt ads
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1
div . col 2
td
#
toc
sp
td # toc

div # alt ads
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1
div . col 2
td
#
toc
sp
td # toc

div # alt ads
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1
div . col 2
td
#
toc
sp
td # toc

div # alt ads
 
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1       div . col 2
td
#
toc
sp
td # toc

div # alt ads
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1       div . col 2
td
#
toc
sp
td # toc

div # alt ads
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1       div . col 2
td
#
toc
sp
td # toc

div # alt ads
td # credits
td # book bottom - - - col span = 3
table # framework (1,700 pixels)         td # book top - - - col span = 3 wooden
desk
background
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1       div . col 2
td
#
toc
sp
td # toc

div # alt ads
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
td # ads td
#
ad
sp
div # top nav
div # sub nav
div # content
div . two col
div . col 1       div . col 2
td
#
toc
sp
td # toc

div # alt ads
td # credits
td # book bottom - - - col span = 3

Note that the first two lines of this table are all clickable "JavaScript" links. They do not take you to new pages; they merely communicate with the Variable HTML™ script to interactively change the appearance of this page . . . so, let's play!

The first line highlights which stylesheet is currently active. The second line tells you the transition points at which Variable HTML™ will automatically change between styles. Click on the different style links and see how the design table and the page itself react. You can also change the actual width of your browser window and the same changes will occur automatically as you cross each transition point.

The second line of links will allow you to modify the internal breakpoint. Just click on any breakpoint and it will change to the width displayed above the table as long as that change does not change the numeric order of the breakpoints. In other words, you canít set the breakpoint to 600, 900, 800, because the 900 and 800 are out of numeric order. You can turn off a style by changing both breakpoints under that style to the same value.

All of your changes will remain in effect until you refresh the page.

BitWare

PapaGeek

Pet Wellness

CMM Services

How To Fix Social Serurity