14 replies [Last post]
bevontheroad
Offline
newbie
Last seen: 12 years 45 weeks ago
Joined: 2007-12-11
Posts: 6
Points: 0

Newbie here. I have a site that had a main and a secondary navigation menu. I've created "You Are Here" identifiers with CSS using the body id. Can I have two body id's? I've tried to write the code in various ways but it doesn't seem to be working. It only works when I specify one body id. Any suggestions? Seems simple enough but it's driving me crazy!!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

No, you can only have on ID

No, you can only have on ID per element. We'd need to see your code or a link to give further advice.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As Tyssen says you ought to

As Tyssen says you ought to show code as we always ask, but if you need more than two page identifiers then give the page a unique identifier on the html tag and that frees up the body tag for another.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

bevontheroad
Offline
newbie
Last seen: 12 years 45 weeks ago
Joined: 2007-12-11
Posts: 6
Points: 0

Sorry guys. I didn't show

Sorry guys. I didn't show code. It's simple enough I have a list menu:



and call it out:

I then have a sub menu that I can no call out with the body id:

  • First Time Home Buyer
  • How Much Can I Afford?
  • Should I Rent or Buy?
  • Should I Refinance?
  • Understanding Loan Process
  • Understanding Closing Costs
  • Understanding Products
  • Line vs Loan
  • Mortgage Glossary

I'm really new to CSS, and html for that matter. Should I identify by using a pagename tag?

I appreciate any help. Sorry for the inexperienced post!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You can't have the same ID

You can't have the same ID on a list item and on the body tag. For the number of different links that you've got, I think you'd be better inserting a single 'active' id or class into whichever links should have them. How you do that will depend on how whether you're using PHP, ASP etc or just static HTML.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 3 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

If I understand your

If I understand your question clearly...use the body id for your main nav and a body class for your secondary nav. Something like this:
Main Nav

CSS:
/*Main page highlight*/
body#home a#homenav {your styles}
HTML:

Secondary Nav CSS: /*sub page highlight*/ body.example #nav_sub a.example {your styles} HTML:
bevontheroad
Offline
newbie
Last seen: 12 years 45 weeks ago
Joined: 2007-12-11
Posts: 6
Points: 0

I can not thank you enough!!

I can not thank you enough!! This is exactly what I was looking for.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 3 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

bevontheroad wrote:I can not

bevontheroad wrote:
I can not thank you enough!! This is exactly what I was looking for.

No problem, glad is was what you needed. A word of caution when you start doing the css markup for your main and sub nav areas. You need a comma after each line... EXCEPT for the last one in the group.

/*Main current page highlight*/
body#home a#homenav,
body#graphics a#grfxnav,
body#about a#aboutnav,
body#contact a#contnav
{your styles here}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Not to rain on your parade,

Not to rain on your parade, but that's why I suggested not targetting the current page with identifiers on the body. You've got 15 top level and sub level links which means 15 lines of CSS code instead of what could probably be accomplished with one if the active ID is inserted into the page programmatically.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

bevontheroad
Offline
newbie
Last seen: 12 years 45 weeks ago
Joined: 2007-12-11
Posts: 6
Points: 0

Hey, not a problem I'll take

Hey, not a problem I'll take any help I can get. I really appreciate the knowledge.

I've never done active id's. Can you give me a quick sample code I can look at to better understand?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Well it depends what pages

Well it depends what pages you're using - PHP, ASP or just plain HTML.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

bevontheroad
Offline
newbie
Last seen: 12 years 45 weeks ago
Joined: 2007-12-11
Posts: 6
Points: 0

just HTML

just HTML

syrupcore
Offline
Enthusiast
Last seen: 11 years 37 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

then stick with the body

then stick with the body id/class. if your site is small, you can just add class="active" to the current page. I prefer heavier css though.

just so you know, while an item may only have one ID, it can have multiple classes. just like you - if a cop pulls you over and you have two different IDs, yer in trouble. if you have two classes on your ID (say big trucks and cars), you're fine. I use multiple body classes a lot.

also, a little bit of naming convention goes a long way. when I use body classes, I always end it with 'page'. so, body class="aboutpage" or body class="productspage". just helps to ensure you don't step on your own feet later. Smile helps me anyway cause I'm forgetful like that. same with navs. li class="aboutnav" or li class="productsnav" or whatevers...

bevontheroad
Offline
newbie
Last seen: 12 years 45 weeks ago
Joined: 2007-12-11
Posts: 6
Points: 0

Ah. that makes sense! Great

Ah. that makes sense! Great analogy! Since I'm so new to CSS, just have one question - when I specify a class where does the class="active" code go to make that particular class active?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Anywhere you like, as long

Anywhere you like, as long as your CSS matches.

It's probably best to apply it to the LI element.

Verschwindende wrote:
  • CSS doesn't make pies