Here's the simplified version. You have 5 tabs, Forside, Services, Produkter, Resume, and Kontakt....
Now, lets do the same for your other tabs
body.kontakt ul.tabs li.kontakt, body.forside ul.tabs li.forside, body.services ul.tabs li.services, body.produkter ul.tabs li.produkter, body.resume ul.tabs li.resume {current tab styles}
Nice explanation, Ted. Although I think your example would be easier to read and understand if you stacked the selectors vertically:
body.kontakt ul.tabs li.kontakt,
body.forside ul.tabs li.forside,
body.services ul.tabs li.services,
body.produkter ul.tabs li.produkter,
body.resume ul.tabs li.resume
{
[current tab styles]
}It's worth noting that the parent element whose class matches the list item can be any container in which the list items reside -- the html body, a div that contains the unordered list, or the unordered list itself.
This CSS selector:
.kontakt li#kontakt { ... }(just the parent class, no element specified) works with any of the following html nestings:
<body class="kontakt">
<div>
<ul>
<li id="kontakt"> <body>
<div class="kontakt">
<ul>
<li id="kontakt"> <body>
<div>
<ul class="kontakt">
<li id="kontakt">The remaining question, of course, is how to set the body class according to what page you're on. I know of three ways:
1) you manually create the html pages with the body class names pre-set, or
2) you write a server-side script that creates the pages with the body classes pre-set, or
3) you write a JavaScript function that sets the body class when the page loads.
Kim, because those scripting methods are outside the boundaries of this list, feel free to write to me directly if you'd like some suggestions in this area.
Paul
****************************************************** The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
