Centered layout, left-hand menu not in centered portion

[davebarnes]

On this page:
http://www.dataprotectionsummit.com/Eng ... ister.html
I am using a div to center the page in the browser.
However, the Milonic Menu is shoved all the way to the left-hand side of the browser window.
I have read the documentation and searched this forum; all to no avail.

What do I change?

thanks,
dave

[Ruth]

Hi Dave,

You are telling it to be at left=0;

Code: Select all

with(milonic=new menuname("Main_Menu")){
style=MainMenuStyle;
top=240;
left=0;
alwaysvisible=1;
orientation="vertical";

If you're putting the menu in a div then you need to position it relatively,
like you do in a table so it will move where you want it.

http://milonic.com/tablemenu.php

Ruth

[Ruth]

Hi Dave,

I have done your page with a fix for what you want but I thought I'd better provide a more detailed explanation.

In order to do what you want, you really need to use a centering code for the div which will keep it centered all the time, and then place the menu in the table cell. Now, the easiest way to do that is to use center tags around the whole container div, and that seems to work in what I could test. It will allow you to keep your layout sized as is, though you should know that it causes scroll bars at the bottom for anyone with 800x600 resolution.

There is also a centering setup for use with fixed width divs that will keep the layout centered. But, there is a problem using such codes and that has to do with the setting of a negative left margin which is necessary in order for it to center and remain centered at various resolutions. I have a layout that works at 800x600, 1024x768, 1152x864 and 1280x1024 which is the highest resolution I can test on my computer. But, it does require some changes in your layout, not layout changes per se, but size changes since 800x600 is really not 800 wide. On most browsers set to that resolution you get a horizontal scroll bar and since the negative margin for centering is set at half the width, the 800 width of your tables causes the negative margin of -400 to put the left side partway unveiwable. The space for 800 resolution is more like 760 to 770 width for most browsers. Either you have to change your table from 800 to 760 or you have to change the negative left margin to less than 400. If you do that, it means the layout doesn't center at higher resolutions, since it requires that the left margin be 1/2 of the width of the layout.

Here is the page, and you'll see the size changes I made

LINK REMOVED

and the code in the css file for your container is now

Code: Select all

#Container {
	MARGIN-TOP: 0px; DISPLAY: block; position: absolute; 
    left: 50%; 
    width: 770px; 
    margin-left: -385px; 
	BACKGROUND-COLOR: white; TEXT-ALIGN: left
}

[Ruth]

Hi Dave,

Did you get this information, so I can remove your page from my site?

Ruth