CSS - Centering Nav Menu

[mayamanako]

Hi guys, I wonder if you could help me. I have a navigation menu that's something like this:

<ul id="css3menu1" class="topmenu">
	<li class="topfirst"><a href="#" style="height:18px;line-height:18px;">Item 0</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 1</span></a>
	<ul>
		<li><a href="#">Item 1 0</a></li>
		<li><a href="#">Item 1 1</a></li>
		<li><a href="#">Item 1 2</a></li>
	</ul></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
	<li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 5</a></li>
</ul>

and a CSS

ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
	z-index:1;}
ul#css3menu1{
	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
	*display:inline;}
* html ul#css3menu1 li a{
	display:inline-block;}
ul#css3menu1>li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
	float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
	background-color:#FFFFFF;background-image:none;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
	border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
	border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}

I want this menu to be about 150 pixels below from the top AND centered in whatever screen size/resolution it's being viewed on. I've been trying all sorts but no luck.

Thanks in advance for your advice.

 

[1DMF]

ul#css3menu1,ul#css3menu1 ul{
[highlight #FCE94F]margin:0;[/highlight]
list-style:none;
padding:0;
background-color:#dedede;
border-width:1px;
border-style:solid;
border-color:#5f5f5f;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;}

You have told it to not have any margin, plus you have set the UL to inline-block, so 'auto' won't work.

The easiest solution is to wrap a div round it apply the margin and centre the content.

Try :-

#menu {
    text-align:center;  
    margin:150px;
}

<div id="menu">
<ul id="css3menu1" class="topmenu">
	<li class="topfirst"><a href="#" style="height:18px;line-height:18px;">Item 0</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 1</span></a>
	<ul>
		<li><a href="#">Item 1 0</a></li>
		<li><a href="#">Item 1 1</a></li>
		<li><a href="#">Item 1 2</a></li>
	</ul></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
	<li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 5</a></li>
</ul> 
</div>

of course you could set the UL (ul#css3menu1) to block, with a fixed width and use the margin with auto to centre it, but you will have issues with the child elements that are then floated, so you would need to add an extra 'clearing' element to it at the end of the UL.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads