Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

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:29

Aligning the menu with an image


Poster: shinomen
Dated: Thursday May 6 2004 - 17:40:18 BST

http://compueasy.suddenspecials.com/

The above link is the look I'm trying to acheive. I've got my menu setup so that it is relative. I can't seem to get the logo and the menu to meet up perfectly. What happens is the logo ends up being on one line and the menu is on a second line. It's almost as though there is a paragraph break, but I know for sure there is not. How can I match the menu up perfectly with the logo? Do I have to set the positioning to absolute?


Here's what it's looking like now http://www.compueasy.com/pics/navbar.gif


Thanks in advance

[/img]


Poster: Ruth
Dated: Thursday May 6 2004 - 19:24:40 BST

We need a url or the page coding and menu coding. I see the picture and I could make a guess that's it's something in padding, or margins or css styles, but then there might be a hundred other guesses that would be just as applicable. Do you have a way to post a test, or can you post the page code and menu code for the guys here?

Ruth


Poster: shinomen
Dated: Thursday May 6 2004 - 20:02:36 BST

Here is the menu data.js file

Quote:
_menuCloseDelay=15 // The time delay for menus to remain visible on mouse out
_menuOpenDelay=0 // The time delay before menus open on mouse over
_followSpeed=5 // Follow scrolling speed
_followRate=50 // Follow scrolling Rate
_subOffsetTop=5 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset
_scrollAmount=3 // Only needed for Netscape 4.x
_scrollDelay=20 // Only needed for Netcsape 4.x



with(menuStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#DCE9F0";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=0;
separatorcolor="#2D729D";
separatorsize="0";
padding=0;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";

}


with(Compueasy=new menuname("InetSrvcs")){
style=menuStyle;
overflow="scroll";
aI("text=Residential Services;showmenu=Residential;status=Residential;");
aI("text=Business Services;showmenu=Business;status=Business;");

}

with(Compueasy=new menuname("Business")){
style=menuStyle;
overflow="scroll";
aI("text=Dial Up;url=http://www.compueasy.com/ss/webpages/services/business.htm#anchor1;");
aI("text=DSL High Speed;url=http://www.compueasy.com/ss/webpages/services/business.htm#anchor1;");
aI("text=Satellite;url=http://www.compueasy.com/ss/webpages/services/business.htm#anchor2;");
aI("text=ISDN;url=http://www.compueasy.com/ss/webpages/services/business.htm#anchor2;");
aI("text=Web Accelerator;url=http://www.compueasy.com/ss/webpages/services/business.htm#anchor3;");
aI("text=Pop-Up Blocker;url=http://www.compueasy.com/ss/webpages/services/business.htm#anchor3;");
aI("text=Email Filtering;url=http://www.compueasy.com/ss/webpages/services/business.htm#anchor3;");
aI("text=Web Hosting;url=http://www.compueasy.com/ss/webpages/services/business.htm#anchor3;");
}

with(Compueasy=new menuname("Residential")){
style=menuStyle;
overflow="scroll";
aI("text=Dial Up;url=http://www.compueasy.com/ss/webpages/services/residential.htm#anchor1;");
aI("text=DSL High Speed;url=http://www.compueasy.com/ss/webpages/services/residential.htm#anchor1;");
aI("text=Satellite;url=http://www.compueasy.com/ss/webpages/services/residential.htm#anchor2;");
aI("text=ISDN;url=http://www.compueasy.com/ss/webpages/services/residential.htm#anchor2;");
aI("text=Web Accelerator;url=http://www.compueasy.com/ss/webpages/services/residential.htm#anchor3;");
aI("text=Pop-Up Blocker;url=http://www.compueasy.com/ss/webpages/services/residential.htm#anchor3;");
aI("text=Email Filtering;url=http://www.compueasy.com/ss/webpages/services/residential.htm#anchor3;");
aI("text=Web Hosting;url=http://www.compueasy.com/ss/webpages/services/residential.htm#anchor3;");
}

with(Compueasy=new menuname("computers")){
style=menuStyle;
aI("text=Sales;url=http://www.compueasy.com/sales.html;status=(aq) Web Server Hosting & Services;");
aI("text=Service and Repair;url=http://www.compueasy.com/compservice.html;");
}

with(Compueasy=new menuname("Contact")){
style=menuStyle;
aI("text=Apache Web Server;url=http://www.apache.org/;status=Apache Web Server, the basis of Milonic's Web Site;");
aI("text=MySQL Database Server;url=http://ww.mysql.com/;status=MySQL, Milonic's Prefered Choice of Database Server;");
aI("text=PHP - Development;url=http://www.php.net/;status=PHP - Web Server Scripting as used by Milonic;");
aI("text=phpBB Web Forum System;url=http://www.phpbb.net/;status=PHP Based Web Forum, Milonic's Recommended Forum Software;");
aI("text=Anti Spam Tools;showmenu=Anti Spam;status=Anti Spam Solutions, as used by Milonic;");
}

with(Compueasy=new menuname("Support")){
style=menuStyle;
aI("text=Internet Support;url=http://www.compueasy.com/support.html;status=Compueasy Internet Support;");
aI("text=Computer Support;showmenu=compsupport;status=Computer Hardware Support");
}

with(Compueasy=new menuname("compsupport")){
style=menuStyle;
aI("text=Download Drivers;url=;status=Download Hardware Drivers;");
aI("text=Warranty Information;url=;status=Compueasy Warranty Information");
}




drawMenus();



Here is the html of the page

Quote:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>
<SCRIPT language=JavaScript src="http://www.compueasy.com/ss/scriptfiles/navbar/milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript>
if (parent.frames.length) { top.location=document.location;}
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=http://www.compueasy.com/ss/scriptfiles/navbar/mmenuns4.js></scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=http://www.compueasy.com/ss/scriptfiles/navbar/mmenudom.js></scr"+"ipt>");
</SCRIPT>
<SCRIPT language=JavaScript src="http://www.compueasy.com/ss/scriptfiles/navbar/menu_data.js" type=text/javascript>
</SCRIPT>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
<tr>
<td>
<img border="0" src="http://www.compueasy.com/ss/images/navbar/navbarlogo3.gif" width="270" height="80">
<SCRIPT>
with(Compueasy=new menuname("Main Menu")){
style=menuStyle;
top=0;
left=0;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=;showmenu=;");
aI("image=http://www.compueasy.com/ss/images/navbar/HOME.gif;url=http://www.compueasy.com/;");
aI("image=http://www.compueasy.com/ss/images/navbar/INTERNET.gif;showmenu=inetsrvcs;");
aI("image=http://www.compueasy.com/ss/images/navbar/COMPUTER.gif;showmenu=computers;");
aI("image=http://www.compueasy.com/ss/images/navbar/SUPPORT.gif;showmenu=support");
aI("image=http://www.compueasy.com/ss/images/navbar/CONTACT.gif;url=http://www.compueasy.com/contact.html");
aI("text=;showmenu=;");
}
drawMenus();
</SCRIPT>
</td>
</tr>
<tr>
<td height="27">&nbsp;</td>
</tr>
</table>

</body>

</html>


Let me know if you need anything else

Thanks :)


Poster: Ruth
Dated: Friday May 7 2004 - 1:19:16 BST

Ok, I made a page, and I don't really know what size your images are, but I made them from the navbar.gif link you had. The only way I could get it to get rid of the space was to remake your table and put the logo image in a cell above the menu witih a declared height of 80
Code:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">

<tr>
       <td height="80"><img border="0" src="navbar.gif" width="270" height="80"></td>
</tr>
<tr><td > <SCRIPT>
with(Compueasy=new menuname("Main Menu")){
style=menuStyle;
top=0;
left=0;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=;showmenu=;");
aI("image=HOME.gif;url=http://www.compueasy.com/;");
aI("image=INTERNET.gif;showmenu=inetsrvcs;");
aI("image=COMPUTER.gif;showmenu=computers;");
aI("image=SUPPORT.gif;showmenu=support");
aI("image=CONTACT.gif;url=http://www.compueasy.com/contact.html");
aI("text=;showmenu=;");
}
drawMenus();
</SCRIPT>
</td>
</tr>
<tr>
<td height="27">&nbsp;</td> </tr><tr> <td></td>
</tr>
</table>


I tested it in Netscape 6, 7, opera 6, 7, Firebird .07 and ie 5.5 and there's no space.

Ruth


Poster: shinomen
Dated: Friday May 7 2004 - 3:08:37 BST

I copied the code and pasted it into my page. Thanks for getting rid of the space but the menu is supposed to appear on the right of the logo. Kinda like it's all inline. It's almost as though the image is on the first line, then I pressed enter for a new line, and inserted the menu on the second line. It should all appear on the first line.


Poster: Ruth
Dated: Friday May 7 2004 - 6:18:43 BST

Go back to the original table you had, then put a small two side by side cell table in the top cell of the original. Put the logo in the left cell and menu in the right one.

Code:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
<tr>
<td> <table border="0" cellpadding="0" cellspacing="0">
<tr>
       <td><img border="0" src="navbarlogo3.gif" width="270" height="80"></td>
       <td valign="bottom"><SCRIPT>
with(Compueasy=new menuname("Main Menu")){
style=menuStyle;
top=0;
left=0;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=;showmenu=;");
aI("image=home.gif;url=http://www.compueasy.com/;");
aI("image=home.gif;showmenu=inetsrvcs;");
aI("image=computer.gif;showmenu=computers;");
aI("image=support.gif;showmenu=support");
aI("image=contact.gif;url=http://www.compueasy.com/contact.html");
aI("text=;showmenu=;");
}
drawMenus();
</SCRIPT></td>
</tr>
</table></td></tr>
<tr>
<td height="27">&nbsp;</td>
</tr>
</table>


Ruth


Poster: shinomen
Dated: Friday May 7 2004 - 12:12:07 BST

It worked like a charm. Thank you very much.

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support