Need a CSS nav bar tutorial

[Perseus]

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?

[bigdoug]

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

[Perseus]

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.

[Pengu]

.buttonOne
{
backround-image: url(image.png);
}

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

[Pengu]

check out this page. I've got a lot of stuff, but the buttons are in a seperate CSS file.

http://pengu.uttx.net

http://pengu.uttx.net/css/buttons.css

[mdnky]

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

[bigdoug]

Originally Posted by Pengu

.buttonOne
{
backround-image: url(image.png);
}

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

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

[Pengu]

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.