BitWare

PapaGeek

A quick demo of how Variable HTML works.

The following table demonstrates the interaction between the CSS coding and the stylesheets that are activated by Variable HTML as you change the width of your browser window. Note how the #ID directives change portions of the table to red while the .class directives change the primary content between one and two columns.

td # ads td
#
ad
sp
div # top nav
div # sub nav
td
#
toc
sp
td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td
#
ad
sp
div # top nav
div # sub nav
td
#
toc
sp
td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td
#
ad
sp
div # top nav
div # sub nav
td
#
toc
sp
td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td
#
ad
sp
div # top nav
div # sub nav
td
#
toc
sp
td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td
#
ad
sp
div # top nav
div # sub nav
td
#
toc
sp
td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td
#
ad
sp
div # top nav
div # sub nav
td
#
toc
sp
td # toc
div # alt ads
div # content
div . two col
div . col 1   div . col 2
td # ads td
#
ad
sp
div # top nav
div # sub nav
td
#
toc
sp
td # toc
div # alt ads
div # content
div . two col
div . col 1   div . col 2
td # ads td
#
ad
sp
div # top nav
div # sub nav
td
#
toc
sp
td # toc
div # alt ads
div # content
div . two col
div . col 1   div . col 2
td # ads td
#
ad
sp
div # top nav
div # sub nav
td
#
toc
sp
td # toc
div # alt ads
div # content
div . two col
div . col 1   div . col 2

Your browser window is currently 00 pixels wide. The following CSS directives are controlling the design of the page:

   File: one.css
#ads    {display: none;}
#adsp   {display: none;}
#tocsp  {display: none;}
#toc    {display: none;}
   File: one.css
#ads    {display: none;}
#adsp   {display: none;}
#tocsp  {display: none;}
#toc    {display: none;}
   File: one.css
#ads    {display: none;}
#adsp   {display: none;}
#tocsp  {display: none;}
#toc    {display: none;}
   File: onenav.css
#ads    {display: none;}
#adsp   {display: none;}
#topnav {display: none;}
#subnav {display: none;}
   File: adsonenav.css
#topnav {display: none;}
#subnav {display: none;}
#altads {display: none;}
   File: twonav.css
#ads    {display: none;}
#adsp   {display: none;}
#topnav {display: none;}
#subnav {display: none;}
.col1 {float:left; width:48%;}
.col2 {float:right; width:48%;}
.twocol {clear:both; width:100%;}
   File: adstwonav.css
#altads {display: none;}
#topnav {display: none;}
#subnav {display: none;}
.col1 {float:left; width:48%;}
.col2 {float:right; width:48%;}
.twocol {clear:both; width:100%;}
   File: adstwonav.css
#altads {display: none;}
#topnav {display: none;}
#subnav {display: none;}
.col1 {float:left; width:48%;}
.col2 {float:right; width:48%;}
.twocol {clear:both; width:100%;}
   File: w7.css
#framework {width: 1700px;
            margin-left: auto;
            margin-right: auto;
            align: center;
            }
   File: showall.css
.col1 {float:left; width:48%;}
.col2 {float:right; width:48%;}
.twocol {clear:both; width:100%;}

You have manually forced this page to use style w9. You are now seeing all of the components that make up this Variable HTML page. The showall.css file is designed not to hide any of the components while splitting the content into two columns.

Variable HTML selected style w7, the widest design, to display the page at this width. Style w7 imports the same adstwonav.css file as style w6 to display advertisements on the left, two columns of content in the center and navigation on the right. Also, since we decided to limit the overall design width of our site to 1700 pixels to avoid extremely long lines for the sake of readability, we have stretched the book design to the edges of the browser window and limited the content area to 1700 pixels centered on the page. NOTE: The CSS file includes both the deprecated align center and the current margins auto method for centering the content so the page will function properly on older and newer browsers. "The nice thing about standards is that you have so many to choose from."

Variable HTML selected style w6 to display the page at this width. Style w6 imports the adstwonav.css file which was designed for larger monitor displays. The browser is wide enough to display advertisements on the left, content in the center and navigation on the right. It is also wide enough to use CSS positioning commands to split the content into two columns.

Variable HTML selected style w5 to display the page at this width. The CSS coding eliminates the separate column for the advertisements and moves them under the navigation. We tested Internet Explorer, Firefox, and Chrome on a 1024 x 768 monitor and the width of each browser window was 1003 pixels plus a vertical scroll bar. Style w5 is supported down to a browser width of 1002 pixels. This is our default design for the less than 5% of visitors who have JavaScript turned off.

Variable HTML selected style w4 to display the page at this width. As the browser width continued to decrease the two columns had the same words per line problem again, but switching to single column made the lines too long for optimum readability so we moved the advertisements back into their own column again.

Variable HTML selected style w3 to display the page at this width. The page is now so narrow that we had to move the advertisements back under the table of content to increase the words per line.

Variable HTML selected style w2 to display the page at this width. The page is now so narrow that we cannot afford a separate column for the navigation so we moved it to the top of the page.

Variable HTML selected style w1 to display the page at this width. As a last ditch effort we made the book design smaller so we could fit more content on each line.

Variable HTML selected style w0 to display the page at this width. OK, we give up! There is nothing left to do. The page is just too small for a book design or anything else. But the page is still readable on an extremely narrow browser window. Can you say that about any of the other website that you have visited!

Use this link to Display All of the components that make up this VariableHTML page.


How you design your CSS files is your personal preference. Each of our base style sheets consists of a series of @import rules to simplify the coding. This allows each imported stylesheet to define one specific feature. These features can then be combined in unique ways to produce the various page designs.

Base
Style Sheet
Break Point
Upper Limits
Book Design Screen
Style
Navigate Variable
Design
w0 380   screen topnav one
w1 480 book3 screen topnav one
w2 640 book screen topnav one
w3 800 book screen toc onenav
w4 1002 book screen toc adsonenav
w5 1215 book screen toc twonav
w6 1700 book screen toc adstwonav
w7 0 book screen toc adstwonav
Max width 1700 centered in the book

If we later decide to change the appearance of our top navigation, all we have to do is change one stylesheet and it will automatically change the navigation on the first three designs.

  • The first three stylesheets all use the one column design with top navigation. They change the book design as the page gets smaller.
  • The next four designs are all use the side navigation and change the location of the advertisements and the number of columns based on the width of the page.
  • Monitors are getting larger and you even can stretch a page across multiple monitors. There has to be a limit on the width of your largest design. The last stylesheet sets our limit at 1700 pixels.

We realize that eight designs are a little overkill, but we did it for demonstration purposes.

Table of Content

BitWare

PapaGeek

Variable HTML website, maintained with MySSI    
Copyright © 2011, BitWare Solutions