> I am trying to set custom background images for menu items on a menu
> auto-generated through a CMS. Them CMS gives both a class and an ID to
> each menu item, each has a numerical suffix. Example:
>
> <div id="whatever">
> <ul>
> <li >
> <a
>
href="index.php?option=com_content&view=article&id=99&Itemid=54"
> class="menu-item3" id="menu54" title="CONTACT"><span
> class="menu-title">CONTACT</span></a>
> </li>
>
> <li >
> <a href="index.php?option=com_user&view=login&Itemid=58"
> class="menu-item4" id="menu58" title="DEALER/REP"><span
> class="menu-title">DEALER/REP</span></a>
> </li>
>
> ...
> ...
>
> </ul>
> </div>
>
> The relevant section of the stylesheet looks like:
>
> #ja-cssmenu li a {
> background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
>
> The above style will work to give every link the blue image, but I don't
> want that so I commented out the background and tried to apply a custom
> class or id to the individual links. I thought something like one of
> the following should work, keying off of (class="menu-item3"
> id="menu54") but no image appears:
>
> #menu54 .menu-item3 li a {
> background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
>
> .menu-item3 #menu54 li a {
> background: url(/images/blu-glossy-spheres-light-30.png) no-repeat -2px
> -29px;
> }
>
> #menu54 li a {
> background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
>
> .menu-item3 li a {
> background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
>
> #menu54 a {
> background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
>
> .menu-item3 a {
> background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
>
> What am I missing?
Hi Bob,
IDs and classes are set on the anchors, so your rules above do not match any
element in the menu (google "descendant selectors" to better understand your
problem).
So since you need to be more specific than this:
#ja-cssmenu li a {}
You can try:
#ja-cssmenu li .menu-item3 {}
or this:
#ja-cssmenu li #menu54 {}
As a side note, it would be much better to have these hooks on the list
items rather than the As.
--
Regards,
Thierry | http://www.TJKDesign.com
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
