Help with nav menu and image replacement

[scbunch]

I have 1 background image made up 4 buttons on a vertical menu. I’m not sure if there is a way to do this but I was trying to use the sprite technique. I dont have any hover or active states, however. My image. [attachment=0]nav.gif[/attachment]

Code:

body>

• Interactive
• Print
• Personal
• contact

Code:

#nav {
width:34%; /* this width + content width must total 100% */
height:235px;
float:left; /* floats on nav and content divs make them sit side by side */
background: url(nav.gif) no-repeat;
}

#nav_inner li {
padding:0;
margin:0;
width:177px;
height:235px;
list-style:none;

}
#nav_inner li, #nav_inner a {
height: 235px; text-decoration:none; text-indent:-9999px;
}

#nav1 {top:0; height: 45px;}
#nav2 {top:61px; height: 55px;}
#nav3 {top: 130px; height: 49px;}
#nav4 {top: 197px; height: 47px;}

If someone could steer me in the right direction I would be much appreciated! Thanks!

[Rob MacKay]

It’s probably better to watch someone do it sooo…

https://css-tricks.com/video-screencasts … s-sprites/

https://css-tricks.com/css-sprites/ <– written article

I can also recommend you watching this nice vid from the guys at obox…

http://www.from-the-couch.com/post.cfm/ … ss-sprites

[Author]

Posts