alignment issue

[rohis]

Hello, I have a drop down menu that I want to apear as centered on a page. The only way to put the menu on the page (than i know of) is with a div.

I can get it vertically where I want it (although on practically every computer it's different and annoying) but when it comes to the left/right alignment, when I make the window smaller, the menu stays in the same place while everything else is centered and moves to the left. is there a way to center a DIV from left to right so that it is shown in the center of the page no matter how big the window is?

Here is the site:
http://www.freewebs.com/beckwithma/library/Whitman-Hanson%20Regional%20Schools.htm


and here is the tag I'm using to post the menu:





<div style="position: absolute; width: 449px; height: 24px; z-index: 1; left:270px; top:144px" id="layer1">

<!-- DO NOT MOVE! The following AllWebMenus code must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
<span id='xawmMenuPathImg-menu' style='position:absolute;top:-50px'>
<img name='awmMenuPathImg-menu' id='awmMenuPathImg-menu' src='awmmenupath.gif' alt=''></span>
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='GN'; awmAltUrl='';</script>
<script charset='UTF-8' src='menu.js' language='JavaScript1.2' type='text/javascript'></script>
<script type='text/javascript'>awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu ******** --></div>

[jscheuer1]

This seemed to work out well, it is partly from a dd script but, this bit only involves style and layout, and partly from yours truly. Put this style in the head:


<style type="text/css">
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}

.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>

In you HTML, for this:


<p align="center">
<div style="position: absolute; width: 449px; height: 24px; z-index: 1; left:270px; top:144px" id="layer1">
<!-- DO NOT MOVE! The following AllWebMenus code must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
<span id='xawmMenuPathImg-menu' style='position:absolute;top:-50px'>
<img name='awmMenuPathImg-menu' id='awmMenuPathImg-menu' src='awmmenupath.gif' alt=''></span>
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='GN'; awmAltUrl='';</script>

<script charset='UTF-8' src='menu.js' language='JavaScript1.2' type='text/javascript'></script>
<script type='text/javascript'>awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu ******** --></div>

Substitute this:


<div class="centerdiv">
<div style="position: relative; width: 478px; height: 10px; z-index: 1;margin-top:-25px" id="layer1">
<!-- DO NOT MOVE! The following AllWebMenus code must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
<span id='xawmMenuPathImg-menu' style='position:absolute;top:-50px'>
<img name='awmMenuPathImg-menu' id='awmMenuPathImg-menu' src='awmmenupath.gif' alt=''></span>
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='GN'; awmAltUrl='';</script>

<script charset='UTF-8' src='menu.js' language='JavaScript1.2' type='text/javascript'></script>
<script type='text/javascript'>awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu ******** --></div></div>

[rohis]

Thanks, that worked awsome.