Menu Width

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

Menu Width

Poster: power_pack66
Dated: Monday July 10 2006 - 13:10:01 BST

I have tried to change the menu width on my site, but it is displaying like this:

http://img86.imageshack.us/img86/7703/menu9ah.jpg

How can I fix this problem.

Here is the menu_data file i am using:

http://www.3volutionize.com/forums/jscr ... ourning.js

Poster: Ruth
Dated: Monday July 10 2006 - 18:02:01 BST

Hi,

We really need to see the page and we need to know how you are trying to change it. Bigger? Smaller? 100%

That file says position relative, so if it's in a table, it's only going to be as big as the particular cell in the table is.

Ruth

Poster: power_pack66
Dated: Monday July 10 2006 - 18:06:19 BST

Ok, well it is not in a table.

The page is here, http://www.3volutionize.com/forums/inde ... &skinid=21

Login:

User - menuhelp
Pass - menuhelp33

Poster: Ruth
Dated: Monday July 10 2006 - 18:20:23 BST

Hi,

OK, you have a top and left listed but you also have position="relative"; not sure why you have that in there, which do you want?. Do you want it 180px in from the left and 10px down from the top? And, you have no menuwidth listed anyplace in that menu. What width do you want?

To set a width you'd use menuwidth="whateversize"; in the area where you have the top=; left=;style=; and so on in the main menu.

Ruth

Poster: power_pack66
Dated: Monday July 10 2006 - 18:30:43 BST

I tried doing the width but it didn't work.

I want the menu to be like this in width:

http://www.3volutionize.com/forums/inde ... &skinid=18

Poster: Ruth
Dated: Tuesday July 11 2006 - 4:22:22 BST

Hello,

Try the following, 1st set your fontsize to "100%" in your horizontalStyle, then try setting the menuwidth="80%": like the code below, so that it stays within the viewable part of the page and doesn't go beyond into the scroll area.

Code:

with(milonic=new menuname("mainmenu")){
alwaysvisible=1;
margin=3;
orientation="horizontal";
position="relative";
style=horizStyle;
top=10;
menuwidth="80%";

At 800x600 your page is wider than my browser window which puts a bottom scroll bar on the window, and the menu is going as wide as those divs and tables and things.

Ruth

Poster: power_pack66
Dated: Tuesday July 11 2006 - 13:05:45 BST

I put in the following code, but it still made no difference.

Poster: Ruth
Dated: Tuesday July 11 2006 - 18:34:14 BST

Hello,

Ok, it is in your css. It took time to find since I had to remove line by line until the menu wasn't affected anymore.

Your generic table codes are causing the menu to span 100% which means it goes as wide as the div in which it sits, and even if you set menu width, the css is the dominant code for that since the menu is in a div.

Some generic codes affect the menu because it contains divs, tables spans etc.

These are the codes affecting the menu width

Code:

TABLE {
   WIDTH: 100%
}
TD {
   PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px
}

With that removed the menu is fine, looks like the other page you posted.

Ruth

Poster: power_pack66
Dated: Tuesday July 11 2006 - 19:21:01 BST

Ok i remove this from css and the menu is fine but i need it to be 100% as it affects the forums.

Code:

.ipbtable, table { width: 100% }

Poster: Ruth
Dated: Wednesday July 12 2006 - 0:29:24 BST

Hello,

I'm sorry there's not much else I can do. Your css is very involved and though I've tried I cannot figure out what is making your layout go wider than the browser window which is causing a scroll bar at the bottom

You have the menu placed relatively inside the div, you have it centered using center tags on the call, which I guess works, therefore the menu is centering in the div, not the browser window and since the div is wider than the browser window, the menu is wider than the browser window.

There are two things you can do

1. you can remove it from the div and position it absolutely using the top and screenposition and menuwidth.

The page html from the body tag would be this

Code:

<BODY><BR><br><br><br><SCRIPT 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 src="menu_data_mourning.js" type=text/javascript></SCRIPT>
<DIV id=ipbwrapper style="border:2px solid #ffffff"><!--ipb.javascript.start-->
<SCRIPT type=text/javascript>
 //<![CDATA[

And the menu_data_mourning file main menu would be

Code:

with(milonic=new menuname("mainmenu")){
alwaysvisible=1;
margin=3;
orientation="horizontal";
style=horizStyle;
top=10;
screenposition="center";
menuwidth="100%";
aI("showmenu=board home;text=Home;");
aI("showmenu=board help files;text=Help/Support;");
aI("showmenu=fun and games;text=Entertainment;");
aI("showmenu=community;text=Community;");
aI("showmenu=board functions;text=Board Functions;");
aI("showmenu=misc;text=Misc;");
aI("showmenu=downloads;text=Downloads;");
aI("showmenu=tutorials;text=Tutorials;");
}

This will place the menu 10px from the top of the top and it will center it in the window, it will all be visible in the browser window and not expand beyond the right side because it's centering based on the window, not that div which is wider than the window.

2. You can remove the center tags from around the calls for the menu file, add menwidth="100%" to the menu. Because you have removed the center tags the menu will shift left and will be the size of the window, not the page, with menuwidth="100%" at a higher resolution it will expand and spread out.

Industrial Strength JavaScript and DHTML Menus

Menu Width