CSS / html Centre Problem

[Atomic]

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.

 

[djkav]

Have you got a link to view?

 

[djkav]

I did something similar, here is my CSS:

ul#MainNav {
list-style:none;
margin:0;
padding:0;
color:#ffff80;
font-size:14px;
}

ul#MainNav .left {
float:left;
margin:0 20px 0 0;
padding:8px 0 0 0;;
}

ul#MainNav li a {
display:block;
font-weight:bold;
text-decoration:none;
color:#ffff80;
}


And HTML:

<ul id="MainNav">
<li class="left"><a href="/school/school.asp">School</a></li>
<li class="left"><a href="/news/newslist.asp">News & Events</a></li>
<li class="left"><a href="/education/summary.asp">Education</a></li>
</ul>

 

[Atomic]

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

 

[Tripnologist]

You have default padding applied which is why your page has padding around it. Google 'css reset''.

To vertically center your secondary nav, I would do one of 2 things.
1. Remove the set height on your secnav div and then use top and bottom padding on the li element. (preferrably do this on the 'li a' element as that will allow you to use mouseovers.
2. Bad way would be adding line-height: 40px; to your li.

 

[Atomic]

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

 

[Tripnologist]

Add overflow: hidden to your secnav.

 

[Atomic]

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.

 

[djkav]

To centre the the menu, id use something like;

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

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

 

[Atomic]

To centre the the menu, id use something like;

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

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

What about vertically?

 

[Tripnologist]

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.

Just change the padding accordingly. It's what is sizing the orange bar. if you need a gap between them, use margin. It's what it's there for.

 

[djkav]

What about vertically?

Vertically you can play around with line height and padding. Most of CSS is tweaking pixel positions until u get it to look right.

Use borders too on your divs and block elements so u can visualise the margins and paddings while your developing. Then erase them when your happy.

{
line-height: XXpx;
padding: XXpx 0;
}

 

[Atomic]

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?

 

[suarve]

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?

As said above, use a reset css file, saves a lot of messing about. You just need to a margin to the list link E.g

.menu ul li a{
margin: 0 20px 0 0;
}