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: Select all
_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();
This is the page:
Code: Select all
<?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://websites.milonic.com/"></a>
<a href="http://websites.milonic.com/"></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
