How to tailor a library item's format depending on the page


I'm developing a website in dreamweaver 8 using CSS.    I'm facing the following challenge.  I want the menu, footer, and navigation links to be the same across pages, so I want them to be in a library item.

The menu consists of a tab-like format and I want the active tab to be highlighted.  The problem is how do I make the active tab different depending on the page and still have it a library item?

If you need the reference, this is the site:

The green menu at the top is the problem, but I also want to do this for nav links on the left side.

LVL 11
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Put an ID in the body tag. Then define your tabs including the id:

E.g. (In case I'm not clearly explaining it)

body#page1 .tab1 { active style }
body#page1 .tab2 { inactive style }
body#page2 .tab1 { inactive style }
body#page2 .tab2 { active style }
ugebAuthor Commented:
Okay, looks promising.

I'm not sure which items of what you wrote are keywords.

Can you show how to apply the css in html for when the page is active vs. inactive?

If you look at the HTML for you index page, change it from <body> to <body id="homepage">. In WorkshopInfo.html, change it to <body id="workshopinfo"> etc. You also need to give each "#menu li" an individual class.

Then in the CSS:
#menu li.homepage { normal tab styles }
#menu li.workshopinfo { normal tab styles }
etc etc, which will show all the time.

You then add the following styles
#homepage #menu li.homepage { active tab styles }
#workshopinfo #menu li.workshopinfo { active tab styles }
Obviously, each of these styles only show when you at the relevant page, and overwrite the style for normal tabs.

You now no longer need the specific li class="active", which means you can reuse the same menu on every page.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The other way is simply to use the HTML "include" to include that subpage into a DIV or table container on the page, that way, you only write the menus footers and navigation links once, as separate HTML files, and include them wherever you want on the page.  I personally use Iframes with no borders for this --

<IFRAME height =  width =  border = 0  src="header.html">  </IFRAME>

they integrate perfectly into the page, and do not have any significant problems integrating into a single page.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.