CSS / html Centre Problem

Associate
Joined
27 Jan 2005
Posts
830
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.
 
Soldato
Joined
28 Aug 2006
Posts
2,980
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>
 
Last edited:
Associate
OP
Joined
27 Jan 2005
Posts
830
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
 
Soldato
Joined
12 May 2007
Posts
3,891
Location
Bristol
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.
 
Associate
OP
Joined
27 Jan 2005
Posts
830
I've taken the height out and put in padding, but has no effect what so ever.
 
Associate
OP
Joined
27 Jan 2005
Posts
830
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.
 
Soldato
Joined
28 Aug 2006
Posts
2,980
To centre the the menu, id use something like;

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

#secnav {
width:500px;
margin:0 auto;
}
 
Last edited:
Soldato
Joined
12 May 2007
Posts
3,891
Location
Bristol
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.
 
Soldato
Joined
28 Aug 2006
Posts
2,980
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;
}
 
Associate
OP
Joined
27 Jan 2005
Posts
830
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?
 
Soldato
Joined
8 Oct 2005
Posts
4,185
Location
Midlands, UK
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

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