CODEWITHSUNDEEP
htmlcsstabs
Josh Kelley
Josh Kelley

Reputation: 58412

HTML + CSS tab bar

How do I cleanly style a HTML + CSS horizontal tab bar so that the tab bar has a line across the bottom that's hidden or suppressed for the active tab?

In other words, I'm trying to do the same thing that StackOverflow does for its tags: enter image description here

My tab bar is set up as an ordered list with

ul
{
  list-style: none;
}
li
{
  float: left;
}

Update: I've already poked around sites with Firebug to see how they do it, but I feel like I quickly get bogged down in details. For example, StackOverflow's version has a border for the bottom of the whole div (which makes sense), and a white border for the bottom of the active tab (which makes sense), but then it makes the active tab's border overlap the div's border (and I'm not very clear on how it does that). It looks like Twitter Bootstrap does something similar. I'm trying to understand the general concept of how overlapping part of a container's border with the content's border works instead of copying and tinkering with CSS until I get something that appears to work.

Upvotes: 0

Views: 8319

Answers (4)

Ondra Lohniský
Ondra Lohniský

Reputation: 11

I did it like this:

ul {
    list-style-type:none;
}
li{
    float: left;
    border-bottom: 1px solid #CCC;
}
li:hover{
    float: left;
    border: solid 1px #CCC;
    border-bottom:none;
}

Upvotes: 0

skyline3000
skyline3000

Reputation: 7913

All you need to do is put a bottom border on the <ul> (so that it stretches across) and then give the <li>'s a selected class, and make that one have a 1-pixel higher height.

Here is a very simple example: http://jsfiddle.net/V6gzS/

Upvotes: 2

Steeven
Steeven

Reputation: 4210

As I understand it you are capable of making the buttons by yourself, with the horizontal bottom line.

If that is the case, then make sure that this horizontal line is made as a border-bottom: solid 1px #CCC property on each button (the color might be different). At each page you then add the id id="current" to that one button that is the active page. In CSS you write:

#current {
  border: solid 1px #CCC;
  border-bottom: 1px solid white;
}

If you have any problems it might be solved by adding !important like this:

  border-bottom: 1px solid white !important;

Therefore, this is just four extra lines of code in CSS and one extra HTML attribute in each of the files.

If dynamic menu

If you have a menu that is not static on every page, but maybe dynamically generated or placed in an included file, then the above will not be possible. Because then you can't easily add the new id on each seperate page.

In that case you might do some dynamic adding of the attribute. If a server side language is used, e.g. PHP, then you might be able to easily set up an if{...} command that checks the URL or a GET request or alike. Else you might use some javascript to check each button and add the attribute id if the button text equals some header on the page.

I hope you understand. Good luck.

Upvotes: 0

Richlewis
Richlewis

Reputation: 15384

ok to point you in the right direction use firebug or chromes element inspector and just pick out the bits you need, so on this site for example what you are looking for are called tabs and they are styled like so

#tabs a.youarehere {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #ffffff;
color: black;
font-size: 120%;
height: 30px;
line-height: 28px;
margin-top: 3px;
padding: 0px 11px 0px 11px;
 }

this is just a part of it but you can learn a lot by looking at some code

Upvotes: 0

Related Questions