CODEWITHSUNDEEP
csstabs
DisgruntledGoat
DisgruntledGoat

Reputation: 72510

Simple CSS tabs - need to break border on active tab

I want to create a very simple tab style that looks like this:

  _____   _____   _____
_|_____|_|     |_|_____|______________

So basically there is a horizontal border on the bounding box that breaks for the active tab. I'm using a basic list, with the following CSS, but the outer border always appears over the individual tabs. I've tried various positioning and z-index as well to no avail.

ul.tabHolder {
    overflow: hidden;
    clear: both;
    margin: 1em 0;
    padding: 0;
    border-bottom: 1px solid #666;
}
ul.tabHolder li {
    list-style: none;
    float: left;
    margin: 0 3px -1px; /* -1 margin to move tab down 1px */
    padding: 3px 8px;
    background-color: #444;
    border: 1px solid #666;
    font-size: 15px;
}
ul.tabHolder li.active {
    background-color: #944;
    border-bottom: 1px solid #944;
}

Upvotes: 21

Views: 42518

Answers (3)

ghoppe
ghoppe

Reputation: 21784

Try this solution by Eric Meyer.

Content below copied from the site to ensure the answer is still valid if the site closes, changes or breaks.

#navlist {
  padding: 3px 0;
  margin-left: 0;
  border-bottom: 1px solid #778;
  font: bold 12px Verdana, sans-serif;
}

#navlist li {
  list-style: none;
  margin: 0;
  display: inline;
}

#navlist li a {
  padding: 3px 0.5em;
  margin-left: 3px;
  border: 1px solid #778;
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
}

#navlist li a:link {
  color: #448;
}

#navlist li a:visited {
  color: #667;
}

#navlist li a:hover {
  color: #000;
  background: #AAE;
  border-color: #227;
}

#navlist li a#current {
  background: white;
  border-bottom: 1px solid white;
}
<div id="navcontainer">
  <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
  </ul>
</div>

ABOUT THE CODE Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.

Upvotes: 6

Ken
Ken

Reputation: 795

.tab {
  display: inline-block;
  background-color: #aaa;
  padding: 4px;
  border: 1px solid #888;
  border-bottom: none;
  
  position: relative;
  bottom:-1px;
  z-index: -1;
}

.tab-body {
  position: relative;
  height: 100px;
  width: 200px;
  padding: 4px;
  background-color: #ccc;
  border: 1px solid #888;
  z-index: 1;
}

.tab.active {
  background-color: #ccc;
  z-index: 2;
}
<div class="tab tab1">Tab 1</div>
<div class="tab tab2 active">Tab 2</div>
<div class="tab tab3">Tab 3</div>

<div class="tab-body">Tab Body</div>

Upvotes: 3

Dave Everitt
Dave Everitt

Reputation: 17856

Changing your existing code as little as possible - try display: inline-block for the li tags, with the border on a .menu container div:

.menu {
    border-bottom: 1px solid #666;
}
ul.tabHolder {
    overflow: hidden;
    margin: 1em 0 -2px;
    padding: 0;
}
ul.tabHolder li {
    list-style: none;
    display: inline-block;
    margin: 0 3px;
    padding: 3px 8px 0;
    background-color: #444;
    border: 1px solid #666;
    font-size: 15px;
}
ul.tabHolder li.active {
    background-color: #944;
    border-bottom-color: #944;
}

HTML used to illustrate (added div at bottom to show blending of active tab into div colour):

<div class="menu">
    <ul class="tabHolder">
        <li>Menu 1</li>
        <li class="active">Menu 2</li>
        <li>Menu 3</li>
    </ul>
</div>
<div style="background-color: #944; height: 1em">

Upvotes: 2

Related Questions