How To Adjust Your Settings

This test page contains special coding that allows it to adapt to your browser width when the page is loaded or refreshed while not being responsive to any changes to the width you make while viewing the page. All of this special coding is explained in datail at the end of this page.

Your browser window is currently 00 pixels wide.

File page
Max Book Nav Cols Ads
oW3   large side two left
oW2 default large side two under
oW1   large side one under
oW0   none top one none

The green entries in this table represent the way we’d like our pages to appear when the visitor’s screen is large enough. The blue entries are what we are willing to settle for as the page gets smaller. And the red entries are our last resort. Hold your mouse over any entry to see how the CSS coding is modified to create each alternative design element.

File page
Max Book Nav Cols Ads
W8 1700 large side two left
W7   large side two left
W6   large side two under
W5 default small side two under
W4   large side one left
W3   large side one under
W2   small side one under
W1   small top one none
W0   none top one none

Show All Page Elements

Choose a design; change the width of your browser window until you feel that design is no longer the best fit and then choose the next or another design until you find one you do like. Take note of the page width in the yellow frame at the top of the table; this is the transition point where you would want your pages to switch to the next CSS file.

Since this page is designed NOT to be responsive after it has been displayed or refreshed, you can use the CSS file links in the first column of the table to force the page to use any of our pre-defined page templates regardless of the current page width. The yellow entry on the page width line will interactively show you the current width of your browser window.

@import url("book.css");
@import url("content.css");
@import url("topnav.css");
@import url("toc.css");
@import url("columns_2.css");
@import url("hide_ads.css");
@import url("hide_topnav.css");

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.

Style Sheet
Break Point
Upper Limits
Book Design Screen
Navigate Variable
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.

Special Coding

The Body Tag

<body onload= "VariableHTML()" onresize= "showWidth()">

<b id=widthOfPage> 00 </b>

<A HREF= "javascript:setVar('W',8);"> W8</A>

<a href= "javascript:setWid(99);"> Show All Page Elements</a>

A-         A+

Table of Content

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