CODEWITHSUNDEEP
htmlcss
Karl Bao
Karl Bao

Reputation: 421

How to cover the border on active tab when the border is not on ul element

I know how to remove(cover) the border on active tab when the border is set on ul element like this, by setting margin-right: -1px on the tab element.

However, how can I do this when the border is on another panel? I set the margin-right: -1px, but it doesn't make sense......

Here is the demo, I want to break the border between the active tab and the right side panel.

Upvotes: 0

Views: 1134

Answers (3)

Himanshu Vaghela
Himanshu Vaghela

Reputation: 1119

I think you forget to set position property. Just add position:relative it should work fine.

Upvotes: 0

hharchani
hharchani

Reputation: 81

There can be multiple solutions. One is to first make sure that the tabs are above the content panel and their right borders coincide. Then you can color the right border same as background color of the panel, i.e. white. As shown here https://jsfiddle.net/6fnL13w4/1/

.left {
  width: 20%;
  margin-top: 50px;
  margin-right: -1px;
  float: left;

  z-index:1;
  position:relative;
}
li.active {
  background-color: #fff;
  border-right-color: #fff;
}

Upvotes: 1

Leonardo
Leonardo

Reputation: 314

You need set position: relative and a z-index to put the li above the panel

li {
  color: #999;
  border: 1px solid #999;
  border-right-color: transparent;
  margin-bottom: 20px;
  /* add these two rules */
  position: relative;
  z-index: 2;
}

Upvotes: 1

Related Questions