# CSS navigation help

**URL:** <https://forum.kirupa.com/t/css-navigation-help/262895>\
**Category:** web dev\
**Created:** [June 10, 2008, 9:33pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895 "2008-06-10T21:33:02Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 10, 2008, 9:33pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895/1 "2008-06-10T21:33:02Z")

</div>

Hey

I have a navigation bar and I want to align it to the center. I tried to find help on google but nothing worked successfully.  
Here’s the navigation CSS code;

```auto

#navigation { background: #000; border-bottom: 18px solid #111111; height: 60px; width: 897px;}
 
#navigation ul { list-style-type: none; margin: 0; padding: 0;}
#navigation ul li { display: inline;}
#navigation ul li a { float: left; display: block; width: 101px; color: #fff; 
border-bottom: 7px solid #353535; border-left: 1px solid #353535; padding: 30px 5px 10px 5px;}
 
#navigation ul li a:hover { border-bottom-color: #fff; color: #68b01b;}

```

If anyone can help me out then great.

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 11, 2008, 8:54am UTC](https://forum.kirupa.com/t/css-navigation-help/262895/2 "2008-06-11T08:54:57Z")

</div>

what part of the code do I put it in?

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 12, 2008, 10:36am UTC](https://forum.kirupa.com/t/css-navigation-help/262895/3 "2008-06-12T10:36:40Z")

</div>

I have added that code but it hasn’t changed at all.  
Here’s the link;  
[http://novaone.co.uk/magic/tools.html](http://novaone.co.uk/magic/tools.html)

The navigation bit is where it says; home, about me, photos, videos and contact (which you probably could have guessed :P)

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 12, 2008, 7:32pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895/4 "2008-06-12T19:32:00Z")

</div>

It is now

```auto

#navigation { display: block; position: relative; margin: 0 auto; background: #000; border-bottom: 18px solid #111111; height: 60px; width: 897px;}
#navigation ul { list-style-type: none; margin: 0; padding: 0;}
#navigation ul li { display: inline;}
#navigation ul li a { float: left; display: block; width: 101px; color: #fff; border-bottom: 7px solid #353535; border-left: 1px solid #353535; padding: 30px 5px 10px 5px;}
#navigation ul li a:hover { border-bottom-color: #fff; color: #68b01b;}

```

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 13, 2008, 8:08am UTC](https://forum.kirupa.com/t/css-navigation-help/262895/5 "2008-06-13T08:08:01Z")

</div>

Okay, it doesn’t seem to work though.  
I’m not sure what HTML DTD is? Where could I find out?  
I checked out that link and it says add this code;

```auto
 
body {text-align: center;}

#container {margin: 0 auto;width: xxxpx;} 

```

ill try this is the #navigation css code.

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 13, 2008, 8:26am UTC](https://forum.kirupa.com/t/css-navigation-help/262895/6 "2008-06-13T08:26:12Z")

</div>

Okay, I have now tried to add

```auto

display: block; position: relative; margin: 0 auto;

```

in the #navigation css code and it doesnt work. Nothing I have tried has worked. I have been able to center the text and also been able to make the navigation display in rows underneath each other but cannot get it centered.

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 13, 2008, 8:32am UTC](https://forum.kirupa.com/t/css-navigation-help/262895/7 "2008-06-13T08:32:28Z")

</div>

Yes I used the code off that also.

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 13, 2008, 8:39am UTC](https://forum.kirupa.com/t/css-navigation-help/262895/8 "2008-06-13T08:39:52Z")

</div>

oh i only using the bit which is in the #container and put it in my css file. Will I need to put the css on the actual page?

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 13, 2008, 3:11pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895/9 "2008-06-13T15:11:24Z")

</div>

Okay so I added that code onto the tools.html page and has made no difference to the navigation section. Only the content, moved the bullet pointed text to the left and is not right. Take a look  
[http://novoane.co.uk/magic/tools.html](http://novoane.co.uk/magic/tools.html)

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 13, 2008, 3:17pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895/10 "2008-06-13T15:17:44Z")

</div>

Yes the site is I think why

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 14, 2008, 2:16pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895/11 "2008-06-14T14:16:56Z")

</div>

Done this but no change :S

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 15, 2008, 1:28pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895/12 "2008-06-15T13:28:16Z")

</div>

okay changed that also and still no alteration. Lets face it, it’s not gonna work lol.

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 17, 2008, 8:51am UTC](https://forum.kirupa.com/t/css-navigation-help/262895/13 "2008-06-17T08:51:05Z")

</div>

Is this in the css file because there is no option for width or height.

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 17, 2008, 4:08pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895/14 "2008-06-17T16:08:31Z")

</div>

Will I need to replace this bit

```auto

margin: 0 auto;

```

with

```auto

width: 500px;

```

---

<div class="post-metadata">

**Author:** ![Dinus](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Dinus](https://forum.kirupa.com/u/Dinus)\
**Post date:** [June 17, 2008, 4:34pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895/15 "2008-06-17T16:34:59Z")

</div>

Thanks so much, this has worked 😃

---

<div class="post-metadata">

**Author:** ![lkky00245](https://avatars.discourse-cdn.com/v4/letter/l/d78d45/32.png) [@lkky00245](https://forum.kirupa.com/u/lkky00245)\
**Post date:** [June 23, 2008, 3:50pm UTC](https://forum.kirupa.com/t/css-navigation-help/262895/16 "2008-06-23T15:50:05Z")

</div>

For years now video [[color=#0000ff]AOC Gold[/color] gamers have been seeking assistance [url=http://www.usfine.com/Runescape-Powerleveling-c-90.html][color=#0000ff]Age of Conan Gold[/color] in playing and conquering the games that they live for. This assistance is sometimes found online, from television shows, or printed cheat materials. [url=http://www.usfine.com/Age-of-Conan-US-PL-c-146.html][color=#0000ff]Age of Conan Power Leveling[/color] Many of these items have successfully helped gamers achieve victory, but they cannot help with all games. [url=http://www.usfine.com/Age-of-Conan-US-PL-c-146.html][color=#0000ff]AOC Power leveling[/color] Using weapons to conquer and efeat may not sound that difficult, but if you have played before than you may realize that it is not as easy as it sounds. The good and valuable weapons must be paid for with . The easiest way to find is to buy it. Similar to the above mentioned resources, purchasing is a great way for a player to enjoy and [url=http://www.usfine.com/Age-of-Conan-US-PL-c-146.html]Age of Conan PowerLeveling](http://www.usfine.com/Age-of-Conan-USA-c-151.html) conquer the game.
