CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

Need Menu Help - Not Lining Up Right {solved}

https://forum.cmsmadesimple.org/viewtopic.php?t=15923

Page 1 of 1

Need Menu Help - Not Lining Up Right {solved}

Posted: Sat Oct 13, 2007 7:22 am
by HomeAndFamily
Hello,

I am new here and I am making my first CMS Made Simple site.  I really like everything about it, but I can't seem to get the menu thing figured out.

I have tried the various provided templates and menus and I have the same problem each time.  Also, the problem is appearing in both IE and Firefox.

Please take a look at my current menu.  The link is: http://wahmarea.com, but to get the full effect, please visit this page: http://wahmarea.com/index.php?page=affiliate-programs

The problem I am having is with the spacing.  I would like the menu to line up on the left side of the page - like the ads below it do. 

Also, I would like there to be less space between the parent and child categories.  I am thinking that this has something to do with the $node->prevdepth code in the menu file, but I don't know for sure.

Please forgive me if this is answered somewhere else.  I have searched the forum a lot and I haven't found anything similar to this problem.

My current site template calls the menu like this:

Code: Select all

<td width="130" align="left" valign="top">{cms_module module='menumanager' template='simple_nav' collapse='1'}
so the space between the side of the site and the menu can't be there. 

My menu template is the simple_navigation that came with the cart - I just removed the bullets and the heirarchy.  The code is:

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{if $count > 0}
<ul>
{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->current == true}
<li class="currentpage" style="list-style-type: none"><b><dfn>{$node->none}</dfn>{$node->menutext}</b>

{elseif $node->parent == true}
<li class="activeparent" style="list-style-type: none"><a class="activeparent" href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}><dfn>{$node->none}</dfn>{$node->menutext}</a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader" style="list-style-type: none">{$node->menutext}

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none"> <hr />

{else}
<li style="list-style-type: none"><a 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 != ''} target="{$node->target}"{/if}><dfn>{$node->none}</dfn>{$node->menutext}</a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-0}</li>
</ul>
{/if}
I don't have anything in my stylesheet because it doesn't seem to change anything when I add to it.  I tried pasting the info from the default "Navigation: CSSMenu - Horizontal" stylesheet into the bottom of my current stylesheet, but nothing changed, so I took it back out.  My current stylesheet is:

Code: Select all

body {
	margin-bottom: 0px;
}
td, textarea, input, select {
	font-family: Tahoma;
	font-size: 11px;
	color: 000000;
	font-weight: normal;
	line-height: 14px;
}

.frame {
	border: 1px solid #E8E9D7;
}

.text1 {
	font-family: tahoma;
	font-size: 11px;
	color: fe739f;
	font-weight: bold;
}
.text2 {
	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: 53534b;
}
.text3 {
	font-family: tahoma;
	font-size: 12px;
	font-weight: normal;
	color: 675f48;
}
.text4 {
	font-family: tahoma;
	font-size: 12px;
	font-weight: normal;
	color: 3e6641;
}
.text5 {
	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: 67767a;
}
.text6 {
	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}
.text7 {
	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: #000000;
}
.text8 {

	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: 94AEC5;
}
.text9 {


	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: 4E4E4E;
}

a:link {
	color: FE739F;
	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;

}
a:visited {
	color: FE739F;
	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;

}

a:hover {
	color: FE739F;
	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: underline;
}

a.a:link {
	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: fe739f;
	text-decoration: none;
}
a.a:visited {
	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: fe739f;
	text-decoration: none;
}
a.a:hover {
	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
}

a.b:link {

	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: FE739F;
	text-decoration: underline;
}
a.b:visited {
	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: FE739F;
	text-decoration: underline;
}
a.b:hover {
	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: FE739F;
	text-decoration: none;
}

a.c:link {
	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: 71A2CB;
	text-decoration: none;
}
a.c:visited {

	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: 71A2CB;
	text-decoration: none;
}
a.c:hover {

	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: 71A2CB;
	text-decoration: underline;
}

a.d:link {



	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: underline;
}
a.d:visited {


	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: underline;
}
a.d:hover {


	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: underline;
}

a.e:link {

	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: 71A2CB;
	text-decoration: underline;
}
a.e:visited {

	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: 71A2CB;
	text-decoration: underline;
}
a.e:hover {

	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #81992B;
	text-decoration: none;
}

a.f:link {

	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: 898989;
	text-decoration: underline;
}
a.f:visited {

	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: 898989;
	text-decoration: underline;
}
a.f:hover {

	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: #81992B;
	text-decoration: none;
}

a.g:link {

	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #000000;
	text-decoration: underline;
}
a.g:visited {

	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #000000;
	text-decoration: underline;
}
a.g:hover {

	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #FF6600;
	text-decoration: underline;
}

.inputstyle {
	font-family: tahoma;
	font-size: 10px;
	font-weight: normal;
	color: #5F726F;
	background-color: #E2EDEB;
	border: 1px solid #333333;
}
Can someone tell me what I need to do to get the menu to align to the left part of the page and also how to reduce the amount of prevdepth?

Thanks!

Re: Need Menu Help - Not Lining Up Right

Posted: Sat Oct 13, 2007 8:23 am
by kermit
ul {padding-left:0;}
ul ul {padding-left:10px;}

added at the end of your existing css did what you want. although you may want to use an id or class to distinguish the menu list from other elements that may appear on the page.

Re: Need Menu Help - Not Lining Up Right

Posted: Sat Oct 13, 2007 4:40 pm
by HomeAndFamily
Thank you so much!  This fixed the problem in Firefox. 

The problem is still there in IE.  Any ideas?

Thanks!

Re: Need Menu Help - Not Lining Up Right in IE

Posted: Wed Oct 17, 2007 4:36 pm
by HomeAndFamily
After playing with it a bit, it was fixed by changing the stylesheet to this:

Code: Select all

ul {padding-left:0;
   margin:0px;}
ul ul {padding-left:10px;}
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited