SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS sprite in wordpress

    So, I had my sprite working just fine outside of WP, but the nav structure changed once I put it in WP.

    Site that it worked on
    http://deva.bambl.clients.blinkss.com/index.html

    Site it isn't working on
    http://devb.bambl.clients.blinkss.com/

    Look at the MMA link on the main nav.

    My Wordpress code

    <div id="MainNavigation">

    <ul id="MainNav">



    <div class="menu-mainnavigation-container"><ul id="menu-mainnavigation" class="menu"><li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a title="About us" href="http://devb.bambl.clients.blinkss.com/about-us/">About us</a></li>
    <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-38 current_page_item menu-item-47"><a href="http://devb.bambl.clients.blinkss.com/personal-training/">Personal Training</a></li>
    <li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183"><a href="http://devb.bambl.clients.blinkss.com/schedules/">Schedules</a></li>
    <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://devb.bambl.clients.blinkss.com/contact-us/">Contact us</a></li>
    <li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118"><a href="http://devb.bambl.clients.blinkss.com/group-fitness-classes/">Classes</a></li>
    <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://devb.bambl.clients.blinkss.com/mma-classes/">MMA Classes</a></li>
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://devb.bambl.clients.blinkss.com/trx-training/">TRX Training</a></li>
    <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://devb.bambl.clients.blinkss.com/spin-classes/">SPIN Classes</a></li>
    <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://devb.bambl.clients.blinkss.com/cross-fit/">Cross Fit</a></li>
    </ul></div>


    <!--
    <li> <a href="#">About us</a></li>
    <li> <a href="#">Personal Training</a></li>
    <li> <a href="#">Events</a></li>
    <li> <a href="Classes.html">Classes</a></li>
    <li> <a href="Contact_us.html">Contact us</a> </li>
    <li> <a class="MMA" href="#">MMA</a></li>
    <li> <a class="TRX" href="#">TRX</a></li>
    <li> <a class="SpinClass" href="#">Spin Class</a></li>
    <li> <a class="CrossFit" href="#">Cross Fit</a></li>

    -->

    </ul>



    </div> <!--MainNavigation-->



    Current CSS

    #menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69 {
    display:inline-block;
    width: 101px;
    height: 70px;
    background:url(/wp-content/themes/Newport_Sports_Club/IMAGES/Mixed_Martial_arts.png) 0 0;
    text-indent: -99999px;
    }

    #menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69:hover a {
    background-position: -100px 0px;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Code:
    #menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69 {
    is targeting the LI, rather than the <a>, so try adding a at the end:

    Code:
    #menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69 a {

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea I tried that before and just now again so that you can see it. I don't know what the trick is but its annoying.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Ah, silly me, I didn't notice how invalid your code was. You should have this:

    Code:
    #menu-mainnavigation li.menu-item-69 a{
    instead of this:

    Code:
    #menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69 a {
    You can't select somethng like this in CSS:

    li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69

    See all those gaps? If you wanted a rule specific to a LI with all those classes, you'd have to join them with dots. I.e.

    li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-69

    This is horrifically ugly code, though—the penalty for using a system like WordPress.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx. Yea wordpress really adds a lot of items or whatever you call it. thx its working great!

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So why do we ignore the other portion of the class name?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BrianBam View Post
    So why do we ignore the other portion of the class name?
    Each of those are separate class names. You only need to target one to get the job done. If you want to target them all, you have to tie them together like I showed. If you leave gaps between, that gives the wrong message to the browser. E.g. with this

    li.menu .somethingelse {}

    the browser tries to apply the style to an element inside the LI with a class of "somethingelse". If you meant to target a LI that had two classes—"menu" and "somethingelse", you'd do this:

    li.menu.somethingelse {}

    If you just do this:

    li.menu somethingelse {}

    with no dot before "somethingelse", the rule won't work, as there is no element called <somethingelse>. A class name must have a dot before it.


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
  •