SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    321
    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,203
    Mentioned
    456 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
    321
    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,203
    Mentioned
    456 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
    321
    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
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So why do we ignore the other portion of the class name?


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
  •