Need a CSS nav bar tutorial

**Pengu** · May 17th, 2005, 10:57 AM

and. on a side-note. please for the love of god try not to use tables for laying out your pages. That was necessary in 1998 when NS4 was battling IE4/5... Please use CSS. much cleaner.

For those that care, the linked site is what i am developing as a showcase for my skills, interests etc. the UI is using 100% XHTML 1.1 and CSS, with a bit of JavaScript for the scrolling. It's almost 100% supported in IE/Moz/Opera/Safari equally. WinIE let's it down a bit cus of hacky crap for PNGs (to get alpha transparency)...

**Perseus** · May 17th, 2005, 12:45 PM

I am proud to say I do not use tables!

Each rectangular button is 108px width 20px height. There will be five of them, from left to right: home, events, officers, pictures, by laws. When rolled over, I want the button to change to a red background, and I want the font to become white. (Opposite of the up state), and of course, when clicked, link to the respective page. It will occur at: left: 181px, top: 145px, which is inbetween my title image and main content.

I have uploaded my two images. Thanks a billion millions.

**Cat** · May 17th, 2005, 01:09 PM

Why do you need images at all? Isn't changing the backround color better? On my homepage (see signature) I made a similar menu: when you hover the mouse above it the background color and font color are inverted. Very easy to do, no need for images.

**Perseus** · May 17th, 2005, 01:17 PM

Cat, that sounds fine to me. But what about the little gray border im using? Can you help me? Thanks.

**Cat** · May 17th, 2005, 03:07 PM

I suppose a "border: thin solid gray;" or something like that would do the trick.
This is just a very basic example:

Code:

<html>
<head>
<style>

#navcontainer ul
{
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
width: 108px;
height: 20px;
float: left;
text-align: center;
}

#navcontainer ul li a
{
background: white;
border: thin solid gray;
border-right: 0;
color: red;
text-decoration: none;
display: block;
text-align: center;
}

#navcontainer ul li a:hover
{
color: white;
background: red;
}

#navcontainer a:active
{
background: white;
color: red;
}

#navcontainer li#active a
{
background: red;
border: thin solid gray;
color: white;
}

#navcontainer ul li a.last
{border-right: thin solid gray;}

</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
	<li><a href="home.html">Home</a></li>
	<li><a href="events.html">Events</a></li>
	<li><a href="Officers.html">Officers</a></li>
	<li><a href="pictures.html">Pictures</a></li>
	<li><a class="last" href="bylaws.html">By Laws</a></li>
</ul>
</div>
</body>
</html>

Copy-paste, save and look at it in Safari. It's up to you to fill in all the positioning (and margins and padding) and pick more suitable colours.

You might want to check out some of these CSS sites:

* http://www.htmlhelp.com/reference/css/properties.html
* http://alistapart.com/articles/taminglists/
* http://www.accessify.com/tools-and-w...st-o-matic.asp
* http://www.thenoodleincident.com/tut...son/boxes.html

**Perseus** · May 17th, 2005, 05:05 PM

would this work as a horizontal nav bar?

**Perseus** · May 17th, 2005, 05:29 PM

hey, it worked great! thanks cat! now how do i change the font size etc of the text? i tried putting in {font: 12px/1.3 etc..} in the #nav ul { section but it didnt do anything....