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
width |
Max |
Book |
Nav |
Cols |
Ads |
| oW3 |
|
large |
side |
two |
left |
| 1,225 |
| oW2 |
default |
large |
side |
two |
under |
| 1,060 |
| oW1 |
|
large |
side |
one |
under |
| 800 |
| 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
width |
Max |
Book |
Nav |
Cols |
Ads |
| W8 |
1700 |
large |
side |
two |
left |
| 1,700 |
| W7 |
|
large |
side |
two |
left |
| 1,225 |
| W6 |
|
large |
side |
two |
under |
| 1,131 |
| W5 |
default |
small |
side |
two |
under |
| 1,060 |
| W4 |
|
large |
side |
one |
left |
| 970 |
| W3 |
|
large |
side |
one |
under |
| 800 |
| W2 |
|
small |
side |
one |
under |
| 609 |
| W1 |
|
small |
top |
one |
none |
| 465 |
| 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.
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.
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>
|
