Centering webpage

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

Centering webpage

Poster: msoden
Dated: Sunday March 13 2005 - 23:09:13 GMT

Normally I do not center my web pages; however I have a client who would like theirs centered. It is my understanding the only way to accomplish this is by using Table Based (Relative) Menus. The menu is set for horzontal. When I test the menu in the cell. The table splits and I have no control over the postioning of the menu within the cell. What am I doing wrong and is this the best resolution for my challange?

Thank you,
MS

Poster: Ruth
Dated: Monday March 14 2005 - 0:20:30 GMT

Could you put up a test page with the menu and table as you have it? Without being able to see what's happening, it could be any number of things causing what you are trying to describe. Usually a relative positioned menu moves with the design without problems.

Ruth

Poster: stephen702
Dated: Monday March 14 2005 - 0:41:50 GMT

Our site's menu is centered, but not in a table or cell. It simply sits in a space between two tables. Would that work for you?

http://www.aact.org/

Poster: msoden
Dated: Monday March 14 2005 - 1:13:58 GMT

Ruth: Here is the link to my HTM page. You can see how it is blowing it apart. Below you will find the Menu_data.js file

http://www.msdesignsllc.com/fiz/index2.htm

Code:

_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150            // The time delay before menus open on mouse over
_followSpeed=5                // Follow scrolling speed
_followRate=40                // Follow scrolling Rate
_subOffsetTop=10              // Sub menu top offset
_subOffsetLeft=-10            // Sub menu left offset
_scrollAmount=3               // Only needed for Netscape 4.x
_scrollDelay=20               // Only needed for Netcsape 4.x



with(menuStyle=new mm_style()){
onbgcolor="#FFFFFF";
oncolor="#014E82";
offbgcolor="#FFFFFF";
offcolor="#333333";
bordercolor="#333333";
borderstyle="solid";
borderwidth=0;
separatorcolor="#FFFFFF";
separatorsize="50";
padding=0;
fontsize="75%";
fontfamily="Verdana, Arial, Helvetica, sans-serif";
pagecolor="#666666";
pagebgcolor="#A2AEB3";
headercolor="#FFFFFF";
headerbgcolor="#ffffff";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=100)";
outfilter="randomdissolve(duration=0.3)";
}

with(menuStyle1=new mm_style()){
onbgcolor="#FFFFFF";
oncolor="#014E82";
offbgcolor="#FFFFFF";
offcolor="#333333";
bordercolor="#1B3245";
borderstyle="solid";
borderwidth=0;
separatorcolor="#014E82";
separatorsize="1";
padding=5;
fontsize="75%";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#FFFFFF";
headercolor="#FFFFFF";
headerbgcolor="#ffffff";
subimage="images/arrow1.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#666666', Direction=125, Strength=3)";
outfilter="randomdissolve(duration=0.3)";
}


with(milonic=new menuname("contact")){
style=menuStyle1;
overflow="scroll";
aI("text=about;url=#.htm;");
aI("text=contact;url=#.htm;");
aI("text=register;url=#.htm;");
aI("text=liasions Partners;url=#.htm;");
aI("text=privacy;url=#.htm;");
}

with(milonic=new menuname("solutions")){
style=menuStyle1;
overflow="scroll";
aI("text=setting goals;url=#.htm;");
aI("text=pro assist;url=#.htm;");
aI("text=medical;url=#.htm;");
aI("text=nutrition diet facts;url=#.htm;");
aI("text=equipment;url=#.htm;");
}

with(milonic=new menuname("motivations")){
style=menuStyle1;
overflow="scroll";
aI("text=inspiration;url=#.htm;");
aI("text=planning;url=#.htm;");
aI("text=network;url=#.htm;");
aI("text=coaches training;url=#.htm;");
aI("text=testimonials;url=#.htm;");
}

with(milonic=new menuname("cutting")){
style=menuStyle1;
aI("text=people;url=#.htm;");
aI("text=trends;url=#.htm;");
aI("text=facilities;url=#.htm;");
aI("text=research technology;url=#.htm;");
aI("text=more;url=#.htm;");
}

with(milonic=new menuname("news")){
style=menuStyle1;
openstyle="up"; 
aI("text=heath & fitness news;url=#.htm;");
aI("text=child fitness;url=#.htm;");
aI("text=seniors;url=#.htm;");
aI("text=newsletters;url=#.htm;");
aI("text=reviews;url=#.htm;");
}

with(milonic=new menuname("network")){
style=menuStyle1;
openstyle="up"; 
aI("text=events calendar;url=#.htm;");
aI("text=seminars;url=#.htm;");
aI("text=tell us;url=#.htm;");
aI("text=all in;url=#.htm;");
aI("text=register;url=#.htm;");
}

drawMenus();

Thank you for the help,
MS[/code]

Poster: msoden
Dated: Monday March 14 2005 - 1:23:09 GMT

Stephen: I looked at your code and the have the JS code is located in the header. I tried doing this and my results were pretty much the same. As long as there is no top & left it wants to sit in the table at the very top. I can not seem to move it.

Thank you for your advice,
MS

Poster: Ruth
Dated: Monday March 14 2005 - 3:28:49 GMT

Hi MS,
First, you have to upgrade the menu, you are way downlevel. Go and login, then download the newest version and upload the 3 menu files, milonic_src, mmenudom and mmenuns4 to your website. Make sure you keep the 3 old files in case there is some issue that needs to be fixed with the new [though I doubt that will be he case]
Second, do you want the menu in the table? If not, you can easily position this in the center of the page without placing it in a table. Move the main menu back into the menu data file coded like this:

Code:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=180;
screenposition="center";
alwaysvisible=1;
orientation="horizontal";
overfilter="";

plus all the aI strings that are in it. Leave out the drawmenus from the main menu. That should put the menu into the center of the page down 180px from the top. That will also fix the missing middle navigation image.
If you have to have it in the table for some reason, then you need to create a new row, colspan3, and put a table inside it that is centered. i.e.

Code:

 <TD vAlign=top width=251><IMG height=144 alt="top bar right" src="index_03.gif" width=251></TD></TR>
<TR>
<TD COLSPAN=3><CENTER>
<TABLE BORDER="1" CELLPADDING="0" ALIGN="Center">
<TR>
<TD>  <SCRIPT>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=193;
left=150;
alwaysvisible=1;
orientation="horizontal";
overfilter="";
position="relative";
aI("text=mission;url=#.htm;showmenu=contact;status=The Fitness Liasion Project - mission;");
aI("text=solutions;url=#.htm;showmenu=solutions;status=The Fitness Liasion Project - solutions;");
aI("text=motivation;url=#.htm;showmenu=motivations;status=The Fitness Liasion Project - motivations;");
aI("text=cutting edge;url=#.htm;showmenu=cutting;status=The Fitness Liasion Project - cutting edge;");
aI("text=news & reviews;url=#.htm;showmenu=news;status=The Fitness Liasion Project - news & reviews;");
aI("text=network;url=#.htm;showmenu=network;status=The Fitness Liasion Project - network;");
drawMenus();
</SCRIPT></TD></TR></TABLE></CENTER>
</TD>
</TR>
<TR>
<TD vAlign=top height=87><IMG height=87 alt="Left side navigation" src="index_04.gif" width=251></TD>

I put in the row before and after so you can see where it goes. Unless you put in the row and center the table, the menu when bound to the table will be in only that cell you have it in, which would be the leftside navigation cell and it won't expand beyond that.

Given your layout, I do recommend the absolute position if you can do it, since it will go to screenposition="center"; Hope that helps.

Ruth

Industrial Strength JavaScript and DHTML Menus

Centering webpage