CSS Nav Bar

[herrlip]

Hi Guys,
Could you help me out here? Take a look at the site I knocked together http://www.herrlip.com
I am trying to get this CSS Nav bar to sit plum in the center of the page, I can move it to the right however when I chose center or middle in the code it goes down the page instead of across. Code below:

#navcontainer
{
margin: 0;
padding: 0 0 0 12px;
}

#navcontainer UL
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer LI
{
display: block;
margin: 0;
padding: 0;
float: left; TRIED CHANGING THIS PART HERE TO "MIDDLE" OR "CENTER"
width: auto;
}

#navcontainer A
{
color: #444;
display: block;
width: auto;
text-decoration: none;
background: #DDDDDD;
margin: 0;
padding: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #aaa;
}

#navcontainer A:hover, #navcontainer A:active { background: #BBBBBB; }

#navcontainer A.active:link, #navcontainer A.active:visited
{
position: relative;
z-index: 102;
background: #BBBBBB;
font-weight: bold;
}

Any help would be very useful

Jamie

[The Little Guy]

try:

margin: auto;

this will center it horizontally

you also need to move your content down.

[thewebman]

whoa! it's almost 1am here and I must say that the weird laughter on your home page freaked me out!

[SliderNo1]

Here is a tutorial to center a floated left nav bar.

http://www.cssplay.co.uk/menus/centered.html

Hope that helps. (",)

[herrlip]

Hi guys,
Still no luck - I am a bit of a virgin with CSS and I have tried the suggestion of my first response, this is what I did

#navcontainer
{
margin:0 auto;
padding: 0 0 0 12px;
}

#navcontainer UL
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer LI
{
display: block;
margin: auto;
padding: 0;
float: left;
width: auto;
}

#navcontainer A
{
color: #444;
display: block;
width: auto;
text-decoration: none;
background: #DDDDDD;
margin: 0;
padding: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #aaa;
}

#navcontainer A:hover, #navcontainer A:active { background: #BBBBBB; }

#navcontainer A.active:link, #navcontainer A.active:visited
{
position: relative;
z-index: 102;
background: #BBBBBB;
font-weight: bold;
}

I also tried moving the content down and I still cant get it centre take a look, www.herrlip.com