By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,624 Members | 2,179 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,624 IT Pros & Developers. It's quick & easy.

Get rid of this line $%&#!

P: n/a
Hello,
I have read the listapart articles about tabbed navigation, sliding doors
etc. But the thing is: I want a very simple, almost minimalistic tabbed
navigation bar, completely shaped by css, and if necessary possibly
generated from a database table.
I managed to get as far as shown in the code below.
The only thing I can not erase is this bottom border in the 'current' tab.
This should be gone so the tab seems to be part of the current page.
Is there a simple way to do this?
Any help appreciated!!
And again: sorry for asking, but I cann't find anything about this in the
archives or in articles I found on the web.
Sjef

<html>
<head>
<title>Tabbed navigation GRRR?&%!$!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
#header {
float: left;
width: 100%;
background:#AAFFFF;
font-size: 93%;
border-bottom: 1px solid black;
line-height: normal;
}
#header ul {
margin: 0;
padding: 0;
list-style: none;
}
#header li {
float: left;
margin: 10px;
padding: 2px 25px 0px 12px;
background-color: yellow;
border-left:1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
#header a {
display: block;
text-decoration: none;
font-weight: bold;
}
#header li.current {
background-color: white;
border-left:1px solid black;
border-top: 1px solid black;
border-bottom: 0px solid white;
border-right: 1px solid black;
}
</style>
</head>
<body>
<h1>Tabbed navigation?</h1>
<div id="header">
<ul>
<li><a href="#">item 1</a></li>
<li class='current'><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</div>
</body></html>
Jan 12 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On 2007-01-12, Sjef <ma*************@planet.nlwrote:
Hello,
I have read the listapart articles about tabbed navigation, sliding doors
etc. But the thing is: I want a very simple, almost minimalistic tabbed
navigation bar, completely shaped by css, and if necessary possibly
generated from a database table.
I managed to get as far as shown in the code below.
The only thing I can not erase is this bottom border in the 'current' tab.
This should be gone so the tab seems to be part of the current page.
Is there a simple way to do this?
You can make #header li.current contain

border-bottom: 11px solid white;
margin-bottom: 0;

With this the white goes all the way to the bottom of the cyan bit, but
you can still see the black lower border of #header below the current
tab. There are various options to get rid of that. You could make it a
top border of another box below #header instead, or you could cheat a
bit and also add

position: relative;
top: 1px;

to #header li.current, which moves that whole tab down by 1px covering
the border.
Jan 13 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.