How do I center these nav options?

[rosem]

http://www.rosem.com/work/random/dawgDays/

I'm working on redoing this layout in CSS. How the hell do I center the nav options (the images)? I've been trying for 45 minutes and can't figure it out!

Thanks,
Mike

[rosem]

Anyone ? Still have no clue ... :)

[funkyprem]

add to #nav

text-align: center;

[pfmac]

Edit the following in your CSS (works in FF on PC, haven't tested in IE):

#nav {
margin:0 auto;
width: 760px;
height: 58px;
background-color: #FFE500;
background-image: url(images/navBG.gif);
}

#nav ul {
float:left;
width:100%;
list-style: none;
margin: 0 auto;
}

#nav li {
width:25%;
float: left;
display:inline;
}

#nav img {
display: block;
text-decoration: none;
border: none;
margin:0 auto;
height: 27px;
}

[REDiPixel]

i suggest:

#nav ul {
margin: 0 auto;
list-style: none;
padding: 0;
text-align: center;
}

#nav li {display: inline;}

#nav img {
text-decoration: none;
border: none;
height: 27px;
}

[REDiPixel]

woah same time LOL

[pfmac]

more or less the same answer as well :)

[rosem]

what does display: inline do compared to display: block?

thanks guys!

[Game Makker]

display:inline turns an element into an inline element (like an anchor tag or formatting tags)

display:block turns the element into a block level element like a header tag or list item.

For example if you wanted to have your date written in the heading of a news article but not on the same line you could easily wrap it in a span and give the span a display:block property which would force it onto another line.

Similarly by giving something like a list item the property display:inline it will cause them to line up horizontaly.

Hope that helps you

[rosem]

Ok guys, I'm almost there, I still can't get it to center right... The spacing after 'Sign Up' seems really weird... Can anyone take another look at it for me? I recently change the links from images to plain text (made more sense in the long run).

http://www.rosem.com/work/random/dawgDays/


Thanks for everyones help so far, I love this forum :)
Mike

[rosem]

Ok guys, I'm almost there, I still can't get it to center right... The spacing after 'Sign Up' seems really weird... Can anyone take another look at it for me? I recently change the links from images to plain text (made more sense in the long run).

http://www.rosem.com/work/random/dawgDays/


Thanks for everyones help so far, I love this forum :)
Mike

[rosem]

Also, I noticed I'm getting the 8px margin at the top of the page, but not at the bottom (firefox problem only, fine in IE). Any ideas on that?

:)

[pfmac]

Hi,

The spacing on the menu looks fine to me (FF and IE on a PC)

As for the margin at the bottom you need to clear after the footer for it to show up in FF.

Have a look at this for the best solution to the problem: http://www.positioniseverything.net/easyclearing.html

[Game Makker]

I don't know if this would help but ...


#nav ul {
list-style: none;
display: block;
//Change values for left and right to try and center it prefferably using percent
margin: 0px;
width: auto;
}

#nav li {
float: left;
width: auto;
margin-top: 20px;
//Alter accordingly to get the correct effect
padding:0px 5% 0px 5%;
text-align: left;
}


I hope that was help.

EDIT: It was because you have set a certain width for all of them so of course any navigational item with less words and such will look as though it has an odd amount of padding.