Hi,

I'm converting a website (http://www.dfwpurebredrescue.org/) to CSS and want to get rid of the tables. I'm very new to CSS, and I'm having trouble with the navigation bar.

Using an unordered list I was able to align the normal images, but couldn't get the images to rollover. So then I tried some other tutorials that just had text links in hopes I could figure out how to change it to use images ... and now I'm really lost and pretty much back at the beginning.

Any help would be greatly appreciated! Thank you.

I've found some of these to be very useful...

http://www.dynamicdrive.com/style/cs...y/category/C1/

No scripting necessary, you can do image rollovers with just css.

You can use plain text and use the a:hover pseudo-class to change the text color when you roll over the button.

So your CSS would look something like this:

li a:link{
color: #dacae6; /* sets text color to lavender*/
}

li a:hover{
color: #cfe5ae; /*sets text color on mouse over to pale green*/
}

No images necessary and you have readable, accessible TEXT.

You might want to try out this tutorial on lists:
http://css.maxdesign.com.au/listutorial/

Thats right, but if you really want to use images, then it is possible to do so with CSS. I am about to write a blog post on this, so I'll explain in more detail there, but if you design an image that contains both the images involved (so for example, the original image on top of the desired rollover image, all in one picture) then you can use the background-position property to create a rollover effect.

For a good example of the use of this, go to Glush.tv, then have a look at the search button at the top.

Main Site
The Image
The CSS

The CSS part is under 'input.button'

Hope it helps, its a great little method

That's interesting, angel -- thanks. Never saw this done like that (with one image). I'll have to keep an eye on your blog for that blog post on this -- thanks.

Originally Posted by fitnfree

That's interesting, angel -- thanks. Never saw this done like that (with one image). I'll have to keep an eye on your blog for that blog post on this -- thanks.

No probs - I'll let you know when I've written it

Thank you, everyone, I really appreciate the help!

Originally Posted by Angelosanto

No probs - I'll let you know when I've written it

That'd be great Angel, thanks again!

The method Danny mentioned is called Sliding Doors - I believe it was first mentioned here: http://www.alistapart.com/articles/slidingdoors/

This could be used for my drop down menu header rollovers on the site I'm working on right?

I would really like to recreate my menu in CSS and dump the javascript, but it seems like it will take some time to figure out how to do that...

Dr. Seuss you could, in fact, use a CSS method for your menu w/o using the mess of JS you have now.