okay, i don't consider myself a novice concerning CSS, but maybe since i don't know how to do this (or don't realize it's impossible), i really AM pretty bad at CSS...

anyway, i want a horizontal list for a navigation bar that uses images instead of text (they're not images OF text, but actual images)...but i can't for the life of me figure out how to get it to work...generally, the best way i can figure to do this is have background images that change upon hover, but i can't get them to remain inline because the images themselves won't show up unless they're block

is this even possible? i can post the code if it'll help explain what i want, but i've tried so many variations, i don't know which version to post first...i want to avoid the use of javascript if at all possible, and i'd prefer doing this correctly using list elements rather than a table (because i know tables will work)...y'all are my last chance doing this the "right" way

10/14/2007 11:19:35 PM

List elements are inline.
Links inside are block.

10/14/2007 11:30:46 PM

simple.

set a style for all the li tags to 'float:left' that will cause them to be horizontal instead of vertical.

under your ul tag set the list-style:none to get rid of the decoration.

also reset all your margins for the ul to 0 same with padding.

then set each li to the width and height of the images.

Then you can set a class for each individual 'button' where you set the background and the hover image....but the best practice is to set both the hover image and the original image in one file (one stacked above the other) so when you hover the li it shifts the background over or up to reveal the hover...this avoids 'lag' or 'delays' when a page first loads and all your hover images haven't loaded.

background:url('imagelocation.ext');

Just check out my source code on my site.

http://www.tripyramidstudios.com/test
http://www.tripyramidstudios.com/test/css/layout.css

you will see what i'm talking about in the style sheet.

I didn't use the positioning technique for my hovers yet but i will when i'm done with the over all design....

[Edited on October 14, 2007 at 11:49 PM. Reason : .]

10/14/2007 11:45:34 PM

^ that float is all i needed...thanks!

10/15/2007 10:33:09 PM

here are some really great CSS menus
http://www.cssplay.co.uk/menus/

he did some recently using images
http://www.cssplay.co.uk/menus/pro_drop.html
http://www.cssplay.co.uk/menus/image_drop.html
http://www.cssplay.co.uk/menus/pro_drop5.html

10/16/2007 7:45:17 AM