Menu in a div covers next div

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:34

Menu in a div covers next div

Poster: myalo
Dated: Sunday June 3 2007 - 5:28:14 BST

I have created a menu inside a div. The next div is showing under the menu. What is wrong? How can that be fixed?
Here is the link
http://www.uj.edu/contentnew/formilonic1.html
Thanks

Poster: Ruth
Dated: Sunday June 3 2007 - 6:14:15 BST

Hi,

You need to upgrade to the newest version of the menu, you are downlevel some 12 upgrades.

As to covering things, what exactly is your layout supposed to be, given your css for the content div that seems to start at the 0px top position and the menu at 20px top position. Margin defines space around an element so from the margins I'm seeing the menu is where you have the div placed based on the margin.

Also, you need to place the menu using position="relative"; since you are putting it in a div and want it to stay in that div. Finally, take a look at this page, it contains directions for tables/divs placement, and the top one is the newest way to do it, much easier than the old way. The new method allows you to keep all the files in the data file, and just add buildAfterLoad=true; at the top section, and position="relative"; in the main menu. Then you just call all the files in the div, instead of having to split out the main menu into it's own file and calling the other files right after the body tag. Though the link says table it is table or div. But, you need to upgrade the menu for this.

http://support.milonic.com/beginners/ta ... /index.htm

Ruth

Poster: myalo
Dated: Sunday June 3 2007 - 7:26:48 BST

the menu js files are now updated.
I am not using source files for the menu definition. As all is created by asp it all included in the main page.
with or without buildAfterLoad=true; made not difference.
position="relative"; seems to fix the issue.

Still have one problem. As you can see in http://www.uj.edu/Contentnew/ajuContent ... &u=977&t=0
I made the width of the <div> containing the left side menu wider then the menuwidth and gave it a background-color for demonstration. The menu shows in the center. I tried menualigh="left"; but the menu still shows in the middle of the div.
Any suggestions?
Thanks again for all your help
Moshe

Poster: myalo
Dated: Sunday June 3 2007 - 7:38:54 BST

Hi Ruth,

Problem of aligning menu to the left of div resolved. My test was in IE 6. I added to div style text-align:left; and it fixed it. I also added fixMozillaZIndex=true; as in FireFox I could not see the menu all together. This fixed the issue in FireFox.

Can you look at the link I gave in FireFox? Something is worng with dashed borders on the sides. Now they are not showing. They do show in IE 6.
Thanks
Moshe
The link again is
http://www.uj.edu/Contentnew/ajuContent ... &u=977&t=0

Poster: Ruth
Dated: Sunday June 3 2007 - 16:34:31 BST

Hi,

It has something to do with the fact that the menu is in a div, I think. When I remove it and just set it using top and left then the border works fine. But, when you have it relatively positioned like that in a div for some reason you must specify a menuheight=; in the actual main menu to get the border to show on all sides in FF. Try menuheight=270;

I am reporting this to Milonic.

Ruth

Poster: myalo
Dated: Sunday June 3 2007 - 19:36:33 BST

As the left menu is dynamic - build in an ASP page - specifying hight might be an issue as it depands on number of items which changes from area to area. It is possible to calculate it but it might be different for differenet screens / browswer. Let's see what Milonic says.
Thanks again
Moshe

Poster: Ruth
Dated: Monday June 4 2007 - 8:25:16 BST

Hi,

There is another way to do it using css in the items in the main menu.

put // in front of the border stuff in your leftmenuStyle so it becomes inactive

Code:

//bordercolor="#296488";
//borderstyle="dashed";
//borderwidth=1;

add this at the end of your style tags in the head of the document

Code:

.itemtop{
border-top:1px dashed #296488;border-right:1px dashed #296488;border-bottom:none;border-left:1px dashed #296488;text-decoration:none;
}
.itembot{
border-top:none;border-right:1px dashed #296488;border-bottom:1px dashed #296488;border-left:1px dashed #296488;text-decoration:none;
}
.itemmid{
border-top:none;border-right:1px dashed #296488;border-bottom:none;border-left:1px dashed #296488;text-decoration:none;
}

Then in your main menu, the items call the classes necessary for them

Code:

aI("showmenu=139;text=Message from the President;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=139;offclass=itemtop;onclass=itemtop;");
aI("showmenu=140;text=Mission ;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=140;offclass=itemmid;onclass=itemmid;");
aI("showmenu=141;text=History ;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=141;offclass=itemmid;onclass=itemmid;");
aI("showmenu=142;text=How to get There ;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=142;offclass=itemmid;onclass=itemmid;");
aI("showmenu=143;text=Business and Technology;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=143;offclass=itemmid;onclass=itemmid;");
aI("showmenu=144;text=Vision;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=144;offclass=itemmid;onclass=itemmid;");
aI("showmenu=331;text=Directory;url=http://www.uj.edu/Content/Directory.asp?CID=331;offclass=itemmid;onclass=itemmid;");
aI("showmenu=890;text=Contact Us;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=890;offclass=itemmid;onclass=itemmid;");
aI("showmenu=951;text=Support and Suggestions;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=951;offclass=itemmid;onclass=itemmid;");
aI("showmenu=1131;text=Virtual Tour;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=1131;offclass=itemmid;onclass=itemmid;");
aI("showmenu=1713;text=Ezine;url=http://www.uj.edu/Content/FirstContentUnit.asp?CID=1713;offclass=itembot;onclass=itembot;");

This actually puts the borders around each item and will be fine in all browsers as far as I know. It's the actual menu that's the problem and since it only happens with position="relative"; I'm guessing there is a conflict with regard the container div, the left div and the divs within the menu programming.

Ruth

Industrial Strength JavaScript and DHTML Menus

Menu in a div covers next div