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.
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.
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.
|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.
We realize that eight designs are a little overkill, but we did it for demonstration purposes.
The Body Tag
<body onload= "VariableHTML()" onresize= "showWidth()">
<b id=widthOfPage> 00 </b>