Make your own free website on Tripod.com

Demo of what can (and should) be accomplished by implementing CSS (Cascading Style Sheets). View and compare source code of this CSS-styled page with that of http://www.wsdds.com and you'll see what we mean by Web-standards-compliant design. Today's Web designers are obligated to "think accessibility." We must consider, for instance, what someone using a text reader has to endure wading through excessive garbage code within <BODY> tags </BODY> — which content (as opposed to that in <HEAD> section) is what viewers (and text readers) see.

AuntNiNi
http://www.auntnini.com


#navbar { margin: auto; text-align: center; padding: 0; border: none; list-style-type: none; display: inline; }
/* HORIZONTAL UL */
#navbar ul {
display: inline; list-style-type: none; font-size: .9em; line-height: 1.5em; font-style: italic;
font-family: "apple chancery", "goudy old style", garamond, baskerville, "century schoolbook", goudy, georgia, "times new roman", times, serif;
}
#navbar ul li {
display: inline; list-style: none; white-space: nowrap; margin: 2px; padding: 2px; width: 6em; }

#navbar ul li a, #navbar ul li a:link, #navbar ul li a:visited {
display: block; text-decoration: none; color: #000; background-color: #8899aa; border: 3px outset #fc0;
width: 100%; } /* == problemw/Mac == */
html>body .button li a {width: auto; } /* == child selector hack >
/* == FIX did not work == */

#navbar ul li a:hover, #navbar ul li a:active {
display: block; text-decoration: none; color: #8899aa; background-color: #ffcc00; border: 3px inset #f00;
}
#navbar ul li.here {
border: 3px inset #CC6600; list-style: circle; display: inline; cursor: default;
}
/* == from webreference FOR IE ONLY. IE will expand 1px to fit menu width. & padding to fix IE bug to get border spacing right ==
* html #navbar {
display: inline-block; width: 1px; padding: 0 2px; }
* html #navbar ul lil a {
display: inline-block; margin: 0 -2px; }
== BUT MESSES EVERTHING UP! == */

<tr>
<td height="50" align="center" id="navbar">
<ul>
<li id="here"><a href=#nogo">home</a></li> |
<li id="firstvisit"><a href="firstvisit.asp">first visit</a></li> |
<li id="location"><a href="location.asp">location</a></li> |
<li id="services"><a href="services.asp">services</a></li> |
<li id="about"><a href="about.asp">credentials</a></li> |
<li id="contact"><a href="contact.asp">contact us</a></li> |
<li id="finances"><a href="finances.asp">finances</a></li>
</ul>

</td>
</tr>

Aieee! The experts note that a list is the logical structure for navigation links. But, as you can see, we've got a problem trying to make our <UL> unordered list and its <LI> list items into a neat, centered horizontal row of CSS-styled navigation buttons — all the same width, without spreading across the full span of the row.

The <UL>, which is normally a vertical list, has to be made display:inline (or float:left, which didn't work) so it will be horizontal. Then, to make the link buttons the same designated width, the <UL><LI> links (a:link, a:visited, a:hover) are styled display:block.

It looked just right in offline editing mode, but, in reality, each link button spread the full span of the row. We've been trying all sorts of "hack" fixes. In defeat, we might have to resort to text/but images or break "navbar" area up into separate <table> <td> cells.

CSS-styling has been proclaimed to be the logical and preferred markup, but nobody promised that it was easy.

May 7, 2006