Now I know the problem is to do with float:left but without that the menu won't style

 

Here is my css

 

.solidblockmenu{
margin: 0;
padding: 0;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
background: black url(images/nav.png) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 16px;
text-decoration: none;
border-right: 1px solid #480500;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(images/nav2.png) center center repeat-x;
}

 

 

And my html

 

<ul class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/" class="current">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >Submit Map</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">F.A.Q</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">Forums</a></li>
<li><a href="http://www.cssdrive.com">Contact</a></li>
</ul>

 

 

to see it in action go to www.fc2maps.com/dev

 

I would like the menu lined up in the center

Also, if anyone knows how to get rid of that gap between the banner and the nav bar then please explain

 

THanks

i don't think there is a really nice solution to this, i had a think about this once before and the closed i came was to put the ul inside a div and center the div. i would like to know if there was a way of creating horizontal lists that automatically centre in the page but i don't think that is possible yet.

Ive read a tut. about it somewhere but you have to use spans and it gets a bit messy

Your link isn't working for me but I would suggest removing the float from your <a> tags and adding

ul.solidblockmenu {
text-align:center;
}

Muppet cant spell. Fixed the link now

 

Anyway, that has aligned them center but they now appear ontop of the nav bar rather than within it

If still not solved replace these classes in your css

#nav {
width:100%; text-align:center;
}

.solidblockmenu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(images/nav.png) repeat-x center center; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 1em;  FONT: bold 13px Arial; OVERFLOW: hidden; WIDTH: 100%; PADDING-TOP: 10px; TEXT-ALIGN: center
}
.nav {
FONT-SIZE: 16px; width:80%; FONT-FAMILY: Arial, Helvetica, sans-serif
}

 

This will sort ur both problems.

Wish I could tell you that worked, but, unfortunatly it didn't.

 

The problem is still there..

on which browser are you checking this out?