Hi all, I'm trying to create a css horizontal menu with ul-li tag, with background image and text, without any results. Can anyone post here an example code without any kind of IE/FF hack (it must be css full-compliant). Thanks in advance!
for anything menu related I
for anything menu related I always use this site as a starting point ...
http://www.cssplay.co.uk/menus/
hope this helps
I actually try to stay away
I actually try to stay away from Stu menus simply because they have a lot of code.
A basic menu, for ALL user agents (all browsers, phones, tv's, PDAs, whatever):
- Blah link
x however many links you have
You weren't very specific with "background images and text" so I'll assume you mean the anchor text is normally showing and there's a background (like a gradient) on the menu itself.
#something { set a width if it's not 100% wide; background: #bgcolor url(bg.gif) 0 0 repeat-x; (set the background image, let's say a top-to-bottom gradient); overflow: hidden or some such thing to make the menu wrap its floated children (see stickies on enclosing floats and IE); } #something li { here I usually set the li's to "display:inline" to stop IE from staircasing... otherwise I'm not doing anything with the li's; } #something a { float: left; set a width if you want, test in all browsers if you stay with "auto"; styles, including for the text (make sure it contrasts with bgcolor of ul); any special background image?? } #something a:focus, #something a:hover { any change in background position or image on hover or focus; }
That's a basic floated menu.
Some folks float the li's instead. I don't. Floating the a's makes them blocks so I can haz heights, widths, and vertical margins on them. The clickable area is larger than just the text then.
If you were talking about image replacement for the text that's a different matter.
There's nothing non-complaint about hacks, you simply want as few of them as possible. If you are building sites which are reachable by IE6 you cannot avoid a few hacks. The common * html hack will be no problem for the CSS validator. However some other IE hacks will not validate. In which case you'd have to decide why validation of hacks in the CSS matter so much. The validator doesn't know or care about buggy browsers who are insanely popular.
There are pretty decent menus (tutorials) on htmldog.com in all styles and types, using similar code to what I have above, with different styles. That site has decent code in its tuts, no crap.
