CSS - Cannot use text-align

HTML:


<nav>
<div id="menu">
<ul id="nav">
<li class="top"><a href="index.php" id="home" class="l"><span class="ts">Home</span></a></li>
<li class="top"><a href="index.php" id="support" class="l"><span class="ts">Forums</span></a></li>
<li class="top"><a href="index.php" id="support" class="l"><span class="ts">Support</span></a></li>
</ul>
</div>
</nav>

</html>


CSS:


#nav a.l, #nav a.l:visited{
text-align:center;
display:block;
width:106px;
height:34px;
position:relative;
top:-4px;
line-height:34px;
text-decoration:none;
font-weight:bold;
margin-bottom:4px;
background:url(images/link_bg.png) left top;
}


problem:


It does not align my navigation bar, I want it to center itself in the middle of the page. It just does not want to do so, no matter where i put it it will not center. If i need to post a picture please tell me to, otherwise my issue is just a center align issue.

At first you need to fix any error in your code like this one:
<a href="index.php" id="home"><a href="index.php" class="l">…
You can’t have an anchor inside another anchor.
And then this:
… Home</span></a></li>class="l"><span … What is this?

Also class cannot have numeric name :)

That’s an “L”, not a “1”.

in addition to VIP... you cannot use text-align to move a div... to center your div (note with regards to it's parent) use
margin:0px auto;

in addition to VIP... you cannot use text-align to move a div... to center your div (note with regards to it's parent) use
margin:0px auto;

not moving a div, im trying to move an unordered list, i have checked other websites and they have successfully achieved it.


Plus i was tired while making this webpage, i will fix the errors.

@vip that was a copy error, for the second one.

you have


<div id="menu"> <-- ...... that's a div, and it is around your ul
the ul inside here...
</div>

you have

Ok, but explain to me why it works on another website? Thats what i do not understand, i have checked over this other website multiple times. It just wont function the same as that one.


P.S I have fixed it, just using positioning.


The website is google :)

nononononononononononooooooooooooooooooooooooooo
don't use positioning for this...
just do this in your CSS

#menu{margin:0px auto;}

and if you already have margins set on your #menu then just make the left and right margins "auto"

nononononononononononooooooooooooooooooooooooooo
don't use positioning for this...
just do this in your CSS

#menu{margin:0px auto;}

and if you already have margins set on your #menu then just make the left and right margins "auto"

i have tried that, it did nothing. I guess i will just rewrite the whole entire webpage.

post rest of code please

HTML- http://pastebin.com/4zVzTsab

CSS- http://pastebin.com/yyfJTtgT

probably need to define a width


.center {
width: 100px;
margin: 0 auto;
}


there can be no floats or position: absolute; on center for margin: 0 auto; to work

EDIT: your code


#menu{
width:766;


need 766px

probably need to define a width


.center {
width: 100px;
margin: 0 auto;
}


there can be no floats or position: absolute; on center for margin: 0 auto; to work

EDIT: your code


#menu{
width:766;


need 766px

just a typo, wrote this at 5am


Edit: Fixed all "px" typos.

add this to your css
.menu ul li {text-align: center; }

Let me know if this will work.

add this to your css
.menu ul li {text-align: center; }

Let me know if this will work.

I assume the above code works. Well, have a nice day coding.