DisgruntledGoat DisgruntledGoat - 2 years ago 124
CSS Question

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;

Answer Source

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.


<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>


    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;

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download