How to make an html/css horizontal navigation bar?

DanTheMan

New member
I'm trying to finish up a web site for a final project, and it says I have to make a navigation bar with css code, and then add it to my external style sheet so it applies to all other pages. How do I do this, and how can I get it on my external style sheet?
 
If I were doing this for my own website, I'd use the unordered list element and style it accordingly:

The HTML:
<div id="navbar">
**<ul>
****<li><a href="link1.html">Button 1</a></li>
****<li><a href="link2.html ">Button 2</a></li>
****<li><a href="link3.html ">Button 3</a></li>
**</ul>
</div>

The CSS:
div#navbar {
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #336699;
}

div#navbar ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}

div#navbar li {
list-style-type: none;
display: inline;
}

div#navbar li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}

div#navbar li a:link {
color: #FFF:
}

div#navbar li a:visited {
color: #CCC;
}

div#navbar li a:hover {
font-weight: bold;
color: #FFF;
background-color: #3366FF;
}

--
Of course, this is just an example of a horizontal menu. CSS properties may vary depending on how you want it to look...
 
nav bars are usually unordered lists now I usually put mine in either a div or, depending on the size of the site, in it's own php file to start make your menu on all your pages you want it on....
<div id=navigation> **optional** if you have other lists on your site it would be easiest to do it this way.

<ul>
<li><a href......></a></li>
<li><a href......></a></li>
<li><a href......></a></li>
<li><a href......></a></li>
etc....
</ul>
</div>

k that's all the html you'll need for the css there are several factors to look at when styling your menu.

#navigation{}
#navigation li the list items themselves
#navigation a the anchors themselves
#navigation a:active the active anchor
#navigation a:visited the visited anchors
#navigation a:hover changes if you want anything on a mouseover
and there are a few other pseudo classes for that but these are the ones I usually use. to make the list horizontal it's just a simple float:left; in either the li or the a toy around with padding commands and other things to really understand how the styling works it took me a little while to figure it all out but it's not to bad once you do. good luck!
 
Back
Top