CSS Sprites

[robst]

Hi Folks,

I was really intrigued by Chris’ video tutorial on CSS Sprites, that I decided to give it a try. The problem is that I cannot get the sprites to work. I did not create three seperate images…just one so that I could test out the home pages’ normal, hover, and active styles.

The only thing I see when I preview is the the active state (yellow/tan). The code is exactly the way that Chris set this up, I just created my individual images in Photoshop. So, I’m not understanding the problem here.

Thanks for your help! I’m providing a link to the example below as well as the CSS (I’ll just paste for ease)

http://robstathem.com/css_sprites/index.html

–CSS Here!–
* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
}

#page-wrap {
width: 500px;
margin: 0 auto;
}

ul#menu {
list-style: none;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-indent: -9999px;
display: block;
height: 50px;
float: left;
}
ul#menu li a.home {
background: url(images/menu-home.png) no-repeat bottom center;
width: 100px;
}

ul#menu li a.about {
background: url(images/menu-home.png) no-repeat bottom center;
width: 100px;
}
ul#menu li a.contact {
background: url(images/menu-home.png) no-repeat bottom center;
width: 100px;
}
ul#menu li a.home:hover, ul#menu li a.home:active,
ul#menu li a.about:hover, ul#menu li a.about:active,
ul#menu li a.contact:hover, ul#menu li a.contact:active {
background-position: center center;
}
body#home ul#menu li a.home,
body#about ul#menu li a.about,
body#contact ul#menu li a.contact {
background-position: top center;
}

[virtual]

There are several things. First delete the ul#menu li styling completely. Next you have set a height of 50px for ul#menu li a, so for your hover state -39px is not going to show your hover image, you need to lower it to the same height i.e. -50px and the active state needs to be -100px. You can’t style the hover and active states together as they are stacked 50px apart, so your css needs to read like this:

Code:

ul#menu {
list-style: none;
}

ul#menu li a {
text-indent: -9999px;
display: block;
height: 50px;
float: left;
background: url(images/menu-home.png; /*if you put the 3 states in one image you would still put it here*/
}

ul#menu li a.home {
background-position: 0 0; /*Here you define the position of the home a link*/
width: 100px;
}

ul#menu li a.home:hover {
background-position: 0 -50px; /*Here you define the position of the home hover state*/
}

ul#menu li a.home:active{
background-position: 0 -100px;
}

If you have all 3 states in one image along a line you will also have to change the x value of the background position e.g. the about menu:
ul#menu li a.about {
background-position: -100px 0; /*Here you define the position of the about a link so it does not sit on top of home*/
width: 100px;
}

ul#menu li a.about:hover {
background-position: -100 -50px;
}

It is much easier to do the maths if all your images are the same width.

[robst]

Hi there!

Thanks so much for your help; I appreciate it! As you can tell, I’m brand new to this whole sprites idea, so I will make those corrections and test. Thanks for providing the corrected CSS as well!

Thanks again,
Rob

[robst]

Hi again Virtual,

You know…I was just thinking…in Chris’ video tutorial and code, he didn’t use exact pixel notation, he just specified "top center" etc for the hover, and active states. Yet, this worked for him…but the same code didn’t work for me…unless I missed something that Chris said.

Of course, I’m not trying to make Chris the culprit as this is more than likely my mistake…but still, very strange how the same code didn’t work for me.

Thanks again,
Rob

[virtual]

Oops I just noticed I omitted the closing bracket on this line
background: url(images/menu-home.png; in ul#menu li a, it should read
background: url(images/menu-home.png);

[jamygolden]

I’m not sure if this is causing any problems at the moment, but your Unordered List doesn’t close properly.

Code:

• Home
• About
• Contact

[Author]

Posts