[yuesunsx]

Hi all-

I'm very much the novice at HTML/CSS, so I would truly appreciate any help you guys can offer me here.

So for a site I was working on, I had wanted to "center" the navigation, if that makes any sense. By centering, I mean I would like the navigation links to be evenly spread throughout the width of the page. If you look at it here, it clearly didn't work for me.
(The coding of a certain page, for reference: view-source:http://jubi.thecheung.com/aster/)

So this is what I used (in reference to my stylsheet):

<div id="nav"> 
<ul id="navigation"> 
<li><a href="http://www.jubi.thecheung.com/aster/about.php">About</a></li> 
<li><a href="http://www.jubi.thecheung.com/aster/rules.php">Rules/Join</a> 
<li><a href="http://www.jubi.thecheung.com/aster/codes.php">Codes</a></li> 
<li><a href="http://www.jubi.thecheung.com/aster/fanlisting.php">Fanlisting</a></li> 
<li><a href="http://www.jubi.thecheung.com/aster/aster.php">Aster</a> 
<li><a href="http://www.jubi.thecheung.com/aster/">Clear</a></li></ul> 
</div> 

So I don't know if maybe theres a problem with the div box that prevents it from being centered? These are the settings for the navigation div box, titled nav:

#nav{
				width:100%;
				padding-bottom:10px;
				text-align:center;
				margin:0 auto;
}

Then the final possibility might be that there is actually problem in the navigation settings themselves:

#navigation {
                                margin:0 auto;
				padding:0px;
				list-style:none;
				text-align:center;
}
#navigation li, #navigation ul {
				float:left;
				margin-bottom:2px;
				text-align:center;
				display:inline;
}
#navigation li a{
				font-family:Georgia;
				font-size:large;
				letter-spacing:5px;
				color:#515128;
				text-decoration:none;
				margin:38px;
				text-align:center;
}	
#navigation a:hover {
				border-bottom: 2px solid #B0B000;
				color:#242400;
}

Itried at every opportunity to have my "text-align:center;" but to no avail. If anyone can point out what I'm doing wrong, I would appreciate it tremendously. I know it's a lot to read but I would really love your help!

And on a final note, I apologize if I'm not supposed to post so many html boxes :[ If there's a rule on it I'm unaware about, I apologize in advance!

--yuesunsx

[EnvXOwner]

Did you try the center tags?

<center>
<div id="nav"> 
<ul id="navigation"> 
<li><a href="http://www.jubi.thecheung.com/aster/about.php">About</a></li> 
<li><a href="http://www.jubi.thecheung.com/aster/rules.php">Rules/Join</a> 
<li><a href="http://www.jubi.thecheung.com/aster/codes.php">Codes</a></li> 
<li><a href="http://www.jubi.thecheung.com/aster/fanlisting.php">Fanlisting</a></li> 
<li><a href="http://www.jubi.thecheung.com/aster/aster.php">Aster</a> 
<li><a href="http://www.jubi.thecheung.com/aster/">Clear</a></li></ul> 
</div> 
</center>

That may center them.

This post has been edited by EnvXOwner: 18 June 2010 - 01:04 PM

[Quin]

You could try the centre tags, but they are dated. Try margin:0 auto in the nav div, that should centre the entire div. Putting it into the navigational unordered list will centre it to the nav div.

[yuesunsx]

Firstly, thank you both for your help, it is much appreciated <3

Secondly, @Quin (or anyone else ) if you don't mind, I'm rather interested in "the navigational unordered list" but am not familiar with the concept. Any elaboration would be nice, but please don't feel obligated

[EnvXOwner]

You can go here to learn how to make a navigation bar.

[alexcoco]

Try setting a width in pixels, not percent.

#nav{
                                width:500px;
                                padding-bottom:10px;
                                text-align:center;
                                margin:0 auto;
}

This post has been edited by alexcoco: 23 June 2010 - 07:32 AM