NOTE: Because your web browser does not support web standards, you will only
be able to view the content in a linearized format. To use this site to it's
fullest, you may wish to upgrade to a browser that supports web standards.
Additional Resources
Cascading Style Sheet (CSS) techniques for generating content - WAI recommendation.
Using style sheet positioning and markup to transform gracefully - WAI recommendation.
View WAI checkpoint 6.1 - Organize documents so they may be read without style sheets.
Use the W3C CSS Validator - Test a stylesheet with the W3C CSS Validator.
Priority 1 Item 3
Use style sheets to control presentation while ensuring that all
content is accessible in user agents that do onot support or do
not uflly support style sheets.
How the information reads with styles off.
The HTML
<head><style type="text/css">
.menu1 { position: absolute; top: 3em; left: 0em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.menu2 { position: absolute; top: 3em; left: 10em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.item1 { position: absolute; top: 7em; left: 0em; margin: 0px
}
.item2 { position: absolute; top: 8em; left: 0em; margin: 0px
}
.item3 { position: absolute; top: 9em; left: 0em; margin: 0px
}
.item4 { position: absolute; top: 7em; left: 14em; margin: 0px
}
.item5 { position: absolute; top: 8em; left: 14em; margin: 0px
}
#box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</span>
<dd class="item5">Wisconsin</span>
</dt>
</dl>
</div>
</body>
How the information reads with styles off.
Telephones Computers Portable MP3 Players Wisconsin Idaho
The HTML
<head><style type="text/css">
.menu1 { position: absolute; top: 3em; left: 0em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.menu2 { position: absolute; top: 3em; left: 10em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.item1 { position: absolute; top: 7em; left: 0em; margin: 0px
}
.item2 { position: absolute; top: 8em; left: 0em; margin: 0px
}
.item3 { position: absolute; top: 9em; left: 0em; margin: 0px
}
.item4 { position: absolute; top: 7em; left: 14em; margin: 0px
}
.item5 { position: absolute; top: 8em; left: 14em; margin: 0px
}
#box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div class="box">
<span class="menu1">Products</span>
<span class="menu2">Locations</span>
<span class="item1">Telephones</span>
<span class="item2">Computers</span>
<span class="item3">Portable MP3 Players</span>
<span class="item5">Wisconsin</span>
<span class="item4">Idaho</span>
</div>
</body>