SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Switching a element background when selected

    I'm stumped trying to figure out a way to have a different background on my <li> elements when an <a> inside of them is selected.

    I'm also using a Jquery tabbing feature called idTabs to navigate to various anchors when clicked to give the appearance of tabs. It's really all a one page website.

    The difficulty is in trying to get a different "selected" sort of background on the tab link <li> that has just been clicked.

    Tab markup is

    `<ul class="idTabs">
    <li class="tabBorder tabBackers"><a href="#enabling">Enabling<br>Next-Generation<br>Medicine</a></li>
    <li class="tabBorder tabBackers"><a href="#what">What is<br>Ayrris&trade;</a></li>
    <li class="tabBorder tabBackers"><a href="#benefits">Benefits<br>of Ayrris&trade;</a></li>
    <li class="tabBackers"><a href="#why">Why Ayrris&trade;<br>for Big Data?</a></li>
    </ul>

    <div id="enabling">Some content</div>
    <div id="what">Some content</div>
    <div id="benefits">Some content</div>
    <div id="why">Some content</div>`

    So the tabBacker CSS has a colored background and I'd like that to switch to an image when that link is selected. But the anchor link is inside the <li> that needs the switched background. It like to call an image called button-backer_on.gif as a background when selected.

    Here's current CSS:

    `.idTabs li { float:left; width:234px; height:94px; background-color:#2f2f2f; font-size:18px; text-align:center; }
    .idTabs li a { color:#ffffff; }
    .tabBorder { border-right:1px solid #3c3c3c; }
    .tabBackers { background-color:#353535; }
    .tabBackers a.selected { background:#0082c8 url(../img/button-backer_on.gif) top left no-repeat; }`

    And the dev link:

    http://www.savagepixels.com/ayrris/index.html

    I also got to figure out to center that button text Vertically in the <li> ... weird problem ...

    Thanks

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shoot. I figured it out ... I just had to apply my background formatting to the anchor instead of the <li>.

    Does anybody know how to center that text vertically?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by scott1964 View Post
    Does anybody know how to center that text vertically?
    You could set the UL to display: table and the LIs to display: table-cell (remove the float) and vertical-align: middle and set the width and height on the LIs that was on the As. Then you'd have to remove display: block from the As and put the blue background on the LIs on hover and when selected.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My understanding was that all the action had to happen on the anchors. Can I use the <li> as a hotspot? I would love to know how to do that.

    <a href="someUrl.html"><li>Some text</li></a>

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There also must be a way to tell it to do a colspan="4" right? because right now the table is stacking vertically.

    I tried this too: display:table-row;

    Didn't work.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am slowly getting the picture. What I was missing in the past post was the vertical align middle part. That snapped everything horizontal nicely.

    My last issue is, I still don't see how to do a .selected on an <li>. I tried to display the <li> as an anchor or something, but it didn't work. I can't do this on a hover because it's just required for the "pages" that are deemed in the "on" state.

    New dev link:

    http://www.savagepixels.com/ayrris/indexTest.html

    thanks


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
  •