U.S. CitiesCity-Data Forum Index
Go Back   City-Data Forum > General Forums > Science and Technology > Internet
 [Register]
Please register to participate in our discussions with 2 million other members - it's free and quick! Some forums can only be seen by registered members. After you create your account, you'll be able to customize options and access all our 15,000 new posts/day with fewer ads.
View detailed profile (Advanced) or search
site with Google Custom Search

Search Forums  (Advanced)
 
Old 07-05-2011, 04:09 PM
 
2,182 posts, read 4,705,982 times
Reputation: 1206

Advertisements

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?
Reply With Quote Quick reply to this message

 
Old 07-05-2011, 04:17 PM
 
24,503 posts, read 35,958,754 times
Reputation: 12847
You want to research jquery accordian menus.
Reply With Quote Quick reply to this message
 
Old 07-05-2011, 04:46 PM
 
2,182 posts, read 4,705,982 times
Reputation: 1206
Quote:
Originally Posted by NJBest View Post
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.
Reply With Quote Quick reply to this message
 
Old 07-06-2011, 12:19 AM
 
40,169 posts, read 41,782,366 times
Reputation: 16740
Use the <dl> or <li> tag and format it with css.

HTML dl tag
Quote:
<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.

Quote:
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:

Quote:
* {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.

Last edited by thecoalman; 07-06-2011 at 01:07 AM..
Reply With Quote Quick reply to this message
Please register to post and access all features of our very popular forum. It is free and quick. Over $68,000 in prizes has already been given out to active posters on our forum. Additional giveaways are planned.

Detailed information about all U.S. cities, counties, and zip codes on our site: City-data.com.


Reply
Please update this thread with any new information or opinions. This open thread is still read by thousands of people, so we encourage all additional points of view.

Quick Reply
Message:

Over $104,000 in prizes was already given out to active posters on our forum and additional giveaways are planned!

Go Back   City-Data Forum > General Forums > Science and Technology > Internet
Follow City-Data.com founder on our Forum or

All times are GMT -6. The time now is 04:58 AM.

© 2005-2019, Advameg, Inc. · Please obey Forum Rules · Terms of Use and Privacy Policy · Bug Bounty

City-Data.com - Archive 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35 - Top