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

Skip Ads


Skip navigation.


Perfection . . . one smile at a time.

Did you know?

image holder

Doctor Demo Dentist welcomes you. Visit his general and cosmetic dental practice for a free initial consultation.

  • Located in the heart of New York City.
  • Quality professional and caring treatment provided.
  • We cater to the anxious patient.
  • All insurances are accepted.
  • Open Monday – Friday, including evenings.
  • Call (212) 000-0000 for an appointment.
Medical Issues
Did you know that certain medical conditions affect dental treatment? Find out which ones affect you. More »
Post op. Instructions
All the instructions you will need after an oral surgical procedure. These instructions will help you heal faster. More »
Dental Solutions
Find out all of the existing procedures that can be done to correct a condition or to enhance your smile. More »
Migraine
Here we show you some common causes and treatments for migraine headaches. More »

Information

Specials

For your protection
This section is dedicated to the law and the steps taken to assure your rights. More »
Technology at work
How we use advancements in technology to treat our patients. More »
Resources
A list of websites dedicated to providing information regarding oral health. More »
News and Special Offers
Find out about the latest news regarding Dentistry and your health plus check out our limited time special offers.
Testimonials
Find out what some of our patients thoughts are regarding their experience with us.
Aesthetics
This section shows how to bring out the best within your smile. Improve the visual appeal of your mouth inside and out.
Back to Top of Page  

Your computer shows today is .
Is it time for your checkup?

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.


Comments on styling unordered list <UL><LI> as horizontal navigation bar:

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.