{SOLVED} CSSM, Horizontal Menu width issues.

[dmagill]

Hey Everyone!

I have two problems, but they are not related. I will post my second problem separately.

This post is about my menu. I snagged one of the awsome menus from cssplay and it works perfectly in my static html site, ( http://resultsmedia.on.ca/transfer/hamelins/home.html ). For the life of me I can't get it to space properly in CMSMADESIMPLE. I have done everything I can think of, and I have been reading the Forums all morning and am not sure I am seeing the solution. All I want is for the CMS driven site menu to work like the static site... then again, I am certain I am missing something here.

Since I have the CMS site on an internal server I am not able to show you the working copy - sorry. I have attached a screen capture, and will see about getting it live.

Thank you!



Where I got the Menu
http://www.cssplay.co.uk/menus/pro_horizontal.html
Professional #1

CSS - static and cms are the same code
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(images/button1.gif); position:relative; border:0px solid transparent; border-width:0 0px; border-bottom:0px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;font-size:12pt;font-weight:bold;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(images/button3.gif);}
.menu1 li.current a b {background:url(images/button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(images/button2.gif);}
.menu1 li a:hover b {background:url(images/button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(images/button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(images/button3.gif) no-repeat right top;}




My Menu: top_menu

{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->current == true}
url}" class="current"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{elseif $node->parent == true && $node->depth == 1}
url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{/if}

{/foreach}

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

{/if}

[KO]

I'm not sure if this is the problem but for me it looks like there is no right side for active link. If you look at css right side is done with b (bold) that should be inside tag but outside link text. What you could try is to change navi template:

{if $node->current == true}
url}" class="current"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

This way you have that tag for right side. You could use or tag by modifying menu template also.

Hope this helps, K

[dmagill]

Hey KO, I am extremely sorry for not posting sooner. A short while back I was able to work on the site, and then in the middle of the day I had to change gears and am finally back to it.

Okay... finally I got to play with the menu.

I removed the and and decided to use the css to bold things up. So far so good... still the same problem. The left side of the menu seems to hold true and work. The right site cuts any spacing short and doesn't allow for anymore room. The thing that i don't get is that I can dump this code just about anywhere and it works. Put it into cmsmadesimple and it doesn't work.

I have to be missing something in the css.

Thanks again

D

[KO]

The thing is that they used the for making the right side of menu item image as well as making it bold. You could use which is more normal way or include it in item but you have to use something. With your replace b in your stylesheet with span.

br, K

[dmagill]

Okay, I put the bolds back in and refreshed everything... now... when I go to a certain page, the roleover works for that one pages menu link. The rest suffer from the same problem as before.

I have never seen a bold used in this fashion so I am totally unsure how it works.

Thank you!

[dmagill]

I just clued into what you were saying!


So I have to try and manipulate all the bolds because the coder was using the b in his css to further manipulate the menu layout and behavior... took me a while.

I will keep pounding on this tomorrow... time to go home.

Thanks again!

[dmagill]

HOLY Crap KO - thank you very much... I kept pounding on the CSS when it was the Menu code I needed to modify. I told the code to Bold just about eveything and it worked... now I just have to figure out how to show the current page.

{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->current == true}
url}" class="current"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}

{elseif $node->parent == true && $node->depth == 1}
url}" {if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}

{/if}

{/foreach}

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

{/if}



I just couldn't leave without trying to figure this out.

Thank you again.

D

[KO]

Good. First time I see tag used this way but I guess why not. Not very typical.

For current page I believe...

{if $node->current == true}
url}" class="current"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}

...tells that in your source you will have which you use for current page.

So css looks like...
.menu1 li a.current {color:#fff; background:url(images/button3.gif);}
.menu1 li.current a.current b {background:url(images/button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(images/button2.gif);}
.menu1 li a:hover b {background:url(images/button2.gif) no-repeat right top;}
.menu1 li a.current:hover {color:#fff; background:#000 url(images/button3.gif); cursor:default;}
.menu1 li a.current:hover b {background:url(images/button3.gif) no-repeat right top;}

hope this helps,

K

[dmagill]

Hey Again KO!

Took your code and moved one bloody chunck of code in the menu script!

{if $node->current == true}
url}"class="current"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}

Thank you ever so much. The menu works perfectly.

Just a few more things and I am done with the client!!!!!!!!!

I owe you a beverage of your choice.

Have a great one!
(now on to the next problem =-))

[dmagill]

Just because I feel I should...


Menu template Final

{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->current == true}
url}"class="current"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}

{elseif $node->parent == true && $node->depth == 1}
url}""{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}

{/if}

{/foreach}

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

{/if}


Menu CSS (with modifications made by KO)

.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(images/button1.gif); position:relative; border:0px solid #000; border-width:0 0px; border-bottom:0px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:10pt; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li a.current {color:#fff; background:url(images/button3.gif);}
.menu1 li.current a.current b {background:url(images/button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(images/button2.gif);}
.menu1 li a:hover b {background:url(images/button2.gif) no-repeat right top;}
.menu1 li a.current:hover {color:#fff; background:#000 url(images/button3.gif); cursor:default;}
.menu1 li a.current:hover b {background:url(images/button3.gif) no-repeat right top;}



original menu by
CSSpplay: URL: http://www.cssplay.co.uk/menus/pro_horizontal.html - pro 1
His menus are pretty cool, and free.