Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:50
Vertical Menu in CSS centered site
Poster: 1skydive
Dated: Thursday March 17 2005 - 17:20:48 GMT
Hello,
I've been playing with this for a few days and haven't been able to get it to work the way I want. Obviously, I want to make sure I can set it up the way I need before I make the purchase.
I've read a few posts about this but haven't really been able to figure it out. So here goes:
I have a site that was designed totally in css, and it is a centered site. I have a vertical menu that I need to place on the site but for the menu to move with the site if the borwser is resized.
I have attached an image of the homepage and you can see where I need the menus to be placed.
The site and the menus are db generated and I'm using smarty as the template engine (not that it really matters).
This is the site code (the css menus have been commented out):
Code:
<div id="menu">
<ul>
<!--<li class="bigger"><a href="">Member Benefits</a></li>
<li class="bigger"><a href="">Member Directory</a></li>
<li class="bigger"><a href="">Become A Member</a></li>
<li class="bigger"><a href="">Calendar of Events</a></li>
<li><a href="">About NAHBRA</a></li>
<li><a href="">Newsroom</a></li>-->
</ul>
</div>
<ul>
<!--<li class="bigger"><a href="">Member Benefits</a></li>
<li class="bigger"><a href="">Member Directory</a></li>
<li class="bigger"><a href="">Become A Member</a></li>
<li class="bigger"><a href="">Calendar of Events</a></li>
<li><a href="">About NAHBRA</a></li>
<li><a href="">Newsroom</a></li>-->
</ul>
</div>
This is the nav part of the css file:
Code:
#menu {background: transparent url(../images/background-blue.png) no-repeat 50%; width: 100%; height: 174px;}
#menu ul {text-align: left; width: 604px; height: 174px; padding: 7px 0 7px 3px; background: url(../images/illustration.jpg) no-repeat 100% 7px; margin-left: -2px;}
#menu>ul {height: 160px; width: 601px; padding-left: 2px; margin: 0 auto;}
#menu ul {text-align: left; width: 604px; height: 174px; padding: 7px 0 7px 3px; background: url(../images/illustration.jpg) no-repeat 100% 7px; margin-left: -2px;}
#menu>ul {height: 160px; width: 601px; padding-left: 2px; margin: 0 auto;}
And here is the image of the homepage:
edit: lnk removed
So, what is the best way to place the menu where I need it and for it to stay within the 'navigation' container no matter how the browser is resized?
Thank you very much for your help with this.
Rob.
Poster: Ruth
Dated: Thursday March 17 2005 - 22:11:59 GMT
Could you post the html coding for that page, and the css? I would need it to play around with the menu, though some others may be able to figure things out without that.
The one sure way to make sure the menu moves with the layout is to put it in a table. You cannot put it in a div because that can cause problems in some browsers.
Ruth
Poster: 1skydive
Dated: Friday March 18 2005 - 0:14:22 GMT
Ruth wrote:
Could you post the html coding for that page, and the css? I would need it to play around with the menu, though some others may be able to figure things out without that.
The one sure way to make sure the menu moves with the layout is to put it in a table. You cannot put it in a div because that can cause problems in some browsers.
Ruth
The one sure way to make sure the menu moves with the layout is to put it in a table. You cannot put it in a div because that can cause problems in some browsers.
Ruth
Hi, Thanks for the reply. Since I'm using smarty, the html and code is broken up into separate files, but here is a copy of the 'view source'
Code:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="KEYWORDS" CONTENT="test, test">
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
<META NAME="DESCRIPTION" CONTENT="test">
<META NAME="AUTHOR" CONTENT="test">
<META NAME="TITLE" CONTENT="test">
<META NAME="RESOURCE-TYPE" CONTENT="document">
<META NAME="RATING" CONTENT="GENERAL">
<META NAME="DISTRIBUTION" CONTENT="Global">
<META NAME="REVISIT-AFTER" CONTENT="2 Days">
<META HTTP-EQUIV="REPLY-TO" CONTENT="test">
<META NAME="COPYRIGHT" CONTENT="Copyright (c) 2005">
<link rel="stylesheet" type="text/css" href="../styles/styles.css" />
<SCRIPT language=JavaScript src="../menu/milonic_src.js" type=text/javascript></SCRIPT>
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src="../menu/mmenuns4.js"><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src="../menu/mmenudom.js"><\/scr"+"ipt>");
</script>
</head>
<body>
<div id="header">
<h1><a href="/" title="Go to the Home page!">NAHBRA<span></span></a></h1>
</div>
<div id="menu">
<ul>
<script language=JavaScript>
_menuCloseDelay=500 // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150 // The time delay before menus open on mouse over
_subOffsetTop=10 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset
with(menuStyle=new mm_style()){
//onclass="cssmouseon";
//offclass="cssmouseoff";
onbgcolor="#4F8EB6";
align="";
//separatorwidth="150";
separatorpadding="0";
oncolor="#ffffff";
offbgcolor="#79A7C5";
//offbgcolor="#DCE9F0";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize="1";
padding=5;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="../menu/arrow.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=80;
left=30;
//top=100;
//left=10;
menuwidth=150;
//menuwidth="100%";
menualign="center";
alwaysvisible=1;
orientation="vertical";
screenposition="center";
align="center";
/*
style=menuStyle;
top=80;
left=30;
//top=100;
//left=10;
menuwidth=150;
alwaysvisible=1;
position="relative";
overflow="scroll";
*/
aI("text=Member Benefits;showmenu=Member Benefits;");
aI("text=Member Directory;showmenu=Member Directory;");
aI("text=Become A Member;showmenu=Become A Member;");
aI("text=Calendar of Events;showmenu=Member Benefits;");
aI("text=About NAHBRA;showmenu=About NAHBRA;");
aI("text=Newsroom;showmenu=Newsroom;");
}
with(milonic=new menuname("Member Directory")){
style=menuStyle;
aI("text=Member Directory;url=http://;target=");
}
with(milonic=new menuname("Become A Member")){
style=menuStyle;
aI("text=Membership Application;url=http://;target=");
}
with(milonic=new menuname("Calendar of Events")){
style=menuStyle;
aI("text=Calendar;url=http://;target=");
}
with(milonic=new menuname("About NAHBRA")){
style=menuStyle;
aI("text=Code of Ethics;url=http://;target=");
aI("text=Board of Directors;url=http://;target=");
aI("text=Councils & Committees;url=http://;target=");
aI("text=HBRANH;url=http://;target=");
aI("text=NAHB;url=http://;target=");
}
with(milonic=new menuname("Newsroom")){
style=menuStyle;
aI("text=Newsroom;url=http://;target=");
aI("text=Newsletter;url=http://;target=");
}
with(milonic=new menuname("Member Services")){
style=menuStyle;
aI("text=NAHBRA Logo;url=http://;target=");
aI("text=Spike Club;url=http://www.spike.com;target=_blank");
}
with(milonic=new menuname("Member Benefits")){
style=menuStyle;
aI("text=Legislative Issues;url=http://www.bob.com;target=_blank");
aI("text=Marketing Opportunities;url=http://;target=");
aI("text=Networking;url=http://;target=");
aI("text=National Membership;url=http://;target=");
aI("text=Member Services & Development;showmenu=Member Services;target=");
aI("text=State Membership;url=http://;target=");
aI("text=Monthly Newsletter;url=http://;target=");
}
drawMenus();
</script>
<!--<li class="bigger"><a href="">Member Benefits</a></li>
<li class="bigger"><a href="">Member Directory</a></li>
<li class="bigger"><a href="">Become A Member</a></li>
<li class="bigger"><a href="">Calendar of Events</a></li>
<li><a href="">About NAHBRA</a></li>
<li><a href="">Newsroom</a></li>-->
</ul>
</div>
<div id="main">
<div id="main-container">
<div id="content">
<p id="top-links"><a href="">Home</a> | <a href="">Contact</a> | <a href="">Sitemap</a></p>
<h2>test</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qu
</div>
<div id="side">
<a href="http://"></a>
<a href="http://"></a>
</div>
<div id="footer">
<p id="contact">
<br /><br /><br />P:<br />F:<br />
</p>
<p>
<a href="index" title="Home James and don't spare the horses!" accesskey="I">Member Benefits</a> | <a href="home" title="Go Home!" accesskey="h">Member Directory</a> | <a href="aboutus" title="About Us!" accesskey="sa">About NAHBRA</a> | <a href="test" title="Donna's Test Page" accesskey="s">Calendar of Events</a><br /><a href="builders" title="Builders Here" accesskey="b">Become A Member</a> | <a href="donnatest" title="Newsroom" accesskey="sa">Newsroom</a> | <a href="contact" title="asdasd" accesskey="sa">Contact Us</a> | <a href="bob2" title="dsfsdfsd" accesskey="sd">Sitemap</a> | <a href="test" title="asdasd" accesskey="as">Home</a>
</p>
</div>
</div>
<p id="credits">© Copyright 2005 - NAHBRA<br /></p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="KEYWORDS" CONTENT="test, test">
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
<META NAME="DESCRIPTION" CONTENT="test">
<META NAME="AUTHOR" CONTENT="test">
<META NAME="TITLE" CONTENT="test">
<META NAME="RESOURCE-TYPE" CONTENT="document">
<META NAME="RATING" CONTENT="GENERAL">
<META NAME="DISTRIBUTION" CONTENT="Global">
<META NAME="REVISIT-AFTER" CONTENT="2 Days">
<META HTTP-EQUIV="REPLY-TO" CONTENT="test">
<META NAME="COPYRIGHT" CONTENT="Copyright (c) 2005">
<link rel="stylesheet" type="text/css" href="../styles/styles.css" />
<SCRIPT language=JavaScript src="../menu/milonic_src.js" type=text/javascript></SCRIPT>
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src="../menu/mmenuns4.js"><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src="../menu/mmenudom.js"><\/scr"+"ipt>");
</script>
</head>
<body>
<div id="header">
<h1><a href="/" title="Go to the Home page!">NAHBRA<span></span></a></h1>
</div>
<div id="menu">
<ul>
<script language=JavaScript>
_menuCloseDelay=500 // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150 // The time delay before menus open on mouse over
_subOffsetTop=10 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset
with(menuStyle=new mm_style()){
//onclass="cssmouseon";
//offclass="cssmouseoff";
onbgcolor="#4F8EB6";
align="";
//separatorwidth="150";
separatorpadding="0";
oncolor="#ffffff";
offbgcolor="#79A7C5";
//offbgcolor="#DCE9F0";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize="1";
padding=5;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="../menu/arrow.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=80;
left=30;
//top=100;
//left=10;
menuwidth=150;
//menuwidth="100%";
menualign="center";
alwaysvisible=1;
orientation="vertical";
screenposition="center";
align="center";
/*
style=menuStyle;
top=80;
left=30;
//top=100;
//left=10;
menuwidth=150;
alwaysvisible=1;
position="relative";
overflow="scroll";
*/
aI("text=Member Benefits;showmenu=Member Benefits;");
aI("text=Member Directory;showmenu=Member Directory;");
aI("text=Become A Member;showmenu=Become A Member;");
aI("text=Calendar of Events;showmenu=Member Benefits;");
aI("text=About NAHBRA;showmenu=About NAHBRA;");
aI("text=Newsroom;showmenu=Newsroom;");
}
with(milonic=new menuname("Member Directory")){
style=menuStyle;
aI("text=Member Directory;url=http://;target=");
}
with(milonic=new menuname("Become A Member")){
style=menuStyle;
aI("text=Membership Application;url=http://;target=");
}
with(milonic=new menuname("Calendar of Events")){
style=menuStyle;
aI("text=Calendar;url=http://;target=");
}
with(milonic=new menuname("About NAHBRA")){
style=menuStyle;
aI("text=Code of Ethics;url=http://;target=");
aI("text=Board of Directors;url=http://;target=");
aI("text=Councils & Committees;url=http://;target=");
aI("text=HBRANH;url=http://;target=");
aI("text=NAHB;url=http://;target=");
}
with(milonic=new menuname("Newsroom")){
style=menuStyle;
aI("text=Newsroom;url=http://;target=");
aI("text=Newsletter;url=http://;target=");
}
with(milonic=new menuname("Member Services")){
style=menuStyle;
aI("text=NAHBRA Logo;url=http://;target=");
aI("text=Spike Club;url=http://www.spike.com;target=_blank");
}
with(milonic=new menuname("Member Benefits")){
style=menuStyle;
aI("text=Legislative Issues;url=http://www.bob.com;target=_blank");
aI("text=Marketing Opportunities;url=http://;target=");
aI("text=Networking;url=http://;target=");
aI("text=National Membership;url=http://;target=");
aI("text=Member Services & Development;showmenu=Member Services;target=");
aI("text=State Membership;url=http://;target=");
aI("text=Monthly Newsletter;url=http://;target=");
}
drawMenus();
</script>
<!--<li class="bigger"><a href="">Member Benefits</a></li>
<li class="bigger"><a href="">Member Directory</a></li>
<li class="bigger"><a href="">Become A Member</a></li>
<li class="bigger"><a href="">Calendar of Events</a></li>
<li><a href="">About NAHBRA</a></li>
<li><a href="">Newsroom</a></li>-->
</ul>
</div>
<div id="main">
<div id="main-container">
<div id="content">
<p id="top-links"><a href="">Home</a> | <a href="">Contact</a> | <a href="">Sitemap</a></p>
<h2>test</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qu
</div>
<div id="side">
<a href="http://"></a>
<a href="http://"></a>
</div>
<div id="footer">
<p id="contact">
<br /><br /><br />P:<br />F:<br />
</p>
<p>
<a href="index" title="Home James and don't spare the horses!" accesskey="I">Member Benefits</a> | <a href="home" title="Go Home!" accesskey="h">Member Directory</a> | <a href="aboutus" title="About Us!" accesskey="sa">About NAHBRA</a> | <a href="test" title="Donna's Test Page" accesskey="s">Calendar of Events</a><br /><a href="builders" title="Builders Here" accesskey="b">Become A Member</a> | <a href="donnatest" title="Newsroom" accesskey="sa">Newsroom</a> | <a href="contact" title="asdasd" accesskey="sa">Contact Us</a> | <a href="bob2" title="dsfsdfsd" accesskey="sd">Sitemap</a> | <a href="test" title="asdasd" accesskey="as">Home</a>
</p>
</div>
</div>
<p id="credits">© Copyright 2005 - NAHBRA<br /></p>
</div>
</body>
</html>
Here is my css file. I've removed all my failed attempts at getting this to work, so this is the plain css for for the homepage:
Code:
* {margin: 0; padding: 0;}
img {border: none;}
body {font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; background: #fff url(../images/background.png) repeat-y 50%; text-align: center;}
#header {text-align: left; height: 104px; background: url(../images/bg-header.jpg) no-repeat right; margin: 0 auto; padding: 4px 0 0 19px; width: 602px;}
html>body #header {width: 584px; height: 100px;}
#header h1 {position: relative; font-size: 80%;}
#header h1 a span {position: absolute; top: 0; left: 0; background: url(../images/logo.png) no-repeat;}
#header h1, #header h1 a, #header h1 a span {width: 114px; height: 95px; display: block;}
#menu {background: transparent url(../images/background-blue.png) no-repeat 50%; width: 100%; height: 174px;}
#menu ul {text-align: left; width: 604px; height: 174px; padding: 7px 0 7px 3px; background: url(../images/illustration.jpg) no-repeat 100% 7px; margin-left: -2px;}
#menu>ul {height: 160px; width: 601px; padding-left: 2px; margin: 0 auto;}
#menu ul li {background: #79A7C5; height: 26px; width: 151px; border: 1px solid white; border-top: none; list-style-type: none; font-size: 75%;}
#menu ul li.bigger {height: 27px;}
#menu ul>li {width: 149px; height: 25px;}
#menu ul>li.bigger {height: 26px;}
#menu ul li a {color: white; text-decoration: none; display: block; width: 149px; height: 25px; padding: 6px 0 0 12px; font-weight: bold;}
#menu ul li.bigger a {height: 26px;}
#menu ul li>a {width: auto; height: 19px;}
#menu ul li.bigger>a {width: auto; height: 20px;}
#menu ul li a:hover {background: #B2AB9A;}
#main {margin: 0 auto; width: 602px; padding-left: 2px; text-align: left;}
#main-container {background: url(../images/bg-main.png) repeat-y; width: 602px;}
html>body #main {width: 601px;}
#main>#main-container {width: auto;}
#content {float: right; width: 452px; padding: 8px 14px 14px 25px; font-size: small;}
html>body #content {width: 412px;}
p#top-links {text-align: right; color: #206C9F; margin-bottom: 15px;}
p#top-links a {color: #206C9F; font-weight: bold; text-decoration: none;}
p#top-links a:hover {text-decoration: underline;}
#content h2 {color: #00669C; font-weight: bold; margin-bottom: 12px; font-size: medium;}
#content p {font-size: 90%; margin: 0 11px 12px 0; line-height: 1.4;}
#side {padding: 20px 0 200px; width: 150px; float: left; text-align: center;}
#builderbooks {display: block; width: 120px; height: 60px; margin: 0 auto 20px auto;}
#memberadvantage {display: block; width: 106px; height: 81px; margin: 0 auto;}
#footer {clear: both; background: #206C9F; padding: 4px 0; position: relative;}
#footer p {text-align: center; font-size: 70%; line-height: 1.4; color: white; letter-spacing: 1px;}
#footer p a {color: white; text-decoration: none;}
#footer p a:hover {text-decoration: underline;}
#footer #contact {text-align: left; font-size: 70%; position: absolute; left: 20px; top: -110px; letter-spacing: normal; color: #206C9F;}
#footer #contact a {color: #206C9F;}
#credits {font-size: 70%; text-align: center; color: #206C9F; margin: 15px 0;}
#credits a {color: #206C9F;}
#credits a:hover {text-decoration: none;}
/*************************************************
*************************************************/
/* Menu styles */
/* End Menu Styles
img {border: none;}
body {font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; background: #fff url(../images/background.png) repeat-y 50%; text-align: center;}
#header {text-align: left; height: 104px; background: url(../images/bg-header.jpg) no-repeat right; margin: 0 auto; padding: 4px 0 0 19px; width: 602px;}
html>body #header {width: 584px; height: 100px;}
#header h1 {position: relative; font-size: 80%;}
#header h1 a span {position: absolute; top: 0; left: 0; background: url(../images/logo.png) no-repeat;}
#header h1, #header h1 a, #header h1 a span {width: 114px; height: 95px; display: block;}
#menu {background: transparent url(../images/background-blue.png) no-repeat 50%; width: 100%; height: 174px;}
#menu ul {text-align: left; width: 604px; height: 174px; padding: 7px 0 7px 3px; background: url(../images/illustration.jpg) no-repeat 100% 7px; margin-left: -2px;}
#menu>ul {height: 160px; width: 601px; padding-left: 2px; margin: 0 auto;}
#menu ul li {background: #79A7C5; height: 26px; width: 151px; border: 1px solid white; border-top: none; list-style-type: none; font-size: 75%;}
#menu ul li.bigger {height: 27px;}
#menu ul>li {width: 149px; height: 25px;}
#menu ul>li.bigger {height: 26px;}
#menu ul li a {color: white; text-decoration: none; display: block; width: 149px; height: 25px; padding: 6px 0 0 12px; font-weight: bold;}
#menu ul li.bigger a {height: 26px;}
#menu ul li>a {width: auto; height: 19px;}
#menu ul li.bigger>a {width: auto; height: 20px;}
#menu ul li a:hover {background: #B2AB9A;}
#main {margin: 0 auto; width: 602px; padding-left: 2px; text-align: left;}
#main-container {background: url(../images/bg-main.png) repeat-y; width: 602px;}
html>body #main {width: 601px;}
#main>#main-container {width: auto;}
#content {float: right; width: 452px; padding: 8px 14px 14px 25px; font-size: small;}
html>body #content {width: 412px;}
p#top-links {text-align: right; color: #206C9F; margin-bottom: 15px;}
p#top-links a {color: #206C9F; font-weight: bold; text-decoration: none;}
p#top-links a:hover {text-decoration: underline;}
#content h2 {color: #00669C; font-weight: bold; margin-bottom: 12px; font-size: medium;}
#content p {font-size: 90%; margin: 0 11px 12px 0; line-height: 1.4;}
#side {padding: 20px 0 200px; width: 150px; float: left; text-align: center;}
#builderbooks {display: block; width: 120px; height: 60px; margin: 0 auto 20px auto;}
#memberadvantage {display: block; width: 106px; height: 81px; margin: 0 auto;}
#footer {clear: both; background: #206C9F; padding: 4px 0; position: relative;}
#footer p {text-align: center; font-size: 70%; line-height: 1.4; color: white; letter-spacing: 1px;}
#footer p a {color: white; text-decoration: none;}
#footer p a:hover {text-decoration: underline;}
#footer #contact {text-align: left; font-size: 70%; position: absolute; left: 20px; top: -110px; letter-spacing: normal; color: #206C9F;}
#footer #contact a {color: #206C9F;}
#credits {font-size: 70%; text-align: center; color: #206C9F; margin: 15px 0;}
#credits a {color: #206C9F;}
#credits a:hover {text-decoration: none;}
/*************************************************
*************************************************/
/* Menu styles */
/* End Menu Styles
I really appreciate any direction with this... if I had hair I would have pulled it out by now!
Poster: Ruth
Dated: Friday March 18 2005 - 7:22:40 GMT
Hi Rob,
First, you should know that I don't use css, or rather the little I use is margins, padding, body background color and image. I don't work with divs. That said, looking at your screenshot and your style sheet, it looks like there is a greyish background for the whole page, then the divs have the actual content stuff, i.e. the top pictures, middle pictures, and so on centered with a width of 604px and that gray on the right and left will expand as the resolution gets higher and the middle part will remain 604 px wide. If that's the case. Here is what I did. You can play with it and see if it will work as you want.
This is the menu_data.js file:
Code:
_menuCloseDelay=500 // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150 // The time delay before menus open on mouse over
_subOffsetTop=10 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset
with(menuStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#669acc";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize=1;
padding=5;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}
with(milonic=new menuname("Member Directory")){
style=menuStyle;
aI("text=Member Directory;url=http://;target=");
}
with(milonic=new menuname("Become A Member")){
style=menuStyle;
aI("text=Membership Application;url=http://;target=");
}
with(milonic=new menuname("Calendar of Events")){
style=menuStyle;
aI("text=Calendar;url=http://;target=");
}
with(milonic=new menuname("About NAHBRA")){
style=menuStyle;
aI("text=Code of Ethics;url=http://;target=");
aI("text=Board of Directors;url=http://;target=");
aI("text=Councils & Committees;url=http://;target=");
aI("text=HBRANH;url=http://;target=");
aI("text=NAHB;url=http://;target=");
}
with(milonic=new menuname("Newsroom")){
style=menuStyle;
aI("text=Newsroom;url=http://;target=");
aI("text=Newsletter;url=http://;target=");
}
with(milonic=new menuname("Member Services")){
style=menuStyle;
aI("text=NAHBRA Logo;url=http://;target=");
aI("text=Spike Club;url=http://www.spike.com;target=_blank");
}
with(milonic=new menuname("Member Benefits")){
style=menuStyle;
aI("text=Legislative Issues;url=http://www.bob.com;target=_blank");
aI("text=Marketing Opportunities;url=http://;target=");
aI("text=Networking;url=http://;target=");
aI("text=National Membership;url=http://;target=");
aI("text=Member Services & Development;showmenu=Member Services;target=");
aI("text=State Membership;url=http://;target=");
aI("text=Monthly Newsletter;url=http://;target=");
}
drawMenus();
_menuOpenDelay=150 // The time delay before menus open on mouse over
_subOffsetTop=10 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset
with(menuStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#669acc";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize=1;
padding=5;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}
with(milonic=new menuname("Member Directory")){
style=menuStyle;
aI("text=Member Directory;url=http://;target=");
}
with(milonic=new menuname("Become A Member")){
style=menuStyle;
aI("text=Membership Application;url=http://;target=");
}
with(milonic=new menuname("Calendar of Events")){
style=menuStyle;
aI("text=Calendar;url=http://;target=");
}
with(milonic=new menuname("About NAHBRA")){
style=menuStyle;
aI("text=Code of Ethics;url=http://;target=");
aI("text=Board of Directors;url=http://;target=");
aI("text=Councils & Committees;url=http://;target=");
aI("text=HBRANH;url=http://;target=");
aI("text=NAHB;url=http://;target=");
}
with(milonic=new menuname("Newsroom")){
style=menuStyle;
aI("text=Newsroom;url=http://;target=");
aI("text=Newsletter;url=http://;target=");
}
with(milonic=new menuname("Member Services")){
style=menuStyle;
aI("text=NAHBRA Logo;url=http://;target=");
aI("text=Spike Club;url=http://www.spike.com;target=_blank");
}
with(milonic=new menuname("Member Benefits")){
style=menuStyle;
aI("text=Legislative Issues;url=http://www.bob.com;target=_blank");
aI("text=Marketing Opportunities;url=http://;target=");
aI("text=Networking;url=http://;target=");
aI("text=National Membership;url=http://;target=");
aI("text=Member Services & Development;showmenu=Member Services;target=");
aI("text=State Membership;url=http://;target=");
aI("text=Monthly Newsletter;url=http://;target=");
}
drawMenus();
This is the page:
Code:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="KEYWORDS" CONTENT="test, test">
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
<META NAME="DESCRIPTION" CONTENT="test">
<META NAME="AUTHOR" CONTENT="test">
<META NAME="TITLE" CONTENT="test">
<META NAME="RESOURCE-TYPE" CONTENT="document">
<META NAME="RATING" CONTENT="GENERAL">
<META NAME="DISTRIBUTION" CONTENT="Global">
<META NAME="REVISIT-AFTER" CONTENT="2 Days">
<META HTTP-EQUIV="REPLY-TO" CONTENT="test">
<META NAME="COPYRIGHT" CONTENT="Copyright (c) 2005">
<link rel="stylesheet" type="text/css" href=styles.css" />
<style type="text/css">
body{margin:0px;}
</style>
</head>
<body marginheight="0" marginwidth="0" background="background.png"> <SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</SCRIPT>
<SCRIPT language=JavaScript src="menu_data.js" type=text/javascript></SCRIPT>
<div id="header">
<h1><a href="/" title="Go to the Home page!">NAHBRA<span></span></a></h1>
</div>
<center><table border="0" bordercolor="#CCCCFF" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr>
<td> </td>
<td width="150px" bgcolor="#9acccd"><script>with(milonic=new menuname("Main Menu")){
style=menuStyle;
menuwidth=150;
position="relative";
menualign="center";
orientation="vertical";
alwaysvisible=1;
align="center";
aI("text=Member Benefits;showmenu=Member Benefits;");
aI("text=Member Directory;showmenu=Member Directory;");
aI("text=Become A Member;showmenu=Become A Member;");
aI("text=Calendar of Events;showmenu=Member Benefits;");
aI("text=About NAHBRA;showmenu=About NAHBRA;");
aI("text=Newsroom;showmenu=Newsroom;");
}
drawMenus();
</script></td>
<td width="454px"><img src="illustration1.png" width="454" height="174" border="0" valign="middle"></td>
<td> </td>
</tr>
</table></center>
<div id="main" style="border:1px solid #ff0000">
<div id="main-container">
<div id="content">
<p id="top-links"><a href="">Home</a> | <a href="">Contact</a> | <a href="">Sitemap</a></p>
<h2>test</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qu
</div>
<div id="side">
<a href="http://"></a>
<a href="http://"></a>
</div>
<div id="footer">
<p id="contact">
<br /><br /><br />P:<br />F:<br />
</p>
<p>
<a href="index" title="Home James and don't spare the horses!" accesskey="I">Member Benefits</a> | <a href="home" title="Go Home!" accesskey="h">Member Directory</a> | <a href="aboutus" title="About Us!" accesskey="sa">About NAHBRA</a> | <a href="test" title="Donna's Test Page" accesskey="s">Calendar of Events</a><br /><a href="builders" title="Builders Here" accesskey="b">Become A Member</a> | <a href="donnatest" title="Newsroom" accesskey="sa">Newsroom</a> | <a href="contact" title="asdasd" accesskey="sa">Contact Us</a> | <a href="bob2" title="dsfsdfsd" accesskey="sd">Sitemap</a> | <a href="test" title="asdasd" accesskey="as">Home</a>
</p>
</div>
</div>
<p id="credits">© Copyright 2005 - NAHBRA<br /></p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="KEYWORDS" CONTENT="test, test">
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
<META NAME="DESCRIPTION" CONTENT="test">
<META NAME="AUTHOR" CONTENT="test">
<META NAME="TITLE" CONTENT="test">
<META NAME="RESOURCE-TYPE" CONTENT="document">
<META NAME="RATING" CONTENT="GENERAL">
<META NAME="DISTRIBUTION" CONTENT="Global">
<META NAME="REVISIT-AFTER" CONTENT="2 Days">
<META HTTP-EQUIV="REPLY-TO" CONTENT="test">
<META NAME="COPYRIGHT" CONTENT="Copyright (c) 2005">
<link rel="stylesheet" type="text/css" href=styles.css" />
<style type="text/css">
body{margin:0px;}
</style>
</head>
<body marginheight="0" marginwidth="0" background="background.png"> <SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</SCRIPT>
<SCRIPT language=JavaScript src="menu_data.js" type=text/javascript></SCRIPT>
<div id="header">
<h1><a href="/" title="Go to the Home page!">NAHBRA<span></span></a></h1>
</div>
<center><table border="0" bordercolor="#CCCCFF" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr>
<td> </td>
<td width="150px" bgcolor="#9acccd"><script>with(milonic=new menuname("Main Menu")){
style=menuStyle;
menuwidth=150;
position="relative";
menualign="center";
orientation="vertical";
alwaysvisible=1;
align="center";
aI("text=Member Benefits;showmenu=Member Benefits;");
aI("text=Member Directory;showmenu=Member Directory;");
aI("text=Become A Member;showmenu=Become A Member;");
aI("text=Calendar of Events;showmenu=Member Benefits;");
aI("text=About NAHBRA;showmenu=About NAHBRA;");
aI("text=Newsroom;showmenu=Newsroom;");
}
drawMenus();
</script></td>
<td width="454px"><img src="illustration1.png" width="454" height="174" border="0" valign="middle"></td>
<td> </td>
</tr>
</table></center>
<div id="main" style="border:1px solid #ff0000">
<div id="main-container">
<div id="content">
<p id="top-links"><a href="">Home</a> | <a href="">Contact</a> | <a href="">Sitemap</a></p>
<h2>test</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qu
</div>
<div id="side">
<a href="http://"></a>
<a href="http://"></a>
</div>
<div id="footer">
<p id="contact">
<br /><br /><br />P:<br />F:<br />
</p>
<p>
<a href="index" title="Home James and don't spare the horses!" accesskey="I">Member Benefits</a> | <a href="home" title="Go Home!" accesskey="h">Member Directory</a> | <a href="aboutus" title="About Us!" accesskey="sa">About NAHBRA</a> | <a href="test" title="Donna's Test Page" accesskey="s">Calendar of Events</a><br /><a href="builders" title="Builders Here" accesskey="b">Become A Member</a> | <a href="donnatest" title="Newsroom" accesskey="sa">Newsroom</a> | <a href="contact" title="asdasd" accesskey="sa">Contact Us</a> | <a href="bob2" title="dsfsdfsd" accesskey="sd">Sitemap</a> | <a href="test" title="asdasd" accesskey="as">Home</a>
</p>
</div>
</div>
<p id="credits">© Copyright 2005 - NAHBRA<br /></p>
</div>
</body>
</html>
As you can see I eliminated the <div id="menu"> and replaced it with a table. The bgcolor of the cell where the menu is located is that kind of turquoise. I know you had images, so I guess you could put that as a background-image for that cell. I tend to leave out images and use colors whenever I can for less loading time. This should look like your screenshot.
I cleaned up the menu_data.js file so all that's in there now is what you need for what is being used. Also, note the call for the menu files. They are immediately after the body tag, which is required when putting the menu in a table, and only the main menu goes in the table, the submenus remain in the menu_data.js file.
If this isn't what you were asking, please post back.
Ruth
Poster: 1skydive
Dated: Friday March 18 2005 - 14:13:28 GMT
Thank you very much for your help with this. I can see the turquoise box and it looks like it's placed correctly, so I think I may be able to get it working with the images.
However, I do have another problem now...
I get this error:
Line: 26
Char: 4892
Error: '_MS.overfilter is null or not an object
Code: 0
Any thoughts on what may be causing this? I haven't changed any of the directories or file locations so all the included files should be able to be found.
Thanks again.
Rob.
Poster: Ruth
Dated: Friday March 18 2005 - 15:01:48 GMT
I'm sorry I don't know what that would be and because I have IE5.5 and it won't read more than the first overfilter listed I can't check it. Make sure you had the newest version 5.718a and see if that fixes it. You can also test the overfilter options HERE This is an interactive filter demo Kevin and I put together to let users see different filters and how they look with the menu. You could choose the same filters and see if it is working or giving you an error.
If nothing solves it, then you need to post a new topic about the overfilter and make sure you list your OS and browser.
Ruth
Poster: 1skydive
Dated: Friday March 18 2005 - 21:27:20 GMT
Ruth wrote:
I'm sorry I don't know what that would be and because I have IE5.5 and it won't read more than the first overfilter listed I can't check it. Make sure you had the newest version 5.718a and see if that fixes it. You can also test the overfilter options HERE This is an interactive filter demo Kevin and I put together to let users see different filters and how they look with the menu. You could choose the same filters and see if it is working or giving you an error.
If nothing solves it, then you need to post a new topic about the overfilter and make sure you list your OS and browser.
Ruth
If nothing solves it, then you need to post a new topic about the overfilter and make sure you list your OS and browser.
Ruth
Sorry... it was my fault. I had commented out some of the code while I was testing, but it works again now.
Thank you again Ruth for all your help.
Rob.