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>Edit: seems the relative positioning/z-index method won't work anyway because you can't click the links.