...

View Full Version : CSS - Cannot use text-align



kin
07-29-2011, 07:57 AM
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.

VIPStephan
07-29-2011, 09:12 AM
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?

vikram1vicky
07-29-2011, 10:01 AM
Also class cannot have numeric name :)

VIPStephan
07-29-2011, 10:09 AM
That’s an “L”, not a “1”.

alykins
07-29-2011, 03:18 PM
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;

kin
07-29-2011, 09:40 PM
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.

alykins
07-29-2011, 09:59 PM
you have




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

kin
07-29-2011, 10:18 PM
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 :)

alykins
07-29-2011, 10:36 PM
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"

kin
07-29-2011, 10:48 PM
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.

alykins
07-29-2011, 10:50 PM
post rest of code please

kin
07-29-2011, 10:58 PM
HTML- http://pastebin.com/4zVzTsab

CSS- http://pastebin.com/yyfJTtgT

Sammy12
07-29-2011, 10:59 PM
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

kin
07-29-2011, 11:02 PM
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.

webninja
09-01-2011, 07:39 PM
add this to your css

.menu ul li {text-align: center; }

Let me know if this will work.

webninja
09-12-2011, 05:57 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum