SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Arrow image in active bootstrap tab

    When in active tab, there is an arrow image under the tab but it is covered by red color tab image. May I know how to fix it?

    http://jsfiddle.net/DJHZb/15/ (This file show the arrow image w/o red tab image)

    This file shown the arrow image covered by red tab color:
    http://jsfiddle.net/DJHZb/14/

    .nav-tabs2 .active { background-image:url(/mod/images/menu-arrow.png); background-repeat:no-repeat; background-position:bottom center; }

    <div class="box-head tabs">
    <ul class="nav2 nav-tabs2">
    <li class="active">
    <a href="#0" data-toggle="tab" class="firstelement">Active Tab</a></li>
    <li><a href="#1" data-toggle="tab">Inactive Tab</a></li>
    <li><a href="#2" data-toggle="tab">Inactive Tab #2</a></li>
    </ul>
    </div>

    There is example how the arrow image look like when in actived tab:
    http://www.asiarooms.com/en/malaysia...que_hotel.html

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yes, a background image on the LI is no use, because the content of the LI cover it over. If you gave the LIs a height of, say, 44px, and removed the bg color on the UL, you would see the arrow, but that's not very practical.

    Another option would be to use :before or :after on the LI (or <a>), put the arrow on it as a bg image, and position it absolutely at the bottom of the element. You'd just give the parent element position relative.


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
  •