Horizontal Navigation Menu with CSS and Background Image

Using CSS and a multi-state image, create a horizontal navigation menu with buttons from an unordered (bullet) list.

Category:

Howto & Style

Tags:

• web
• authoring
• development
• cis
• 195
• 196
• css
• navigation
• menu
• background-image

[srgtfx]

how can i remove the spaces?

[rrphillips]

@srgtfx Determine where the spaces are. To do this, put some temporary borders or background colors on elements. The space could be caused by margin or padding on the list items and/or the anchor tags. Once you've determined what's causing the space, set the margin and/or padding to 0px. The space is likely some default margin between the list items (li tags). A reset rule might help with this, too.

[ads0668]

I've followed these steps and have my menu working perfectly in Firefox but the page comes up blank in Safari. Does Safari support this css?

[rrphillips]

@ads0668

Look for a missing closing tag in your HTML. Some browsers are more forgiving than others. A blank page is a common symptom for a missing closing tag for title, or head or style if you've got that.

This technique is support by all modern browsers.

[5pivegg]

Love your keyboard sound!

Great video.

Cheers!

[marckensj]

i LIKE IT.

GREAT TUTORIAL

5 STARS

[AdSenseSite]

kind a old, but im like it anyway

[geeno123]

i tried this same technique for my website and my background images for my menu buttons wont show. HELP!! lol

[softwarez4free]

How to make the image stay "Red" when clicked ?

[wikke404]

thank you soooooo much, you are my hero :D



[praveenramc]

awesome tutorial. I learnt few tricks and understood the margin property !

[AshleighGore]

nice video!

[ads0668]

@rrphillips thanks mate. All sorted - just a stupid typo. Thanks