Styling menu probs - active marker not working, need some guidance

[sarah_h]

Hi All,

Well, I'm getting on nicely with CMS MS and have created templates, stylesheets and have modified a menu. My problem is twofold, have a look at this markup (I've simplified it here for ease of reading):

Code: Select all

<ul class="menu_horiz">
<li class="home" id="active"><a href="index.php?page=testing" class="active"><span class="hide">home</span></a></li>
<li class="hot water">  <a href="index.php?page=hot_water"><span class="hide">hot water</span></a></li>
<li class="heating">  <a href="index.php?page=heating"><span class="hide">heating</span></a></li>
<li class="biodiesel">  <a href="index.php?page=biodiesel"><span class="hide">biodiesel</span></a></li>
<li class="contact">  <a href="index.php?page=contact"><span class="hide">contact</span></a>
</li>
</ul>

You can see I've got an active page marker, #active and a class applied to each . The designer wants every link to be different and use a background image with a hover! Anyway I've got all the image backgrounds working ok and hover effect but the active marker is not working because of a problem with my styling. Here is the styling for the hovers and active link:

Code: Select all

#menu_horiz li.heating a:hover, #menu_horiz li.heating a:active,
#active .heating a:link, #active .heating a:visited,
#active .heating a:hover, #active .heating a:active {
background-image:  url(uploads/images/button_heating_active.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
}

This has been driving me mad all day! Can anyone shed some light into what I've obviously done wrong?

Thanks

Sarah


p.s. I forgot another related problem. Look at this markup:

  hot water

Because CMS MS menu manager uses the page name for the style class (menutext}">  ) it seems that spaces are not allowed in class names because the styles don't work on this link!! Ideas anyone, can I modify menu manager to remove spaces from $node->menutext for this istance? If tried using a preg replace to look at the string i.e. page name and then remove the space but I don't know how to use this within menu manager.

Code: Select all

$menuclass = preg_replace('/\s+/', '', {$node->menutext});

Anyway I hope you guys can put me straight with this and the problems above.

[Dr.CSS]

for 'class='  or 'id=' no you can't use 2 or more word titles,, try {$node->id} this comes up with the page number which you can use to call a style. that's how i do it for Imap menus and individual menu link styling.

    mark

[sarah_h]

Thanks Mark, I didn't think of that (obviously) so I'll give it a go. I don't want to trouble you but can you see why my active links are not working?

Sarah

[Dr.CSS]

From the code you posted,, no but if you Got Link i can check it that way, i use Firefox with the Web Developer ext. when i go to a site i can edit the CSS on the left side and see the changes on the right 'real time' that gives me a lot better understanding how it all fits and i also 'view source' to see how the HTML and menus render,, some of my menus are modified, i go to Layout � Menu Manager and copy the original and make changes, the {$node->menutext} is in the default menu,,

{* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}

{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}{/foreach}

{repeat string="" times=$node->depth-1}


{/if}

i changed it to give 'class' and 'id'

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
id}">id}" title="{$node->menutext}"{elseif $node->current == true}
id}">id}" title="{$node->menutext}"{elseif $node->haschildren == true}
id}">id}" title="{$node->menutext}" {else}
id}">id}" title="{$node->menutext}"{/if} href="{$node->url}">{$node->menutext}{/foreach}

so i get,,

Home

that way i can use the 'li' 'id' and the 'a' 'id' for styling,


    mark

[sarah_h]

Thanks for that Mark. I've upped this test site now to www.10 e i g h t - d e s i g n.co.uk/cms/ (remove spaces! Sorry, I don't want SE's to grab the URL) for you to have a look at if you have time, so you'll clearly see the problem with the active links not working and the missing link because of the space in the class i.e. 'hot water'. I'll use {$node->ID} instead as you suggested.

I must warn you though, Mark, that as this is the first time I've used CMS MS and this is a test site it's not pretty! I'm not making excuses (?) but it really isn't pretty and I'm kind of embarressed! Anyway, ! In the meantime I've installed the Web Dev extension on FF and I'll try using the same testing technique as yu suggested.

Once again Mark, I really appriciate your help, particularly as a novice to CMS MS.

Sarah

[Dr.CSS]

you might want to see this page for a more detailed idea of image menus, sort of a step by step,

    mark

[sarah_h]

Thanks Mark for the link it helped me loads! I've spent most of the day working on this menu stuff and I've finally succeeded in doing exactly what I was hoping for. I feel I may be getting the hang of it! Now to try a split menu ...

Sarah