CODEWITHSUNDEEP
css
rix
rix

Reputation: 10642

How to make a tab effect, where li bottom border is white

I'm trying to create a tab effect, as you see in this fiddle: http://jsfiddle.net/kZTUK/

The problem is that the li which is active needs to have a white bottom border so as to make it actually look like a tab.

I can't figure how this is done whilst keeping the li as blocks (I need them as display:block for other reasons.)

Any idea. Thanks,

<style>
.item-list {
border-bottom: 1px solid grey;
overflow: hidden;
}

li {
display: block;
float: right;
margin: 0 30px 0 0;
padding: 5px 10px;    
}

li.active {
border:1px solid black; 
border-bottom:none;     
}
</style>

<div class="item-list">
   <ul class="my_ul">
      <li class="first active">one</li>
      <li class="">two</li>
      <li class="">three</li>
      <li class="last">four</li>
   </ul>
</div>

Upvotes: 0

Views: 880

Answers (3)

Andrew Backes
Andrew Backes

Reputation: 1904

Note the background-color:

<div class="item-list">
 <ul class="my_ul">
  <li class="first active">one</li>
  <li class="">two</li>
  <li class="">three</li>
  <li class="last">four</li>
 </ul>
</div>

.item-list {
  border-bottom: 1px solid grey;
  height: 31px;
}

li {
  display: block;
  float: right;
  margin: 0 30px 0 0;
  padding: 5px 10px;    
}

li.active {
  border:1px solid black; 
  border-bottom: solid white;
  background-color: white;
}

Upvotes: 0

Pedro Estrada
Pedro Estrada

Reputation: 2419

Change your .item-list to a static height of 30 - 1 = 29px , so that the borders overlap, then set the bottom border to white instead of none.

.item-list {
    border-bottom: 1px solid grey;
    height: 29px;
}
li {
    display: block;
    float: right;
    margin: 0 30px 0 0;
    padding: 5px 10px;
}
li.active {
    border:1px solid black;
    border-bottom: 1px solid white;
}

http://jsfiddle.net/kZTUK/4/

Upvotes: 0

JerryHuang.me
JerryHuang.me

Reputation: 1790

Without tweaking your code too much, you change overflow to a static height in your .item-list class.

.item-list {
 border-bottom: 1px solid grey;
height: 31px;
}
li {
display: block;
float: right;
margin: 0 30px 0 0;
padding: 5px 10px;
}
li.active {
border:1px solid black; 
border-bottom: 2px solid #fff;
}

http://jsfiddle.net/HEUqC/12/

Upvotes: 2

Related Questions