CODEWITHSUNDEEP
css
user3188544
user3188544

Reputation: 1631

How to overlap a border in CSS in order to create tabs?

I'm trying to create the following tabs:

enter image description here

And have a problem figuring out how to make the active tab overlap the order on the list. Here is the HTML:

<ul>
 <li class="active">LATEST</li>
 <li>VOTES</li>
<ul>

Upvotes: 0

Views: 3122

Answers (2)

K K
K K

Reputation: 18099

Without div:

Demo: http://jsfiddle.net/GCu2D/790/

CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background-color:#f0f0f0
}
ul {
    margin:0px;
    padding:0;
    position:relative;
}
ul:before {
    left: 0;
    right: 0;
    bottom: 0px;
    height: 0;
    border-bottom: 1px solid #777;
    content:"";
    top: auto;
    display: block;
    position: absolute;
}
ul:after {
    clear:both;
    display:block;
    content:""
}
ul li {
    display:block;
    float:left;
    padding:5px 10px;
    border:1px solid #777;
    margin-right:-1px;
    position:relative;
}
ul li.active {
    border-bottom:1px solid #f0f0f0
}

HTML:

<ul>
    <li class="active">LATEST</li>
    <li>VOTES</li>
</ul>

With extra div

You can try this way: http://jsfiddle.net/GCu2D/787/

CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background-color:#f0f0f0
}
ul {
    margin:0px;
    padding:0;
}
ul:after {
    clear:both;
    display:block;
    content:""
}
ul li {
    display:block;
    float:left;
    padding:5px 10px;
    border:1px solid #777;
    margin-right:-1px;
    position:relative;
}
div {
    border:1px solid #777;
    margin-top:-1px;
}
ul li.active {
    border-bottom:1px solid #f0f0f0
}

HTML:

<ul>
    <li class="active">LATEST</li>
    <li>VOTES</li>
</ul>
<div>Content</div>

Upvotes: 5

Petru Lebada
Petru Lebada

Reputation: 1682

Why don't you hide the bottom border of the active link instead?

.active{
  border-bottom: 0;
}

Or make it transparent:

.active{
  border-bottom: 1px solid transparent;
}

Upvotes: 0

Related Questions