Page 1 of 1

CSS tabs

Posted: Tue Jun 02, 2009 7:03 pm
by jayshields
I'm trying to make a simple tabbed layout.

I guess there's two ways of doing it. Either lining up the tabs so that the bottom border of it sits on top of the top border of the content pane or to put the tabs (bottom border white) behind the content pane. Then for the current tab you would change the bottom border colour to white or bring the tab in front of the content pane repectively.

I've tried both methods and can't get anything working. Currently I'm trying the second option mentioned above. It looks like this:

Code: Select all

.navigation {
    margin: 0;
    position: relative;
}
 
.navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: -1;
}
 
.navigation ul li {
    display: inline;
    font-weight: bold;
    margin-right: 10px;
    padding: 3px;
    border: 1px solid black;
    border-bottom: 0;
    background-color: #fff;
}
 
.navigation ul li .current, #current {
    z-index: 1;
}
 
.content {
    margin-bottom: 10px;
    border: 1px solid black;
    padding: 10px;
    background-color: #fff;
    z-index: 0;
    position: relative;
}

Code: Select all

<div class="navigation">
 <ul>
    <li class="current"><a href="./home" title="Home">Home</a></li>
    <li><a href="./cv" title="CV">CV</a></li>
    <li><a href="./portfolio" title="Portfolio">Portfolio</a></li>
    <li><a href="./contact" title="Contact">Contact</a></li>
  </ul>
</div>
 
<div class="content">
  The home page
</div>
The problem is that the current tab has the same style as the rest of the tabs. In fact I can't get the current tab to take any styling. I've tried using an ID attribute instead of a class.

Edit: seems the relative positioning/z-index method won't work anyway because you can't click the links.

Re: CSS tabs

Posted: Wed Jun 03, 2009 9:58 am
by pickle
I think your problem is here:

Code: Select all

# .navigation ul li .current, #current {
There's an extra space between "li" and ".current", which changes the rule to: apply to all elements with class "current" inside the li, instead of: apply to all li elements with a a class of "current".