CODEWITHSUNDEEP
htmlcss
Austin Davis
Austin Davis

Reputation: 3756

Why is only part of my sprite showing?

I created a sprite for my naviagtion bar so that through javascript/Jquery I could easily swip between the hover on/off state. My question is aren't certain of my css showing up css classes #whatIS1031 #1031Exchange,and #howToStart aren't showing up.

Here is my Html

 <ul id="nav">
            <li class="nav-button" id="home"><a href="Index.html"></a></li>
            <li class="nav-button" id="whatIS1031"><a href="whatIs1031.html"></a></li>
            <li class="nav-button" id="1031Exchange"><a href="exchangeRequ.html"></a></li>
            <li class="nav-button" id="typesOfExchange"><a href="typesOfExchange.html"></a></li>
            <li class="nav-button" id="whyCLX"><a href="howToStart.html"></a></li>
            <li class="nav-button" id="howToStart"><a href="whyCLX.html"></a></li>
            <li class="nav-button" id="resources"><a href="resources.html"></a></li>
            <li class="nav-button" id="faq"><a href="fAQs.html"></a></li>
            <li class="nav-button" id="fee"><a href="fees.html"></a></li>
            <li class="nav-button" id="contactUs"><a href="contactUs.html"></a></li>
        </ul>
        <!--End of nav-->

Here is my css

#home, #home, #whatIs1031, #whatIs1031, #h-1031Exchange, #h-1031Exchange, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #h-howToStart, #h-howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

#h-home{
    background-position: -222px 0;
    width: 225px;
    height: 30px;
}

#home{
    background-position: 0 0;
    width: 225px;
    height: 30px;
}

#whatIs1031{
    background-position: 0 36px;
    width: 225px;
    height: 30px;
}

#h-whatIs1031{
    background-position: -223px -36px;
    width: 225px;
    height: 30px;
}

#1031Exchange{
    background-position: 0 -72px;
    width: 225px;
    height: 30px;
}

#h-1031Exchange{
    background-position: -224px -73px;
    width: 225px;
    height: 30px;
}

#typesOfExchange{
    background-position: 0 -111px;
    width: 225px;
    height: 30px;
}

h-typesOfExchange{
    background-position: -226px -112px;
    width: 225px;
    height: 30px;
}

#h-whyCLX{
    background-position: -227px -150px;
    width: 225px;
    height: 30px;
}

#whyCLX{
    background-position: 0 -150px;
    width: 225px;
    height: 30px;
}

#howToStart{
    background-position: 0 -190px;
    width: 225px;
    height: 30px;
}

#h-howToStart{
    background-position: -230px -189px;
    width: 225px;
    height: 30px;
}

#h-resources{
    background-position: -230px -226px;
    width: 225px;
    height: 30px;
}

#resources{
    background-position: 0 -227px ;
    width: 225px;
    height: 30px;
}

#faq{
    background-position: 0 -264px ;
    width: 225px;
    height: 30px;
}

#h-faq{
    background-position: -230px -263px ;
    width: 225px;
    height: 30px;
}

#fee{
    background-position: 0 -302px ;
    width: 225px;
    height: 30px;
}

#h-fee{
    background-position: -231px -300px ;
    width: 225px;
    height: 30px;
}

#contactUs{
    background-position: 0 -341px ;
    width: 225px;
    height: 30px;
}

#h-contactUs{
    background-position: -231px -337px ;
    width: 225px;
    height: 30px;
}

Here is my code on codepen http://codepen.io/Austin-Davis/pen/Fdhej
here is a copy of my sprite on photobucket http://s1287.beta.photobucket.com/user/debuggingfool/media/nav_zps03a73d67.png.html

Upvotes: 1

Views: 83

Answers (2)

Roy
Roy

Reputation: 987

In addtion to the specific ID naming issues mentioned here, There is no reason to do this in javascript, as CSS has a perfect solution:

Let's use #home as an example:

#home {
    background-position: 0 0;
}

#home:hover {
    background-position: -222px 0;
}

Repeat this for every element. You might also want to optimize your CSS:

instead of applying the background image for every ID specifically -

#home, #home, #whatIs1031, #whatIs1031, #h-1031Exchange, #h-1031Exchange, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #h-howToStart, #h-howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

use the class you've already applied to your elements:

.nav-button {
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

also, you don't have to assign the element size for each ID individually, if they're all the same size. just use - 

.nav-button {
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
    width:225px;
    height:30px;
}

Upvotes: 2

jimbo
jimbo

Reputation: 11042

All of the HTML and CSS for this project deserves an overhaul, but here are the answers to your specific questions:

  • whatIS1031 isn't showing up due to capitalization. The element's ID has a capital 'S' (whatIS1031) while the CSS selector has a lower case 's' (whatIs1031).
  • howToStart isn't showing up because it's missing from the first CSS declaration for the background:url(). Instead, #h-howToStart appears twice.

Side note: you should try out Chrome's dev tools or Firebug for Firefox. Both of them feature ways of inspecting a DOM element to see what CSS styles are applied. From there you could see which styles are missing.

Upvotes: 3

Related Questions