PDA

View Full Version : CSS Navigation



peppermintcake
11 Jan 2010, 10:32 AM
Hello!

I am using the following tutorial to help me http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/ I want the links to change when you hover over them. However, I am having a difficult time getting the navigation technique to work (it starts from Step 23 in the tutorial).

Here is the link to what I have so far: http://www.hotstylers.com/staging/hothome.html - you'll see that when you hover over (home, about, etc) nothing happens.

The image I am using for the navigation: http://www.hotstylers.com/staging/images/menu.png

I've seen this done with individual images used. Is that the best/easiest way in comparison to what the tutorial shows>

I appreciate any help you all can give me .

zachsformacs95
11 Jan 2010, 08:32 PM
I think it's best to use one image because that way the entire image will load with the site, so when you do hover over the links you don't see a delay.

As for your problem, all of your links have a width of 0 in your CSS except for the home. Why? It seems that that might be the problem. I also saw that your <li>s are display:block. I think they need to be inline since it is an inline navbar.

If you still can't figure it out, check out another tutorial I've posted here in response to someone else:

http://www.webdevforums.com/showthread.php?t=34220

Or, check out what I did:

HTML: http://www.austinjugglingmagician.com/
CSS: http://www.austinjugglingmagician.com/global/styles/global.css