Centering Text

Any help is realllly appreciated!

Page 1 of 1

5 Replies - 599 Views - Last Post: 23 June 2010 - 07:31 AM

#1 yuesunsx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 28-May 10

Centering Text

Posted 18 June 2010 - 09:21 AM

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

Is This A Good Question/Topic? 0
  • +

Replies To: Centering Text

#2 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Centering Text

Posted 18 June 2010 - 01:02 PM

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

Was This Post Helpful? 0
  • +
  • -

#3 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 383
  • Joined: 16-October 08

Re: Centering Text

Posted 20 June 2010 - 11:58 AM

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.
Was This Post Helpful? 1
  • +
  • -

#4 yuesunsx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 28-May 10

Re: Centering Text

Posted 21 June 2010 - 09:56 PM

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 :)
Was This Post Helpful? 0
  • +
  • -

#5 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Centering Text

Posted 22 June 2010 - 08:13 AM

You can go here to learn how to make a navigation bar.
Was This Post Helpful? 0
  • +
  • -

#6 alexcoco  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 10-December 09

Re: Centering Text

Posted 23 June 2010 - 07:31 AM

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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1