[Solved] Help! Menu not working...

maxwellb · Post by **maxwellb** » Fri Jun 01, 2007 3:38 am

Hi CMSMS fans,

I am trying to port a design from OSWD.org (cash) to my site, but am having a few problems. The menu is bent out of shape. I think it is an issue of how the menu manager handles the CSS or somthing. Check out www.maxwellbrodie.com and you will see what I mean. The other issue (as you will see) is the "news" module...but that is an entirly new topic.

The CSS code is:

Code: Select all


/* CSS Document */

/*PAGE LAYOUT*/
body {
	background-image: url(images/bg_body.jpg);
	background-repeat: repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#toppage{
	width:800px;
}
#date{
	float:left; width:190px; height:39px; border-bottom:solid 1px #999999; border-right:solid 1px #999999;
}
#topbar{
	float:left; 
	width:608px; 
	height:40px; 
	background-image:url(images/bg_topbar.gif);
	background-color:#CBC55C;
	background-repeat:repeat-x;
	border-right:solid 1px #999999;
}
#header{
	width:800px;
}
#content{
	width:800px;
}
#contenttext{
	float:left; width:608px; 
	background-color:#F7F7F7; 
	border-left:solid 1px #999999; border-right:solid 1px #999999; 
	border-bottom:solid 1px #999999; border-top:dotted 1px #CCCCCC; 
	min-height:360px;
}
#logo{
	float:left; width:190px; height:110px; background-color:#F7F7F7; border-left:solid 1px #999999;
}
#pagetitle{
	position:relative; float:left; width:608px; height:110px; background-color:#F7F7F7; border-right:solid 1px #999999;
}
#title{
	position:absolute; right:10px; bottom:0px; width:600px;
}
#menu{
	float:left; width:190px; margin:0px;
}
#footer{
	width:590px; padding-right:10px; padding-left:200px;
}

/*GRAY PANEL*/
.panel{
	padding:12px;
	border:solid 1px #E4E4E4;
	background-color:#EEEEEE;
	margin:10px;
	padding:10px;
	width:550px;
	height:160px;
}

/*TEXT STYLES*/
.bodytext {
	font: 0.7em Tahoma, sans-serif;
	color: #666666;
}
.smalltext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	color: #666666;
}
.smallwhitetext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color: #FFFFFF;
}
.smallwhitetext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color: #FFFFFF;
	text-decoration:none;
}
.smallwhitetext a:hover{
	text-decoration:underline;
}
.smallgraytext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#CCCCCC;
}
.smallgraytext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#CCCCCC;
	text-decoration:none;
}
.smallgraytext a:hover{
	text-decoration:underline;
}
.titletext {
	font: 0.7em Tahoma, sans-serif;
	font-size:36px;
	font-weight:bold;
	color: #CCCCCC;
}
.logotext {
	font: 0.7em Tahoma, sans-serif;
	font-size:36px;
	font-weight:bold;
	color: #999999;
}
.orangelogotext {
	font: 0.7em Tahoma, sans-serif;
	font-size:36px;
	font-weight:bold;
	color:#FF9900;
}
.orangetitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#FF9900;

}


#linksmenu ul {
	list-style: none;
	
	}
	
#linksmenu li {
	float:right; 
	width:183px; 
	height:20px; 
	background-color:#ABC578; border-left:solid 1px #FFFFFF; border-bottom:solid 1px #FFFFFF;
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color: #FFFFFF;
	text-decoration:none;
	padding-top:5px;
      list-style: none;
	}
	
#linksmenu li a {
	float:right; 
	width:183px; 
	height:20px; 
	background-color:#ABC578; border-left:solid 1px #FFFFFF; border-bottom:solid 1px #FFFFFF;
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color: #FFFFFF;
	text-decoration:none;
	padding-top:5px;
	
	}
	
#linksmenu li a:hover {
	background-color:#514F1C;
	
	}
	


#newsbox {
	float: right;
	padding: 5px 0 0 0;
	}
	
#innernews p {
	margin-left: 10px;
	padding: 0 10px 0 10px;
	border-left: 1px dashed #422100;
	font-size: .8em;
	line-height: 1.2em;
	}

The HTML Template code is:

Code: Select all


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
	
	
{stylesheet}
{metadata}

	<title>{title}</title>
</head>
</__body>
	<div id="page" align="center">
		<div id="toppage" align="center">

			<div id="date">
				<div class="smalltext" style="padding:13px;"><strong>
{literal}
<__script__ language="JavaScript">
  <!--
    var now = new Date();
    var days = new Array(
      'Sunday','Monday','Tuesday',
      'Wednesday','Thursday','Friday','Saturday');
    var months = new Array(
      'January','February','March','April','May',
      'June','July','August','September','October',
      'November','December');
    var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
    function fourdigits(number)	{
      return (number < 1000) ? number + 1900 : number;}
    today =  days[now.getDay()] + ", " +
       months[now.getMonth()] + " " +
       date + ", " +
       (fourdigits(now.getYear()));
     document.write(today);
  //-->
</__script>
{/literal}

</strong></div>
			</div>
			<div id="topbar">
				<div align="right" style="padding:12px;" class="smallwhitetext">Search {search}</div>

			</div>
		</div>
		<div id="header" align="center">
			<div class="titletext" id="logo">
				<div class="logotext" style="margin:15px"><span class="orangelogotext">max</span><br />brodie</div> 
			</div>
			<div id="pagetitle">
				<div id="title" class="titletext" align="right">Welcome!</div>

			</div>
		</div>
		<div id="content" align="center">
			<div id="menu" align="right">
				<div align="right" style="width:189px; height:8px;"><img src="images/mnu_topshadow.gif" width="189" height="8" alt="mnutopshadow" /></div>
<div id="linksmenu" align="center">
{cms_module module="menumanager"}

</div>
				<div align="right" style="width:189px; height:8px;"><img src="images/mnu_bottomshadow.gif" width="189" height="8" alt="mnubottomshadow" /></div>
			</div>
		<div id="contenttext">

			<div class="bodytext" style="padding:12px;" align="justify">

{content}
		</div>

<div id="newsbox">

				<div id="innernews">

{cms_module module="news"}

				</div>

			</div>


	</div>
		<div id="footer" class="smallgraytext" align="center">

			Maxwell Brodie © 2007<br />
			<!--Sponsored by:<a href="http://www.winkhosting.com" title="Hosting Colombia">Hosting Colombia</a><br />-->
		</div>
	</div>
<__body>
</__html>

Anyone have any suggestions? Basically, whatever page is active, the text in the menu is not a link (which is fine) but the text appears chopped off at the bottom of the menu. Also, there is a "1:", "2:", "3:", etc. for every page.

Thanks for all your assistance!
Max

KO · Post by KO » Fri Jun 01, 2007 4:54 am

This is typical css stuff thats not related to menumanager. Ofcourse tag is made by it but original css had it eighter not visible or position:absolute; text-indent:-999em. Change:

#linksmenu li {
float:right;
width:183px;
/* height:20px; */ /* Maybe this could be replaced with line-height depending IE behaviour */
background-color:#ABC578; border-left:solid 1px #FFFFFF; border-bottom:solid 1px #FFFFFF;
font: 0.7em Tahoma, sans-serif;
font-size: 11px;
font-weight:bold;
color: #FFFFFF;
text-decoration:none;
padding-top:5px;
list-style: none;
}

dfn {display:none}

br, K

maxwellb · Post by **maxwellb** » Fri Jun 01, 2007 5:04 am

Hi! Thanks so much for your help! Is there any way to make the active page in the menu not expand in height? And on some of the pages the white bar separating the menu items is thicker than the others... now I'm just being picky

Anyways, thank you very much for sharing your talents at this forum - I don't know what the future of that website would be if it didn't get fixed.

Max

maxwellb · Post by **maxwellb** » Fri Jun 01, 2007 5:05 am

Oh, by the way, I don't think I made it clear in the above post...

The code you gave worked perfectly!

KO · Post by KO » Fri Jun 01, 2007 5:30 am

Great! Thanks!

First of all your missing and closing from your menu (commented out). You should have those in you menu template (or in page template). You could give it a height so it does not change it according links.

Secondly you are having border-bottom:1px solid white for your menu list elements and for your tags. use only one of them and maybe is better in this case.

What is making it to change height is tag you have also in your menu. That also changes white border thicknes as does not have border in bottom.

Hope this helps further.

br, K

maxwellb · Post by **maxwellb** » Fri Jun 01, 2007 6:04 am

Hi,

I had to comment out the tags because it left a huge white space between the green menu and right underneath the title. Isn't the controlled in the menu manager? Do you know how to get rid of the in menu manager? It's not in any of my code...

Thanks for your help, I will see if the border fix works!
Max

maxwellb · Post by **maxwellb** » Fri Jun 01, 2007 6:07 am

Getting rid of the second border attributes in "li a" worked! Thanks!

KO · Post by KO » Fri Jun 01, 2007 7:20 am

You should add those tags back as they could create some other problems. And wont validate.

make it

then add to styles

ul#leftNavi {margin:0px;padding:0px; background-color:#ABC578;}

then you should not have problems with it. change padding so it is in right place.

Menu manager is using menu template where that comes. Eighter change that or modify your styles like this:

li.currentpage {height:25px;}
#menu h3 {text-weight:normal;font-size:1em;padding:5px 0px 0px;margin:0px; height:20px;}

br, K

maxwellb · Post by **maxwellb** » Sat Jun 02, 2007 3:12 am

Thank you so much! Everything works now and is valid XHTML!

CMS Made Simple Forums

[Solved] Help! Menu not working...

[Solved] Help! Menu not working...

Re: Help! Menu not working...

Re: Help! Menu not working...

Re: Help! Menu not working...

Re: Help! Menu not working...

Re: Help! Menu not working...

Re: Help! Menu not working...

Re: Help! Menu not working...

Re: Help! Menu not working...