Need a CSS nav bar tutorial

Perseus

Perseus

Registered
For some reason, I am unable to find a thorough and clean tutorial on how to create a CSS navigation bar. All I want is my bar to contain an "up" image and "rollover" image states, and when clicked, will link to another page.

The tutorials have seen include complex ways to manipulate links and a:link, a:hover states etc, and I just dont understand it. Can anyone help me?
 
a:link {color: black; text-decoration: none;}
a:active{color:black; text-decoration: underline; }
a:visited{ color:black; text-decoration: none;}
a:hover {color:red; text-decoration:underline;}

this will make a generic rollover with an underline on the text. if you want more help write back
 
Im asking for a navigation bar consisting of images that are buttons. There will be a normal state (one image) and the rollover state (second image). When clicked, you will be linked to another page. Thats all.
 
.buttonOne
{
backround-image: url(image.png);
}

.buttonOne:hover
{
background-image: url(imageOver.png);
}
 
Code: 
------
HTML
------

<ul id="navlist">
     <li><a href="link.html" accesskey=" " title="Link Title Here">Link Text</a></li>
<li><a href="link.html" accesskey=" " title="Link Title Here">Link Text</a></li>
<li><a href="link.html" accesskey=" " title="Link Title Here">Link Text</a></li>
<li><a href="link.html" accesskey=" " title="Link Title Here">Link Text</a></li>
</ul>



------
CSS
------

#navlist {
     margin: 0;
     padding: 0;
     list-style: none;
     }

#navlist li a:link, #navlist li a:visited {
     display: block;
     width: 100px;
     height: 30px;
     color: #c03;
     background: transparent url("imagename-normalstate.png") no-repeat top left;
     }

#navlist li a:hover {
     color: #039;
     background: transparent url("imagename-overstate.png") no-repeat top left;
     }

That's assuming you aren't putting the text of the link in the image (a big accessibility no-no). The above code should give you a basic vertical menu. If you need to adjust spacing between buttons, then add a #navlist li rule and use margin or padding as needed.

To make it horizontal, use a #navlist li rule with display:block; float: left; or display: inline.

If you don't want to mess with all that, or at lest the back and forth, post a mock-up of how you want the image to look on the page and a copy of the normal and over states for the buttons and I'll write it up for you.


Good tutorial: http://www.listamatic.com
 
Pengu said:
.buttonOne
{
backround-image: url(image.png);
}

.buttonOne:hover
{
background-image: url(imageOver.png);
}
Click to expand...

pengu...i've never seen this approach before. so do you just apply this class to a td and the images will show up in it?

bigdoug
 
no. if you look at the site i posted (a work in progress) you'll see they're added to each HREF, with an index-transparent PNG inside, with a class set to width: 100%; height: 100%

i forgot to add the dimensions to the classes above.
 
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)...
 
I am proud to say I do not use tables! :D
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.
 

Attachments

  • homeup.gif
    homeup.gif
    130 bytes · Views: 1
  • homeover.gif
    homeover.gif
    165 bytes · Views: 2
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.
 
Cat, that sounds fine to me. But what about the little gray border im using? Can you help me? Thanks.
 
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-wizards/list-o-matic/list-o-matic.asp
* http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
 
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....
 
you need to put that in whatever class or ID you want it to apply to. don't forget some browsers (including Safari) have a setting not to display text smaller than a certain size.
 
By the way, Cat, I highly appreciate the code you gave me etc, but it only displays properly in Firefox, Safari and Opera...and NOT in Netscape, IE or Mozilla. What to do?
 
Try adding a proper DOCTYPE to that code...IE will use 'quirks mode' unless it knows what it's dealing with.
 
You must log in or register to reply here.
Back
Top