Menu Width

power_pack66 · Post by **power_pack66** » Mon Jul 10, 2006 1:10 pm

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

Post by **Ruth** » Mon Jul 10, 2006 6:02 pm

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

power_pack66 · Post by **power_pack66** » Mon Jul 10, 2006 6:06 pm

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

Post by **Ruth** » Mon Jul 10, 2006 6:20 pm

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

power_pack66 · Post by **power_pack66** » Mon Jul 10, 2006 6:30 pm

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

Post by **Ruth** » Tue Jul 11, 2006 4:22 am

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: Select all

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

power_pack66 · Post by **power_pack66** » Tue Jul 11, 2006 1:05 pm

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

Post by **Ruth** » Tue Jul 11, 2006 6:34 pm

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: Select all

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

power_pack66 · Post by **power_pack66** » Tue Jul 11, 2006 7:21 pm

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

Code: Select all

.ipbtable, table { width: 100% }

Post by **Ruth** » Wed Jul 12, 2006 12:29 am

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: Select all

<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: Select all

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.