SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble With Sprites :(

    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

    HTML Code:
                <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    div.st_vertical ul.st_tabs a.st_tab_active {
    position: relative;
    z-index: 10;
    color: #1CA5EC;
    padding-right: 1px;
    background: white;
    }
    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. #3
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph,
    Once again you are da man! You've helped me learn a lot this year. Thank you.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Glad that was helpful. I thought it might seem a bit garbled.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •