Ok I've been at my computer too long and my minds gone a bit frazzled. Could anyone give me a pointer on how to centre the navigation on a site I'm working on? I want it to be centred underneath the header image. I know there are problems with the site by the way I'm only about 2 hours into the design and build of it.

 

http://benanderton.co.uk/sdvs/

 

Cheers for any help .

 

Edit: Also anyone got any ideas on a more elegant replacement for the Iframe? The client needs to be able to use Google Calendar but there has to be a better way of incorporating it?

Hi Cabbage, because you're floating the menu left, it will always stay at the left, so you need to nest the menu in a sort of wrapper:

 

<div id="nav-wrap">
<div id="nav">
	<ul>
		<li>Menu Item 1</li>
		<li>Menu Item 1</li>
		<li>Menu Item 1</li>
		<li>Menu Item 1</li>
	</ul>
</div>
</div>

/*
*/

#nav-wrap {
width:full width;
height:full height;
text-align:center;
}

#nav {
width:width of menu (not the same as nav-wrap);
margin:0 auto;	
}

Great advice Traxor.

 

You beat me to it.

Hi Cabbage, because you're floating the menu left, it will always stay at the left, so you need to nest the menu in a sort of wrapper:

 

<div id="nav-wrap">
<div id="nav">
	<ul>
		<li>Menu Item 1</li>
		<li>Menu Item 1</li>
		<li>Menu Item 1</li>
		<li>Menu Item 1</li>
	</ul>
</div>
</div>

/*
*/

#nav-wrap {
width:full width;
height:full height;
text-align:center;
}

#nav {
width:width of menu (not the same as nav-wrap);
margin:0 auto;	
}

 

Cheers, ended up using something slightly different in the end (bit of a bodge job, temporary measure to show someone tomorrow) but I'm sure I'll wind up using this in the final version.