More elegant way of having nested nav other than tables? (screen, reset)

[kazyn]

Ok, so I have a website I'm building for Katie's cousin. The site is very low-tech, html, divs, css and some javascript.

She's selling items, which are nested into groups, nested into other groups.

Here's a screeny of the dummy setup I have now:




Right now it's just using table rows. I hate it. It looks different depending on what browser you have, padding and spacing are all screwy, it looks bad...etc.

What should I look into to get a more elegant navi panel?

[NJBest]

You want to research jquery accordian menus.

[kazyn]

Originally Posted by NJBest

You want to research jquery accordian menus.

Oooh I was hoping jquery would be useful here. Thanks for the heads up. I will definitely look into this.

[thecoalman]

Use the <dl> or <li> tag and format it with css.

HTML dl tag

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

If you use that even before applying any formatting you'll find it has already been formatted as list. There are elements for most presentation already available.

Right now it's just using table rows. I hate it. It looks different depending on what browser you have, padding and spacing are all screwy, it looks bad...etc.

***Important, be sure you're using a doctype***. Every browser has different defaults for elements and each individual browser has different defaults with different doctypes so its really a mess without a doctype. Unless you specifically provide formatting the defaults are used. You can use a global reset at the top of your CSS to zero the defaults:

* {margin: 0; padding: 0;}

This will set the margins and padding to 0 on everything but now you will have to set them yourself for any tags/classes etc. Google CSS global reset for some more info.




--------edit---------

Just a bit more, remember that it's "Cascading" style sheet. The formatting that is used last is applied. If you set a default at the beginning of your CSS document but then have a class later on that is applied it will override the default. It's a good practice to set defaults for major tags, font sizes and other things at the top of your style sheet and then have classes for specifics to drill it down as you go. Most people new to CSS fight this instead of working with it.