CODEWITHSUNDEEP
htmlcsstabs
Rubinho G.
Rubinho G.

Reputation: 79

CSS Tabs remove bottom border on active tab, when having a background image

I have a tabmenu which looks like this: tab

Currently, the borders are added on the listitems, but i want to put the bottom border on the ul, because it needs to have a full width and a little bit of margin before the first li.

Normally, a bottom border to the ul is added and a bottom border to the active li with the same backgroundcolor does the trick, but here i have a background-image and i can't figure out how to achieve the same.

Does somebody has a solution?

Update posted on jsfiddle: http://jsfiddle.net/jpw3q/

<ul class="tabmenu">
    <li data-tab-contentid="general" class="active">Algemene gegevens</li>
    <li data-tab-contentid="brands">Merken</li>
    <li data-tab-contentid="openinghours">Openingsuren</li>
    <li data-tab-contentid="promotions">Promoties</li>
    <li data-tab-contentid="advertise">Mijn advertenties</li>
</ul>

Upvotes: 2

Views: 8337

Answers (5)

Gabin An
Gabin An

Reputation: 1

Try this one!

ul { overflow: hidden; margin-bottom: -1px; list-style: none;}
ul li { width: 100px; float: left; padding: 10px; border: 1px solid #ccc; border-width: 0px 0px 1px 0px; }
ul li.active { border-width: 1px 1px 0px 1px; }
<ul>
  <li>Tab 1</li>
  <li class="active">Tab 2</li>
  <li>Tab 3</li>
</ul>

Upvotes: 0

Andrew Aponte
Andrew Aponte

Reputation: 570

You can accomplish this using pseudo elements. It's a bit tricky but it works:

.tabmenu {
    position: relative; /* Needed for absolutely positioned pseudo elements */
    display: table; /* Needed to clear floats */
    padding-left: 0; /* Reset to 0 so left border doesn't get "pushed" away */
}

.tabmenu:before, .tabmenu:after {
    /* These styles set the bottom border that are "outside" of the menu */
    content: "";
    border-bottom: 1px solid white;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.tabmenu:before {
    left: -100%; /* Extend the left border beyond the its parent container */
}

.tabmenu:after {
    right: -100%; /* Extend the right border beyond the its parent container */
}

I've set up a jsfiddle for you here: http://jsfiddle.net/jpw3q/7/

Upvotes: 2

Pevara
Pevara

Reputation: 14310

the background image does indeed complicate things a bit. you could however use the same background image on your li qnd position them one pixel down over the bottom border of your ul. The disadvantage of this technique is that you will have to position the background exactly in the li to align perfectly with the background image of the ul, which makes it hardly a dynamic solution.

I think you should keep your css as is and add the small line to the left of the first li and to the right of the last one, and mimic the effect this way. (At least if I understand correctly wath you are after) This should be easily achieveable with a pseudo selector like :before or :after.

I think the css would look something like this:

li:first-child {
  position: relative;
}
li:first-child:before {
  content: '';
  position: absolute;
  right: 100%;
  bottom: 0;
  width: 30px;
  border-bottom: 1px solid #fff;
}

Obviously you will need to change the width, and apply something similar to li:last-child:after, but I guess you get the general idea. If not, feel free to ask!

and your updated fiddle: http://jsfiddle.net/jpw3q/4/

Upvotes: 5

httpgio
httpgio

Reputation: 127

Just use border none

ul li.active {border-bottom:0}

Upvotes: 1

Ravi
Ravi

Reputation: 115

Yes you can decrease height of background image and you can give the border.

Upvotes: 0

Related Questions