Menu position changes with screen size and screen resolution

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

Menu position changes with screen size and screen resolution

Poster: jpnewsom
Dated: Tuesday June 7 2005 - 21:25:49 BST

Website: http://www.erinfo.org
I designed the website for a screen size of 17inch and 800x600 resolution.
It works fine at 17 and below. However, on a 20 inch screen and a higher resolution the menu moves to the left whereas all other objects remain the same in their relative position with each other. Also the menu button font becomes larger.

Can you tell me what I need to do to keep the menu in the same relative position for all screen sizes and resolutions?

Thanks
John

Poster: Ruth
Dated: Wednesday June 8 2005 - 0:09:09 BST

Hi John,

The one way to make sure that no matter what the menu always remains where it is as the content shifts due to resolution is to put it in a table.

In order to do that you need to put the header in the table and to get it out of the div. I set it up so you can see how you would do it. Starting right after your call for the menu_data file, up to the div id=wrapper is what I've included here. And, I removed the div that had the header originally. You have to do two things:

1: put a table the width I have which is equal to your header image, and remove the header from that div and put it in the table above it.

2. remove the main menu from the menu_data.js file, it is now in the table. You can put it into it's own file, just like you see it in the table without the script tags and just call the file in the table if you wish.

Note that I have a border and bordercolor only so I could see the table

You can make that 0 and get rid of the bordercolor="aqua"

This type of layout means that no matter what, since you have centered the 'header' table and also centered the menu table [it's in a table of it's own in the header table] the menu will always be in that position.

Code:

<SCRIPT src="menu_data.js" type=text/javascript></SCRIPT>
<table cellpadding="0" cellspacing="0" width="725" border="1" bordercolor="aqua">
<tr>
       <td><IMG height=106 alt="Evangelism Resources Banner" 
src="newheader.jpg" width=725 border=0></td>
</tr>
<tr>
       <td><center><table cellpadding="0" cellspacing="0" border="1" bordercolor="lime" align="center">
<tr>
    <td><script>
   with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;

aI("status=Back To Home Page;text=Home;url=index.htm;");
aI("showmenu=About ER;text=About ER;");
aI(";text=Newsletter;url=newsletter.pdf;");
aI("showmenu=Ministries;text=Ministries;");
aI("showmenu=Missionaries;text=Missionaries;");
aI("showmenu=Countries;text=Countries;");
}
drawMenus();
</script></td>
</tr>
</table></center></td>
</tr>
</table>
<DIV id=wrapper>

For more information on putting the menu in a table see sample9 and the directions here

You can't put the menu in a div. That causes problems, usually in the Mac, but in other browsers, too, usually making the submenus take weird positions on the page.

Hope that helps.

Ruth

Poster: Ruth
Dated: Wednesday June 8 2005 - 0:31:33 BST

:oops:

In case you read the response before I corrected it, I forgot to remove the top= and left= and put in position="relative"; I have corrected it.

Ruth

Menu position changes with screen size and screen resolution

Poster: jpnewsom
Dated: Wednesday June 15 2005 - 13:01:49 BST

Ruth:
Thanks for all your help on this. Your instructions made it more clear as to how to implement placing the menu in a table cell.

I had to make one change. The result of your instructions placed the menu below the header. I needed to have it in the header. I changed the header from a single image to a table with portions of the former image in different cells. Then place the menu centered in the cell where it was to be located. This really made the whole thing somewhat easier to do. I could not have thought of or even implemented the correction without your help.

Thanks again!

John

Industrial Strength JavaScript and DHTML Menus

Menu position changes with screen size and screen resolution

Menu position changes with screen size and screen resolution