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