CODEWITHSUNDEEP
htmlcss
user984003
user984003

Reputation: 29597

Create tabs in html/css so border disappears beneath active tab

I'm trying to create tabs where there is a top border along the content, and then the active tab overlaps in such a way that there is no border between it and the content.

I've tried playing with negative margins, but it doesn't work. I'd like to do this without using position:absolute

http://jsfiddle.net/Py8BW/3/ (I'm using green and red, but they will be the same color in final result.)

<div class = "tab">inactive</div>
<div class = "tab tab_active">active</div>

<div class = "content"> 
</div>

.

.tab{
  width:70px  ;
     display:inline-block;
    background:green;
    height:50px;  
    // margin-bottom:-2px; /* makes both tabs look active */
}

.tab_active{
     margin-bottom:-2px; /* does nothing */
}

.content{
    border-top:2px solid black;
    width:200px ;
    background:red;
    height:200px;
}

Upvotes: 1

Views: 1276

Answers (2)

Kheema Pandey
Kheema Pandey

Reputation: 10285

Another solution is just to add the border-bottom in the same color and margin-bottom on the class .tab_active.

.tab_active{
    margin-bottom: -2px;
    border-bottom: 2px solid red;
}


.tab {
  width: 70px;
  display: inline-block;
  background: red;
  height: 50px;
  /* margin-bottom: -2px; makes both tabs look active */
}

.tab.active {
  margin-bottom: -2px;
  border-bottom: 2px solid red;
}

.content {
  border-top: 2px solid black;
  width: 200px;
  background: red;
  height: 200px;
}
<div class="tab">inactive</div>
<div class="tab active">active</div>
<div class="content"></div>

Upvotes: 3

Harry
Harry

Reputation: 89780

You can do it using z-index and positioning. Give a higher z-index for the active tab, a slightly lower z-index for the content tab and an even lower z-index for inactive tab(s). This means that the inactive tabs will always be behind the content box which in turn will be behind the active tab.

Now give a top: 2px and position: relative to push the tab headers below a bit to overlap the content box. Now since content box is above the inactive tabs, the border of the content box will be visible above the tab header, but not for the active tab because that is above the content box.

.tab {
    width:70px;
    display:inline-block;
    background:red;
    height:50px;
    z-index:0; /* Pushes inactive tabs behind the content box */
    position: relative;
    top:2px;
}
.tab_active {
    z-index: 2; /* Pushed it before content box because of higher z-index */
}
.content {
    border-top:2px solid black;
    width:200px;
    background:red;
    height:200px;
    position: relative;
    z-index:1; /* Normal z-index */
}

Demo

Updated Demo with borders - Just need to increase the top value.

Update: Alternately, set height of active tab to be equal to height of normal tab + height of border like here. Note that for this method to work the margin-top also should be changed according to the border-width.

Upvotes: 1

Related Questions