Omn: how do I center menu and get it to scroll when browser window is smaller

[abyfi]

Script Title: Omni Slide Menu

Script URL (on DD): http://www.dynamicdrive.com/dynamici...lide/index.htm

I am using Omni Slide Menu to display and photo album with a width of 1260px. I am having trouble getting the menu to work in a screen with a smaller width than that of the menu. When the window is smaller, a portion of the menu disappears to the left side of the window.

Left: 50% indents the menu when the screen is smaller than the menu. Left: 0px keeps the menu to the left when the screen is samller than the meun.

Please, is there a way to center the menu and get it to scroll with body?



Link to page: http://www.altontoussaint.com/web%20...ndex-shop.html

/* menu2's Script Generated Styles: */
/* menu2 is currently using these via the script */

[#menu2 {
top:0;
left:50%;
position:absolute;
overflow:visible;
z-index:100;
}
#menu2 div {
border-width:0ex 0ex 0ex 0ex; /*Menu's outer border*/
border-style:solid;
border-color:lightblue;
position:absolute;
color:white;
background-color:transparent;
}
#menu2 table {
border:0px solid transparent; /*Menu's inner border*/
border-left-width:0;
border-bottom-width:0;
font-family:verdana, sans-serif; /*Overall font for Menu*/
font-size:90%;
border-collapse:collapse;
background-color:transparent;
width:87.569em;
}
#menu2 td { /*Characteristics for cells in the menu table - do not specify width here*/
border-bottom:0px solid transparent;
border-left:0px solid transparent;
height:3.472em;
padding:0;
margin:0;
text-align:left;
}
#menu2 #menu2bar { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; /*Characteristics for initially visible 'draw' bar (the vertical cell)*/
height:0.069em;
background-color:white;
color:transparent;
font-weight:bold;
text-align:center;
cursor:default;
}
#menu2 .heading { /*Characteristics for heading cells in the menu table*/
height:1.528em;
color:none;
font-weight:bold;
text-indent:0ex;
background-color:white; /*Background Color for menu headings */
width:87.5em; /*This will be the menu body width. This and 4 times the border width should also be the menu table's approximate width*/
vertical-align:middle;
text-align:left;
border-left-color:white;
border-left-style:solid;
}
#menu2 a {
width:100%;
height:100%;
display:block;
padding-top:0.069em;
}

/* End menu2's Script Generated Styles */

<!-- The Markup for menu2 -->

<div id="menu2" onmouseover="movein(this);" onmouseout="moveout(this);"><div><table>
<tr><td class="heading" colspan="7"><span id="petsdivcontainer"></td></tr>
<tr><td id="menu2bar" colspan="7"><img src="images/2011-08 (Aug)/headertwo3.png"></td></tr>
</table></div></div>]

<!-- End menu2's Markup -->