At 01:11 AM 1/7/2006, Rahul Gonsalves wrote:
>>>[1] http://www.littleandreid.com/mentaidyn/about
>>>
>>><ul class="mainnav">
>>><li><a href="/" id="menu_default"><span>Home</span></a></li>
>>><li><a href="about" class="active"
>>>id="menu_about"><span>About</span></a></li>
>>>[--more links--]
>>></ul>
>>>
>>>Now, I want to assign the class "Active" to have the different
>>>background. What should I do? This changes from page to page,
>>>dynamically, so I can't use the ID property.
>>
>>Actually, you can. IDs can be used once PER PAGE. So long as you
>>use the ID only once on each page (which should be the case in this
>>situation, unless I am badly misunderstanding you),
>
>Yup. :-)
>
>But that's because I was unclear about _what_ I want to do. I want
>the active link to be highlighted with a different colour from the other links.
So I assumed.
>The "active" class is generated dynamically by the CMS. Therefore,
>by just adding the .active class in my global CSS, each page now has
>the active link highlighted.
Yes, but you had a specificity problem using just ".active" as your
selector, correct?
>I can't see how I would use the ID class, unless I wrote a little
>CSS header for each page, with the background for the currently
>active ID specified. Not my idea of fun, even on the admittedly
>small site, as above.
Uh, oh. Now we're in trouble. The phrase "ID class" doesn't really
make sense. Let me see if I can clarify with example code, again,
mostly so newbies checking the archives can follow along. Your HTML
(as noted above) had this:
<li><a href="about" class="active"
id="menu_about"><span>About</span></a></li>
The class="active" part is generated by your CMS, and you presumably
had something in your global CSS file that said something like this:
.active {background-color: foo;}
Your original problem was that this selector was not sufficiently
specific to override your other declarations for the anchor. I am
suggesting that your content management system should generate
something like this, instead:
<li><a href="about" id="active"
id="menu_about"><span>About</span></a></li>
Note we have just changed the class="active" to id="active". Your
global CSS file would then include something like this:
ul li a#active {background-color: foo;}
You should have only one active link per page, so this is legal in
CSS/HTML terms, and it makes your selector a whole level of
specificity higher. See
<http://www.w3.org/TR/CSS21/cascade.html#specificity> for more information.
There is at least one CMS system that doesn't like to generate
elements with ID attributes. However, that is a flaw with the CMS,
not with this use of an ID in this situation.
Perhaps that is more clear.
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
