Horizontal Navigation Bar

[TrueGrave]

Ok, I've wasted a few hours trying to do this on my own, so I figure before I go out and make the same mistakes, I'll get help from the beginning.Here is the basic untouched code for the NaviCSS

li{display:inline;}

<ul><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Characters</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characterst</a></li><li><a href="forums.htm">Forums</a></li></ul>

Look familiar? :)Well, what I want is to be able to Center it, and style it. (Please someone help me >.< I tried doing it myself but I could never center it and the styling always got all messed up because I kept trying to be fancy.)Any help would be gladly appreciated!

[chibineku]

I would give your ul an id, in case you end up with more lists. Let's call it #nav.#nav {width: 80%; //or whatever you wantmargin: 0 auto; //centers block level elements }#nav li {float: left; //makes the items sit in a line}What other styling do you want? You just add it to the appropriate selector's definition.

[TrueGrave]

Could you possibly explain what I would have to do the CSS and the HTML files to get it to work?I think not using Div is what messed me up before, and it's because I don't know how to use it How would I go about using it (I just want to know for future references with other parts)Thanks a lot!

[ShadowMage]

Could you possibly explain what I would have to do the CSS and the HTML files to get it to work?I think not using Div is what messed me up before, and it's because I don't know how to use it How would I go about using it (I just want to know for future references with other parts)

chibineku already explained what you need to do. Give your <ul> an id: <ul id='nav'> then put in the CSS he gave you:#nav {width: 80%; //or whatever you wantmargin: 0 auto; //centers block level elements}#nav li {float: left; //makes the items sit in a line}You don't have to have a div. As long as your <ul> has a width (width: 80%; ) then it will get centered by the margin: 0 auto; declaration. A <div>'s main purpose is organization. I believe in your other posts you mentioned a banner also. So you could put your banner and your nav bar inside a div with id='header' (or something along those lines). You would not need to give any CSS to the #nav itself then, only to the #nav li. Instead you would give the width and margin to the #header div:

<div id='header'>   <div id='banner'>...</div>   <ul id='nav>	  <li>Menu1</li>	  ...   </ul></div>

#header {   width: 80%;   margin: 0px auto;}#banner {   /* Banner stuff here */}#nav li {   float: left;}

[TrueGrave]

ah sorry I'm just not used to where I'm supposed to put what yet since I'm used to just editing HTML pages, so when I'm told to add this or add that I'm always like well, do I add it to the css or the html but it's usually a bit of both thanks guys.

[ShadowMage]

ah sorry I'm just not used to where I'm supposed to put what yet since I'm used to just editing HTML pages, so when I'm told to add this or add that I'm always like well, do I add it to the css or the html but it's usually a bit of both thanks guys.

No worries You'll get the hang of it.