Tabbed interface: can't get rid of bottom border

[dcnguyen]

Gah...been racking my head on this. I want to make a CSS/Javascript tabbed interface similar to this:

http://sunshine.rahul.net/~unicorn/menutest.html

Or what you would find on Google's personalized homepage.

My hangup is how do I go about making the bottom border of the active tab go away?

Suchas:

   _______   _______  ________
   |active|  |      | |      |
****      ****------**----------
|                               |
|     main content              |

It's trivial to get the borders around the sides of "main content" and the sides and tops of the tabs. But how do I get lines to show up where the asterisks are in the above diagram? If I give a top border to "main content", it'll put a bottom border for the active tab.

 

[Vragabond]

Why don't you just check how it is coded on your reference page. Let's see. If you move all your tabs a little bit into the bottom element (give them margin-bottom: -1px) then they will overlap the line. If their bottom border will be the same colour as the line, they will be non-active tabs. If their bottom border will be the same colour as the background, then they are active tab. Makes sense?

 

[Sleidia]

Here are tabs that are all without the bottom border and that toggle div layers :

CSS

.taboff {

    -moz-box-sizing: border-box;
    margin: 0px 5px 0px 0px;
    padding: 6px 10px 3px 10px;
    background-color: #FFFFFF;
    color: #999999;
    border-top:1px solid #999999;
    border-left: 1px solid #999999;
    border-right:1px solid #999999;
    font-weight: bold;
    text-decoration: none;
    line-height: 33px;

}

.taboff:link {color: #999999;}
.taboff:visited {color: #999999;}
.taboff:active {color: #999999;}
.taboff:hover {color: #FF3300;}

.tabon {

    -moz-box-sizing: border-box;
    margin: 0px 5px 0px 0px;
    padding: 6px 10px 3px 10px;
    background-color: #FFFFFF;
    color: #336699;
    border-top:1px solid #336699;
    border-left: 1px solid #336699;
    border-right:1px solid #336699;
    font-weight: bold;
    text-decoration: none;
    line-height: 33px;

}

.tabon:link {color: #336699;}
.tabon:visited {color: #336699;}
.tabon:active {color: #336699;}

JAVASCRIPT

function defocus( x ) {

    if( navigator.appName == 'Microsoft Internet Explorer' ) {

    self.focus();
    
    } else {

    x.blur();
    
    }

}

// tabs management
function id_toggle_tabs ( tabname , zonename , targetid , idnum ) {
    
    // fix possible targetid errors
    if ( targetid >= idnum || targetid == 0 ) targetid = 1;
    
    // loop through zones
    for ( var j=1; j <= idnum; j++ ) {
        
        if ( document.getElementById( zonename+j ) ) {

        // hide zones linked to unclicked tabs
        document.getElementById( zonename+j ).style.display = 'none';
        
            // fix look of unclicked tabs
            if ( j != targetid ) document.getElementById( tabname+j ).className = tabname + 'off';
        
        }
        
    }

    if ( document.getElementById( zonename + targetid ) ) {
    
    // change look of clicked tab
    document.getElementById( tabname + targetid ).className = tabname+'on';
    
    // unhide zone linked to specified tab
    document.getElementById( zonename + targetid ).style.display = '';
    
    // save clicked tab number in cookie
    cookie_make( 'admin_tab_num' , targetid , 2 );
   
    }

}

HTML

    <a href="javascript: 
    defocus(this); 
    id_toggle_tabs('tab', 'page', 1, 5);
    " id="tab1" class="taboff">Page 1</a>
    
    <a href="javascript: 
    defocus(this); 
    id_toggle_tabs('tab', 'page', 2, 5);
    " id="tab2" class="taboff">Page 2</a>
    
    <a href="javascript: 
    defocus(this); 
    id_toggle_tabs('tab', 'page', 3, 5);
    " id="tab3" class="taboff">Page 3</a>

    
    <a href="javascript: 
    defocus(this); 
    id_toggle_tabs('tab', 'page', 4, 5);
    " id="tab4" class="taboff">Page 4</a>