CSS tabs

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

CSS tabs

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS tabs

Post 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".
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply