Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple CSS tabs - need to break border on active tab

Tags:

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;
}
like image 733
DisgruntledGoat Avatar asked May 10 '10 13:05

DisgruntledGoat


People also ask

How do I get rid of the border on my tab?

On the Design tab, choose Page Borders. In the Borders and Shading dialog box, in the Apply to list, choose the page (or pages) you want to remove the border from. Under Setting, choose None.

How do I put a border around a tab?

Add a border to selected textOn the Home tab, click the arrow next to the Borders button. In the Borders gallery, click the border style that you want to apply.

How do I remove the border tab in CSS?

Look for the properties border , border-top , border-bottom , border-right , and border-left . Either remove it, or change the value to 0 or for each. This will remove the border.


2 Answers

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.

like image 71
ghoppe Avatar answered Sep 23 '22 11:09

ghoppe


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">
like image 27
Dave Everitt Avatar answered Sep 23 '22 11:09

Dave Everitt