Need Menu Help - Not Lining Up Right {solved}

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
HomeAndFamily
New Member
New Member
Posts: 4
Joined: Sat Oct 13, 2007 6:59 am

Need Menu Help - Not Lining Up Right {solved}

Post 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!
Last edited by HomeAndFamily on Wed Oct 17, 2007 4:36 pm, edited 1 time in total.
Top
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: Need Menu Help - Not Lining Up Right

Post 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.
Attachments
Clipboard01.gif
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
Top
HomeAndFamily
New Member
New Member
Posts: 4
Joined: Sat Oct 13, 2007 6:59 am

Re: Need Menu Help - Not Lining Up Right

Post by HomeAndFamily »

Thank you so much!  This fixed the problem in Firefox. 

The problem is still there in IE.  Any ideas?

Thanks!
Top
HomeAndFamily
New Member
New Member
Posts: 4
Joined: Sat Oct 13, 2007 6:59 am

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

Post 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;}
Top
Post Reply

Return to “Layout and Design (CSS & HTML)”