|
This table represents the HTML and CSS coding for all of the text
on this page. Change the width of your browser window. As Variable
HTML changes the active style sheet, display: none
directives hide the pink areas while css float and
clear position properties switch the 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 |
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;
}
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!
|