Need help with this Wordpress navigation

[Martin_Man]

Hey

I'm building a site for my friend in WordPress but the trouble I am having is that I can't get the header navigation to appear in the centre of the page. I've spent hours scratching my head and trying figure out this problem, but I have noooo idea what else I could do to solve it.

Firstly here is the site so you can take a look, and here is the css style for the header navigation.

Css:

[I]
#pre_wrap {
	width:950px;
	height:auto;
	margin:0 auto 0 auto;
	}

#access_header {
	width:950px;
}

#access_header ul {
	list-style-type:none;
	margin: 0 auto;
}

#access_header li{
	margin-right:30px;
	float: right;
	display:block;
	background-color:#ccc;
	width:90px;
	height:25px;
}

#access_header li a{
	font-weight:lighter;
	margin-right:30px;
	display:block;
	width:90px;
	height:25px;
}[/I]

Wordpress Header:

[I]<div id="pre_wrap">
<center>
<h1 class="title"><a href="http://www.spanishvilla.uk.com"><img src="http://spanishvilla.uk.com/wp-content/uploads/2012/01/logo.png" width="561" height="107" alt="Spanish Villa" longdesc="Welcome to spanish villa" /></a></h1>

<div id="access_header">
[COLOR="Red"]<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'header' ) ); ?>[/COLOR]
</div><!-- End access header-->
<div style="clear:both;"></div>
</center>
</div> <!-- End of pre wrap-->[/I]

cheers

 

[Scryus]

Hi,

For the margin: auto trick to work, you need to define the width like so:

#access_header ul {
list-style-type:none;
margin: auto 0 auto 0;
width: 500px;
}

However, with text, this works very badly due to wrapping and margins and such. An easier way to do it is as follows:

#access_header ul {
 text-align: center;
}

I wrote up this quick page to test it out, open it up and see how it works: http://pastie.org/3140221

A word of warning: pre-set margins and paddings by the browser are a pain in the ass, so if you haven't done something similar to line 5, resetting them, or using a reset.css file, use that before you do this.