css sprite for navigation not working!

[roncito]

made a navbar using images cut out from PS and i cant get it to work? Dont know what im doing wrong. Img size is 469px by 104px. Heres my code.

• HOME
• ABOUT
• PROJECTS
• CONTACT

css:
#nav {background: url(../nav-bar.png)no-repeat ; height: 48px; width: 468px; position: absolute; top: 225px; left: 180px;

margin: 0; padding: 0; }

#nav span {
display: none;
}

#nav li, #nav a {
height:48px;
display:block;
}

#nav li {
float:left;
list-style:none;
display:inline;
}

#nav-example-01 {
width: 91px;
}
#nav-example-02 {width: 107px;}
#nav-example-03 {width: 138px;}
#nav-example-04 {width: 126px;}

#nav-example-01 a:hover {background: url(../nav-bar.png) 0 -48 no-repeat; }
#nav-example-02 a:hover {background: url(../nav-bar.png) -198px -48px no-repeat; }
#nav-example-03 a:hover {background: url(../nav-bar.png) -336px -48px no-repeat; }
#nav-example-04 a:hover {background: url(../nav-bar.png) -462px -48px no-repeat; }

sorry for using all this space and thanks for any help .
ron

[roncito]

Sorry but right now i don’t have it on a server. This is the first time trying this method. any other way to do it? thanks

[roncito]

also the imiage that im using is a png24, its tranparent. i dont know if that makes a difference either?
Ron

[roncito]

http://imageshack.us/photo/my-images/857/navbarh.png/
thanks,
Ron

[chrisburton]

…You absolutely do not need an image for this.

[roncito]

thanks for the suggestion,
I’ll give it a try.
Ron

[TheDoc]

@fordinary

page-id-7 #nav li.Projects a {

/* shift background position */

}

[TheDoc]

You’d have to do this:
background-position: 0 -47px;

[TheDoc]

Oops! You’re missing the . in front of page-id-5.

.page-id-5 #nav li.About-Me a

[furrball1383]

dude i agree with Christopher Burton, you do not need an image for this, simply have your font styles set up for your list items and then have the onhover and onclick commands set the colors of said list items to the new colors

[chrisburton]

if that is what roncito is after then the image sprite is the best method to be using

False. In no way do you need to use an image to change color and use an underline on a hover event.

[chrisburton]

@sl1dr: I completely understood your point but I believe it is naive and unless his graphic was significant enough not able to produce through code, I would certainly not use an image. There are other ways to help with fallback.

[roncito]

thanks guys for the help. it works either way for me.

[Author]

Posts