Problem displaying active image in image based navigation

[sithstemple]

Hi there.

Hoping that you can help.  I'm using a clean install of CMSMS 1.4.1 and I am trying to set up an image based navigation using CSS image replacement techniques.

I've got the menu working nicely.  It has its normal state and its hover state.  What I can't seem to get is the active page to display the active image.  The whole menu is made up of one image which has all 3 states on it.  I'm basing it on the Image Replacement Menu on the themes site (http://themes.cmsmadesimple.org/Image_menu.html).

Here is the Menu Manager template:

Code: Select all

{if $count > 0}
<ul id="nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

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

	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
	<li id="i{$node->id}"><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
<div class="clearb"></div>
{/if}

And here is the CSS I'm using:

Code: Select all

/*Image for the ul and some height and width properties*/
ul#nav {
width: 800px;
height: 50px;
margin:0;
padding:0;
background: url(images/nav.png);
position:relative;
}

/*We want li as block and to be as tall as image*/
ul#nav li {
display:block;
height:50px;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

/*a should also be block and 50px tall*/
ul#nav li a {
display:block;
height:50px;
}

/*This is the boring part, every link has to be positioned according to the image*/
li#i15 {
left: 0px;
width: 100px;
}

li#i51 {
left: 100px;
width: 100px;
}

li#i52 {
left: 200px;
width: 175px;
}

li#i56 {
left: 375px;
width: 175px;
} 

li#i53 {
left: 550px;
width: 125px;
} 

li#i55 {
left: 675px;
width: 125px;
} 

#i15 a:hover {
background: transparent url(images/nav.png) 0 -50px no-repeat;
}
#i51 a:hover {
background: transparent url(images/nav.png) -100px -50px no-repeat;
}
#i52 a:hover {
background: transparent url(images/nav.png) -200px -50px no-repeat;
}
#i56 a:hover {
background: transparent url(images/nav.png) -375px -50px no-repeat;
}
#i53 a:hover {
background: transparent url(images/nav.png) -550px -50px no-repeat;
}
#i55 a:hover {
background: transparent url(images/nav.png) -675px -50px no-repeat;
}

#i15 a:active {
background: transparent url(images/nav.png) 0 -100px no-repeat;
}
#i51 a:active {
background: transparent url(images/nav.png) -100px -100px no-repeat;
}
#i52 a:active {
background: transparent url(images/nav.png) -200px -100px no-repeat;
}
#i56 a:active {
background: transparent url(images/nav.png) -375px -100px no-repeat;
}
#i53 a:active {
background: transparent url(images/nav.png) -550px -100px no-repeat;
}
#i55 a:active {
background: transparent url(images/nav.png) -675px -100px no-repeat;
}

/*and for hiding the text*/
ul#nav li a {
text-indent:-9000px; background-color:transparent; }

If anyone can help, that would be appreciated.  Thank you.

[SideshowBob]

Hi Sithstemple,

The best thing anyone posting here can do is post a link to the site. Hosting costs are tiny some places offer free hosting...
You will get more responses too.

If I understand your problem correctly then your issue related to the use of a:active. It is explained in more detail here: http://www.w3schools.com/Css/pr_pseudo_active.asp

Try something like the below:

Code: Select all

#i15 a.menuactive {
background: transparent url(images/nav.png) 0 -100px no-repeat;
}
#i51 a.menuactive {
background: transparent url(images/nav.png) -100px -100px no-repeat;
}
#i52 a.menuactive {
background: transparent url(images/nav.png) -200px -100px no-repeat;
}
#i56 a.menuactive {
background: transparent url(images/nav.png) -375px -100px no-repeat;
}
#i53 a.menuactive {
background: transparent url(images/nav.png) -550px -100px no-repeat;
}
#i55 a.menuactive {
background: transparent url(images/nav.png) -675px -100px no-repeat;
}

Hope that helps.

Bob

[sithstemple]

Thanks very much for the help.  I had a feeling it was something like that, but when I changed the CSS to menuactive earlier, I used a:menuactive instead of a.menuactive. 

I also had to make a change to the menu template as follows:

Code: Select all

<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}

changed to:

Code: Select all

<li id="i{$node->id}" class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}

That enabled the CSS to display the correct part of the image based on the ID of the li tag.

Thanks again.