Align menu block center

Hi all,

I am a bit unsure of how to align html blocks (all in 1 div) center. I have played around with the css padding to align it center, but it is then too big on IE and makes the last link underneath. This is my code and css:

HTML

<div class="blue">
    <div id="slatenav">
      <ul>
        <li><a href="./" class="current">Home</a></li>
        <li><a href="./schedule/">Schedule</a></li>
        <li><a href="./team/">The Team</a></li>
        <li><a href="./rewind">Rewind</a></li>
        <li><a href="./events/">Events</a></li>
        <li><a href="./gallery">Gallery</a></li>
        <li><a href="./bookings/">Bookings</a></li>
        <li><a href="./merchandise/">Merchandise</a></li>
        <li><a href="./links/">Links</a></li>
        <li><a href="./contact">Contact Us</a></li>
      </ul>
    </div>
  </div>

HTML:

CSS

/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav {
    position:relative;
    display:block;
    height:42px;
    font-size:11px;
    font-weight:bold;
    background:transparent url(images/blueslate_background.gif) repeat-x top left;
    font-family:Arial, Verdana, Helvitica, sans-serif;
    text-transform:uppercase;
}
.blue #slatenav ul {
    margin:0px;
    padding:0;
    list-style-type:none;
    width:auto;
}
.blue #slatenav ul li {
    display:block;
    float:left;
    margin:0 1px 0 0;
}
.blue #slatenav ul li a {
    display:block;
    float:left;
    color:#D5F1FF;
    text-decoration:none;
    padding:12px 23px 0 23px;
    height:28px;
}
.blue #slatenav ul li a:hover, .blue #slatenav ul li a.current {
    color:#fff;
    background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}
/* ---------------------- END Blueslate nav ---------------------- */

Code (markup):

Could anyone please advise how it is possible to get the blocks to align center in the div.

Thanks in advance

 

Do the divs in here serve to any purpose? I don't think so.

It is sort of unclear what you actually need, you should be more specific here.
There is really NO POINT in putting display:block in your CSS, since all the elements presented here are block-level ones by default.

 

Hi,

What i am wanting to do exactly is get all the blocks (as a whole) is to align center.

I have now changed my css to (REMOVING THE BLOCKS):

.blue #slatenav {
    height:42px;
    font-size:11px;
    font-weight:bold;
    background:transparent url(images/blueslate_background.gif) repeat-x top left;
    font-family:Arial, Verdana, Helvitica, sans-serif;
    text-transform:uppercase;
}
.blue #slatenav ul {
    margin:0px;
    padding:0;
    list-style-type:none;
    width:auto;
}
.blue #slatenav ul li {
    float:left;
    margin:0 1px 0 0;
}
.blue #slatenav ul li a {
    float:left;
    color:#D5F1FF;
    text-decoration:none;
    padding:12px 23px 0 23px;
    height:28px;
}
.blue #slatenav ul li a:hover, .blue #slatenav ul li a.current {
    color:#fff;
    background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}

Code (markup):

Thanks again

 

That isn't going to work, either way, with or without display:block, it means exactly the same thing, it just adds some unnecessary bits of code.

If by "blocks" you mean <li> elements, you align them to center by adding text-align:center to your <ul> and displaying them inline. Remove the floats and all, it is not needed here.

BTW, could you post a link to your website so I can rewrite the whole thing? Half of what you have there is useless.

 

This is the only part of the website i have not written myself... so am obviously unsure of parts of it. and yes i do mean the <li> sections to be all aligned center

 

If so, then what I posted above will work, that is if the rest of the markup is somewhere close to being correct. If it doesn't work, post a link of the website, and I'll fix it.

 

Wicker is right on ditching the DIV, but the CSS takes a major rewrite to go with it. As to the alignment, you are FLOATING them, and you CANNOT CENTER FLOATS! PERIOD. Cannot be done. The best approach to do that would be inline on the LI as Wicker95 suggested, and display:inline-block on the ANCHORS.... 99% of what you are doing for styling goes there. You've also got a LOT of just plain redundant garbage in there, like declaring display:block on DIV, when that's a DIV's default since it's a block-level element. (though the two do NOT mean the same thing). Also, whoever told you 11px is acceptable for ANYTHING needs a good swift kick in the crotch. If you're going to use px 12 should be considered minimum for all-caps, 14 minimum for float -- though with that mess of 'link overload' good luck fitting it. Also, Verdana is a M$ core font, the likely hood of it existing when Arial doesn't is about as close to zero as one can get, so there's NO reason to ever build a stack that way... and a transparent background-color might also not be a great choice depending on how that works when images are disabled... but without seeing the images or the page it's on that's a wild guess. Declaring padding the same time as height is always a disaster, as is trying to fix the height of the parent container... let padding, line height and flow handle that for you automatically. It might also help to load the hover image on the unhovered state so it's pre-cached, and just push it down out of the way... that way there's no delay on the first hover.

So no DIV, just this:

<ul id="slateNav">
	<li><a href="./" class="current">Home</a></li>
	<li><a href="./schedule/">Schedule</a></li>
	<li><a href="./team/">The Team</a></li>
	<li><a href="./rewind">Rewind</a></li>
	<li><a href="./events/">Events</a></li>
	<li><a href="./gallery">Gallery</a></li>
	<li><a href="./bookings/">Bookings</a></li>
	<li><a href="./merchandise/">Merchandise</a></li>
	<li><a href="./links/">Links</a></li>
	<li><a href="./contact">Contact Us</a></li>
</ul>

Code (markup):

#slateNav {
	list-style:none;
	text-align:center;
	text-transform:uppercase;
	font:bold 12px/14px arial,helvetica,sans-serif;
	background:url(images/blueslate_background.gif) 0 0 repeat-x;
}

#slateNav li {
	display:inline;
}

#slateNav a {
	display:inline-block;
	padding:20px 16px 8px;
	text-decoration:none;
	color:#D5F1FF;
	background:url(images/blueslate_backgroundOVER.gif) 0 9em no-repeat;
}

#slateNav a.current,
#slateNav a:active,
#slateNav a:focus,
#slateNav a:hover {
	color:#FFF;
	background-position:top center;
}

Code (markup):

Though I'd have to see the images and layout to say for sure -- just beware inline-block will put spaces between the menu items, usually not a big deal. There are ways around it, but to be honest I dislike most of them and probably wouldn't bother...

Also I had to guess on the paddings since again, not enough information on what it's going into... but the 14px line-height + 20px top padding + 8 px bottom padding == 42 px... which as a wild guess is what I THINK you were aiming for.

REALLY though there should be background-colors in there so images off there's graceful degradation -- unless you did something funky/silly to them like use png alpha transparency, unlikely since you're pointing at GIF files. (though GIF does have palette transparency, again no images/site/rest of code, so guessing wildly)