I got something working in IE5.5 but it was still left aligned in Opera. I haven't tested it in N6 so that might go pear shaped as well.
The code you're using was designed for a left aligned page so using position: absolute for the menus is ok. But you need to create a centre aligned box that the menus sit in. However, the only way I could think of doing this was to create 2 boxes. The outer is 100% wide and content centred. Then put a box inside the outer one that's 750px wide. The menus then sit inside the inner box. As the inner box has position: relative the menus should take their positioning relative to the inner box (I think).
Styles that I used.
Code:
<style>
body {
margin: 0px;
padding: 0px;
}
.outercontainer {
border-width: 2px;
border-style: solid;
border-color: #FF66EE;
position: absolute;
top: 130px;
left: 0px;
width: 100%;
height: 25px;
text-align: center;
}
.container {
position: relative;
width: 750px;
height: 20px;
border-width: 2px;
border-style: solid;
border-color: #33cc99;
text-align: left;
}
</style>
HTML
Code:
<div class="outercontainer">
<div class="container">
<!-- menus html goes here -->
</div>
</div>
You'll need to adjust the left, top positioning of menus and maybe the container boxes. (I found top: 25px for menus to be about right). I've used borders just so you can see the boxes.
As I said this may not work in N6 so it may be worthless. If so, I'd heed Creole's advice (he's done some nice dhtml menus himself, so he knows what he's talking about).
Bookmarks