CSS / html Centre Problem

Atomic · 4 Oct 2009 at 14:33

I'm just starting a site, and I'm stumped.

I've jsut started work on a very, what should be, simple secondary nav bar, but I've got two problems. There will be links in this bar.

1) I need the links to be vertically aligned
2) I need them to be horizantally aligned, but problem with this is that I've got them aligned to the centre kind of, but it's off by about 50px and I have no idea why.
( I know the links don't have the ahref stuff in yet)

HTML:
<div id="secnav">
<ul>
<li>Who We Are</li>
<li>Our Customers</li>
<li>Your Questions</li>
</ul>
</div>

CSS:

#secnav {background-color:#FFCC00; height: 40px}
#secnav ul {text-align: center;}
#secnav li{display:inline; text-decoration: none; margin-left: 20px}

I've used the margin-left to give spacing between the links.

Atomic · 4 Oct 2009 at 15:00

www.jonpaulwild.co.uk

I'm only interested in getting the yellow section working for now.

However, I've now notiched that the site isn't fully stretching to the top and sides? Can anyone help with that bit too

Atomic · 4 Oct 2009 at 15:56

I've taken the height out and put in padding, but has no effect what so ever.

Atomic · 4 Oct 2009 at 16:09

That goes over the green primary bar. In size the orange bar needs to be around 40px in size with the text vertically and horizantally in the middle.

Atomic · 4 Oct 2009 at 17:44

djkav said:
To centre the the menu, id use something like;

html,body {
margin:0;
padding:0;
}

#secnav {
width:500px;
margin:0 auto;
}

What about vertically?

Atomic · 4 Oct 2009 at 18:28

Yes, many problems fixed! Thank you!

I've uploaded and it works with FF and IE7 - Only little problem now is that I need to space out the links evenly without messing everything else up. I've used padding to space them but they're slighty off?