CMS Made Simple Forums

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

[Solved] Help! Menu not working...

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

Page 1 of 1

[Solved] Help! Menu not working...

Posted: Fri Jun 01, 2007 3:38 am
by maxwellb
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

Re: Help! Menu not working...

Posted: Fri Jun 01, 2007 4:54 am
by KO
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

Re: Help! Menu not working...

Posted: Fri Jun 01, 2007 5:04 am
by maxwellb
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

Re: Help! Menu not working...

Posted: Fri Jun 01, 2007 5:05 am
by maxwellb
Oh, by the way, I don't think I made it clear in the above post...

The code you gave worked perfectly!

Re: Help! Menu not working...

Posted: Fri Jun 01, 2007 5:30 am
by KO
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

Re: Help! Menu not working...

Posted: Fri Jun 01, 2007 6:04 am
by maxwellb
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

Re: Help! Menu not working...

Posted: Fri Jun 01, 2007 6:07 am
by maxwellb
Getting rid of the second border attributes in "li a" worked! Thanks!

Re: Help! Menu not working...

Posted: Fri Jun 01, 2007 7:20 am
by KO
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

Re: Help! Menu not working...

Posted: Sat Jun 02, 2007 3:12 am
by maxwellb
;D Thank you so much! Everything works now and is valid XHTML!
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited