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
Back to ppbloch/index.htm home page.
NYC dental practice ofDemo Dentist, D.D.S., F.A.G.D.000 East 70th Street
|
Manhattan dentist conveniently located — just steps from historic, landmark Lenox Hill Post Office — on East 70th Street, between Second and Third Avenues. |
Perfection . . . one smile at a time. |
Did you know? |
|
Doctor Demo Dentist welcomes you. Visit his general and cosmetic dental practice for a free initial consultation.
|
|
|
Information |
Specials |
|
|
|
|
Back to Top of Page | Your computer shows today is
. |
Ahem, excuse us! If you can see this message, your browser is not CSS2 compliant. This site looks better in browsers that support Web standards.
Back to ppbloch/index.htm home page.
On May 7, 2006, we lamented: Aieee! The experts note that a list is the logical structure for navigation links. But we had 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.
<UL>, which is normally a vertical list, has to be made display:inline (and/or float:left) 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 12, 2006: Note that— since we're replicating a site (which has nested tables) in a cleaner, more-accessible CSS format —we likewise are using <TABLE> layout for positioning. The <TABLE><tr><td> may have impacted our CSS.
Of the many wonderful online sources, we mainly followed articles from http://www.alistapart.com/articles/taminglists/ on “Taming Lists” by Mark Newhouse and http://www.webreference.com/programming/css_style2/index.html CSS styling of lists by Stu Nicholls. Then a concise article by Jennifer Kyrnin http://webdesign.about.com/od/css/a/aa082304_2.htm on "Horizontal Navigation Lists" set us straight. [WebReference and About are “bad linkers” so you'll have to cut and paste those URLs.]
Originally structuring our style as #navbar ul {...} forced us to designate the <TD id="navbar">, instead of <UL id="navbar">.
#navbar { margin: auto; text-align: center; padding: 0; border: none; }
/* ==HORIZONTAL UL==*/
#navbar ul { display: inline; list-style-type: none; font: .9em/1.5em italic 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%; } /*==problem/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: #fc0; border: 3px inset #f00; }
#navbar ul li.here {
border: 3px inset #CC6600; list-style: circle; display: inline; cursor: default; }
/*==from web reference FOR IE ONLY. IE will expand 1px to fit menu.
Asterisk* hack width & padding to fix IE bug to get border spacing right==*/
* html #navbar {
display: inline-block; width: 1px; padding: 0 2px; }
* html #navbar ul li a {
display: inline-block; margin: 0 -2px; }
/*== Don't know what version this was for BUT does not work here!==*/
Changing our CSS to ul#navbar {...}, with element/selector preceding the id, alleviated this so we could designate <TD id="navbarContainer"> and <UL id="navbar">. Thus, the <LI> links did not spread across the full width of the <table><TD> cell. We also added ul#navbar li {float:left;}.
td#navbarContainer { margin: auto; text-align: center; padding: 0; border: none; }
/*==HORIZONTAL UL==*/
ul#navbar {
white-space: nowrap; margin: 0; padding: 0; border: 0; font: .85em/1.5em italic georgia, "times new roman", times, serif;
}
ul#navbar li {
float: left; display: inline; list-style: none; margin: 0; padding: 0; width: 6em; text-align: center;
}
ul#navbar li a, ul#navbar li a:link, ul#navbar li a:visited {
display: block; text-decoration: none; color: #000; background-color: #89a; border: 3px outset #fc0;
width: 100%; } /*==problem/Mac==*/
html>body ul#navbar li a {width: auto; } /*==child > selector hack FIX did not work == */
ul#navbar li a:hover, ul#navbar li a:active {
display: block; text-decoration: none; color: #89a; background-color: #fc0; border: 3px inset #f00;
}
We still have sticky points to solve here with our horizontal <UL><LI> navigation bar, but we're not giving up in defeat (yet).
AuntNiNi
http://www.auntnini.com
Back to ppbloch/index.htm home page.