Jump to content

Horizontal Navigation Bar


TrueGrave
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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;}

Edited by jkloth
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...