On 10 Jan 2006, at 3:21 am, Adam Kuehn 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>
> <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 already mentioned it , one can't have two ID's per element.
But in this case, the CMS (textpattern) and the plugin used for
generating the menu does the correct thing, by adding the
class .active to the <a>.
It is just a question of specificity to apply the class
.mainnav li a:link is more specific than just .active
better css would be
.mainnav li a {/* rules */}
.mainnav li a:hover {/* rules */}
.mainnav li a.active { /* rules that override the previous selector
(s) */}
(and you could add one more rule:
.mainnav li a:focus {/* rules - good for keyboard users */}
That is what I use in exactly the same environment (textpattern +
plugin)
Philippe
---
Philippe Wittenbergh
<http://emps.l-c-n.com/>
______________________________________________________________________
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/
