[Webinar] Streamline your web hosting managementRegister Today

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 158
  • Last Modified:

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.

  • 2
2 Solutions
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.

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.

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now