Yet Another Two-Menu Question

[cowboyinbrla]

I've set up two menus on the page I'm designing, one stacked atop the other, and have that part working well (thanks to reading up on older questions in the forum here).

However, although in my page code the two menu data files (menu_data.js and menu_data2.js) appear right above each other, with only a line break (br tag) to separate them, there is a big gap between the two menus, both in IE and in Firefox. I'd like the two menus to be right up against each other.

Here's the (sample content) page I've set up where the problem occurs:

http://www.lanewsbureau.net

I'm sure this is a formatting issue of some sort, but I couldn't find a "padding" type attribute that would seem to apply to the space AROUND a menu. If someone could point me in the right direction I'd appreciate it very much.

Also I note in FF, the menu appears partially below the bottom edge of the DIV in which it's located, but if it can be moved up to the correct position, that issue should (I think) solve itself.

Kevin Morgan

[vikenk]

Hi,

The Milonic menu is absolutely positioned (by default), so having a <br> between them would likely do nothing. Looking at your menu data files, I see this in your menu_data.js file:

Code: Select all

with(milonic=new menuname("Rapid Menu")){
alwaysvisible=1;
left=0;
orientation="horizontal";
position="relative";
style=rapidStyle;
top=0;
aI("text=Home;url=http://www.lanewsbureau.com/;");
aI("text=Committee Agendas;url=agendas.asp");
aI("text=House Digest;url=hdigest.asp");
aI("text=House Order of Day;url=horder.asp");
aI("text=Senate Digest;url=sdigest.asp");
aI("text=Senate Order of Day;url=sorder.asp");
}

And your MenuData2.js file:

Code: Select all

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
position="relative";
style=rapidStyle;
top=-40;
left=0;
style=mainmenuStyle;
aI("showmenu=Session;text=Session;");
aI("showmenu=Search;text=Search;");
aI("showmenu=Track;text=Track;");
aI("showmenu=Information;text=Information;");
aI("showmenu=Interim;text=Interim;");
}

I would play around with the TOP and LEFT variables until the menus are aligned the way you want. That's where I would start.

Hope this helps :>)

--
Viken K.
http://www.vikenk.com

[cowboyinbrla]

I'll tinker some more with that. However, with both top and left set to 0, I assumed the two menus would be right next to each other, and they weren't. I tried the "-40" to see if I could force the second menu to move upwards, but that didn't work; I'm reverting that back to 0 as well.

The positions on both are set as relative, so I'm just not sure why there's a gap between them on the page as rendered. There's no HTML between them otherwise (unless it's caused by the blank lines in the .js files themselves).

[Ruth]

Hi,

It's the line break that is causing that. But, you need to fix how you have placed the menus. The menu cannot go into the div that way. Add buildAfterLoad=true; at the top of the data files up where the subOffsets are. Then because you are trying to position them as you are and to make sure there is no problem and they always stay that way, you need to add a table. I've done it so you can just copy and paste to the page and test it.

Code: Select all

<DIV id=menu><!-- #BeginEditable "menu" -->
<SCRIPT language=JavaScript src="milonic_src.js" 
type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); </SCRIPT>
<CENTER><table cellpadding='0' cellspacing='2' border='0'>
<tr>
       <td><SCRIPT language=JavaScript src="menu_data.js" 
type=text/javascript></SCRIPT></td>
</tr>
<tr>
       <td><center><table cellpadding='0' cellspacing='0' border='0'>
<tr>
    <td><SCRIPT language=JavaScript src="menu_data2.js" 
type=text/javascript></SCRIPT></td>
</tr>
</table></center></td>
</tr>
</table>
</CENTER><!-- #EndEditable --></DIV>

Also, you should read the info at the link below my name about table menus. Menus in tables or divs are both relatively positioned and use the same coding. IF you have any problems with the menu using buildAfterLoad=true;, then read that info and place the menus using the old table placement method.


Ruth

[cowboyinbrla]

OK, next question then:

The way you suggested structuring it, there is a table, and within a cell on the second row, there is a second table nested.

Do the two menus need to be structured this way, or can there be stacked tables, or....?

The original plan is/was, to have a horizontal black band across containing menu#1, and then a horizontal blue band across containing menu #2. With nesting tables, that gets a lot more complex to format.

I realize I probably need to create two DIV's, one black and one blue, and perhaps put a table in each, but how to code this is still kind of hazy for me.

Suggestions would be most appreciated.

[Ruth]

Hi,

You can do two divs one above the other, but you will have space, that's just how divs work, or you can create two tables, 100% one above the other and put a nested table in each for the menu as follows. The 100% tables can have the bgcolor set as you want them to be. NOTE: you do not need the div, I just left it because you had it, but I'm pretty sure you could just remove that. You'd have to test and see.

Code: Select all

<DIV id=menu><!-- #BeginEditable "menu" -->
<SCRIPT language=JavaScript src="milonic_src.js" 
type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); </SCRIPT>
<table cellpadding='0' cellspacing='0' border='0' width="100%" style="background-color:#000000">
<tr>
       <td><CENTER><table align="center" cellpadding=0 cellspacing=0 border=0>
<tr>
    <td><SCRIPT language=JavaScript src="menu_data.js" 
type=text/javascript></SCRIPT></td>
</tr>
</table></CENTER></td>
</tr></table>
<table cellpadding='0' cellspacing='0' border='0' width="100%" style="background-color:#0000aa">
<tr>
    <td><center><table cellpadding='0' cellspacing='0' border='0'>
<tr>
    <td><SCRIPT language=JavaScript src="menu_data2.js" 
type=text/javascript></SCRIPT></td>
</tr>
</table></center></td>
</tr>
</table>
<!-- #EndEditable --></DIV>

Ruth