I stumbled upon this tutorial on creating sprites here. To see the finished result of the CSS sprites, click here. Below is the complete CSS code:
#skyline {
width: 400px;
height: 200px;
background: url(test-3.jpg);
margin: 10px auto; padding: 0;
position: relative;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}
#panel1b a:hover {background: transparent url(test-3.jpg) 0 -200px no-repeat;}
#panel2b a:hover {background: transparent url(test-3.jpg) -96px -200px no-repeat;}
#panel3b a:hover {background: transparent url(test-3.jpg) -172px -200px no-repeat;}
#panel4b a:hover {background: transparent url(test-3.jpg) -283px -200px no-repeat;}
I have a question regarding the a:hover part of the code where the sprites are displayed. The vertical position being set to -200px makes sense, but I'm confused about why the horizontal position needs to be negative as well (-96px, -172px). It seems logical to start from 0 and then move positively incrementing by the width of the previous sprite. Why do we need to use negative values for the horizontal positions in this case?
If I change the negative values to positive ones, the sprite stops working. So, why is it necessary for them to be negative? Any CSS experts willing to shed some light on this would be greatly appreciated. Thank you
EDIT:
This is the master image: Master Image