Need help with CSS-only tabbed navigation

HTML & CSS
1

I have a tabbed navigation on my page. It works, but I can’t get the bottom border on the selected/active tab to go away. I want a border to separate the nav section from the content section, but I don’t want a bottom border on the selected/active tab.

Any tips or suggestions would be greatly appreciated!

Thanks!

Code:


<div id="topNavArea">
	<div id="tabs"> 
		<ul>
		    <li id="libraryTab" class="unselected"><a href="#1">The Library</a></li>
                    <li id="myStuffTab" class="selected"><a href = "#2">My Stuff</a></li>
               </ul>
    </div>
</div>
<div id="mainContent">
	...
</div>

#topNavArea {
background-color: #e1e1e1;
border-bottom: 1px solid #CCC;
overflow: hidden;
}
#tabs ul{
list-style: none;
}

#tabs li {
border-bottom: 0;
}

#tabs .selected {
background-color: white;
padding-top: 6px;
border-top: 1px solid #D2E1EB;
border-left: 1px solid #D2E1EB;
border-right: 1px solid #D2E1EB;
border-bottom: 0;
}

#mainContent {
background-color: #fff;
}
2

Hi,

There doesn’t seem to be any bottom borders in the code you posted above for the list iems.


#tabs li {
    [B]border-bottom: 0;[/B]
}

#tabs .selected {
    background-color: white;
    padding-top: 6px;
    border-top: 1px solid #D2E1EB;
    border-left: 1px solid #D2E1EB;
    border-right: 1px solid #D2E1EB;
  [B]  border-bottom: 0;
}[/B]

Which makes it a little hard to make it go away when it doesn’t seem to be present or have I got the wrong end of the stick.

If you are removing the border with the .unselected class then make sure it follows the original .selected rule and has equal or more weight to it.

Do you have a link to the actual page as it might be easier to debug :slight_smile:

3

the DIV, #topNavArea, which contains the tabs, has a bottom border. I put it there to separate the navigation area from the content area.

I tried using border-bottom: 0; to get rid of it in the selected tab, but the border is still there.

Thanks

4

Hi,

I may have misunderstood what you just said so excuse me if this sounds silly but the only way to remove the border on #TopNavArea is to remove the border from that element.

You can’t change the border on that element via another different element which seems to be what you just said. The selected tab has nothing to do with #topNavArea.

To remove the border form #topNavArea you could add a class and over-ride it on that element.


<div id="topNavArea" class="noborder">




.noborder{border-bottom:none!important}

However, I think I misunderstood what you were telling me - I must be having an off day :slight_smile:

5

Oh ok, but I’ve seen other sites that use a bottom border to separate the navigation section from the content section, yet they somehow get rid of the bottom border on the active tab.

Like this : http://t1.gstatic.com/images?q=tbn:ANd9GcQ9AzcL6mZtlY3IPyENdVgGdtsab7BSJOYT7YVGTwJp3j4uSzaSgg

6

Ah ok I see what you want now :slight_smile:

What you would need to do is rub the line out using the bottom border of the active tab.

Usually you would have the tabs sitting on the border so that the border bottom of the tab and the border-top of the div are in the same place. You can do this by shifting all the tabs down 1px with relative positioning.

On hover you just change the background colour of the active tab and the border-bottom color to match the background of the div below and thus rub out the border. The tabs on top should have a higher z-index than the element below so that it stays on top.

Or you can add 1px padding-bottom on hover and remove the bottom border at the same time as in this example.

You haven’t provided enough code for me to apply it to your code properly.

7

Thanks for the example site!