Trouble With Sprites :(

HTML & CSS
1

I recently tried to push my skills a little bit and I am having trouble understanding sprites. I was able to get it to work for a simple school project last year, but no luck now. I have the class attached to the list items in a Jquery tab slider. The code renders but I cannot get an image to show. Can anyone tell me what I am doing wrong? Here is my code for the first list item/tab of Web Development. You can see the slider at bottom of homepage here: mycodeden.com

            <div class="st_slide_container">
                <ul class="st_tabs">
                    <li class="webdev"><a href="#stv_content_1" rel="v_tab_1" class="st_tab st_tab_active">Web Development<span>Lorem ipsum dolor sit amet</span></a></li>
                    <li class="seo"><a href="#stv_content_2" rel="v_tab_2" class="st_tab">Search Engine Optimization<span>Lorem ipsum dolor sit amet</span></a></li>
                    <li class="ppc"><a href="#stv_content_3" rel="v_tab_3" class="st_tab">Pay Per Click<span>Lorem ipsum dolor sit amet</span></a></li>
                    <li class="social"><a href="#stv_content_4" rel="v_tab_4" class="st_tab">Social Media<span>Lorem ipsum dolor sit amet</span></a></li>
                    <li class="hosting"><a href="#stv_content_5" rel="v_tab_5" class="st_tab">Premium Hosting<span>Lorem ipsum dolor sit amet</span></a></li>
                    <li class="graphics"><a href="#stv_content_6" rel="v_tab_6" class="st_tab">Graphic Design<span>Lorem ipsum dolor sit amet</span></a></li>
                    <li><a href="#stv_content_7" rel="v_tab_7" class="st_tab">Vertical Tab #7<span>Lorem ipsum dolor sit amet</span></a></li>
                    <li><a href="#stv_content_8" rel="v_tab_8" class="st_tab">Vertical Tab #8<span>Lorem ipsum dolor sit amet</span></a></li>
                </ul>

            </div>

/List Class/
#st_vertical .st_tabs_container .st_slide_container .st_tabs li.webdev {
background: url(‘http://mycodeden.com/wp-content/themes/dynamik/css/images/sprites.png’)no-repeat scroll 0 0 transparent;
position: relative;
z-index: 10;
}

2

The first problem you have is that the image is on the <li>, while the <a> inside it has a white background, which covers over the <li> background:

div.st_vertical ul.st_tabs a.st_tab_active {
position: relative;
z-index: 10;
color: #1CA5EC;
padding-right: 1px;
[COLOR="#FF0000"]background: white;[/COLOR]
}

So the bg image should be on the <a> itself. However, unless you constrain the background, each link will show all of the images in that file. So one option is to put a <span> inside the <a> and set a width and height for it, so that only the relevant part of the sprite can show. You’ll need to give the <a> position: relative and the <span> position: absolute so you can accurately place it where you want it to go.

3

Ralph,
Once again you are da man! You’ve helped me learn a lot this year. Thank you.

4

Glad that was helpful. I thought it might seem a bit garbled. :slight_smile: