making tabs with CSS

Question

I have tabs that look like this:

 -------
 |  A  |   B    C 
 |     |  
------------------------

But I want them to look like this:

 -------
 |  A  |   B    C
 |     |    
--     ------------

That is, with the bottom border of the tab gone. To create these tabs, I'm drawing a border around the tab, setting the bottom border to none, and then drawing a border around the next div. The HTML is basically like this:

<ul>
    <li class="current">Foo</li>
    <li>Bar</li>         
</ul>

<div class="otherStuff">
    Some other stuff here. 
</div>

and the CSS is basically like this:

ul { padding: 10px; 
margin: 0; } 
li { 
    display: inline; 
    padding: 10px; 
} 

li.current { 
    border: 1px solid #bbb; 
    border-bottom: none; 
} 

.otherStuff { 
    border-top: 1px solid #bbb; 
    border-bottom: 1px solid #bbb;
    margin: 0;
    padding: 15px; 
}

Is there a better way to draw these tabs?

Here's a jsfiddle of what I've been playing with so far: http://jsfiddle.net/V9PQ7/

There are several ways to accomplish this. You can try: jsfiddle.net/V9PQ7/6 — agrm
– agrm, Commented May 22, 2014 at 14:58
@AndersG, I don't really see a difference in your example. It seems like the problem (effectively a bottom border on the active tab) still persists. — Jonathan
– Jonathan, Commented May 27, 2014 at 19:03

agrm · Accepted Answer · 2014-05-27 19:53:59Z

2

There are several ways to accomplish this, and some may work better than others depending on the surrounding content and your current layout model. Here are three ways you could try:

1) Position the `<li>` elements over the horizontal line

By setting li { position: relative } you can move the list elements around. This allows us to move them 1 pixel downwards, so their bottom border or bottom edge cover the horizontal line. Then you can make the active tab cover the line using either border-bottom, or by setting a background-color.

Example 1 - JSFiddle

li {
    position: relative;
    bottom: -1px;
    display: inline;
    padding: 10px;
}
li.current {
    border: 1px solid #bbb;
    border-bottom: 1px solid #fff;
}

2) Hide the bottom line with a pseudo element

Another way would be to generate a pseudo element (::before or ::after) to hide the horizontal line under the active tab.

Example 2 - JSFiddle

li.current {
    position: relative;
    border: 1px solid #bbb;
    border-bottom: 0;
}
li.current::after {
    content: "";
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: -2px;
    width: 100%;
    border-bottom: 1px solid #fff;
}

3) Create the horizontal line using a pseudo element

Instead of setting a border on the ul element, we can set the border on a pseudo element. We can then move the pseudo element, and thus the whole line, upwards behind the list elements. Note: I've set z-index:-1 in the example below. This may interfer with your layout model. If so, increase the value, but make sure you assign a greater z-index to the list items so they will display in front of the pseudo element with the horizontal line)

Example 3 - JSFiddle

ul {
    position: relative;
    padding: 10px;
    margin: 0;
}
ul::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 1px;
    width: 100%;
    border-bottom: 1px solid #bbb;
}

answered May 27, 2014 at 19:53

agrm

3,8924 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonathan Over a year ago

On my Firefox, the JSFiddles you posted all still have the bottom border on the active tabs.

agrm Over a year ago

In example 1 and 2 you can try increasing the width of the border-bottom. Example 3 seems to work in all browsers I've tested. You can try adjusting the bottom value to move the line up a pixel or two.

sabhiram · Accepted Answer · 2014-05-22 15:05:09Z

0

There are a million ways to do this, but one simple way that comes to mind is to make all the page buttons which are not active to have a border-bottom and the active one sets its border-bottom to a transparent value (or the color of the page).

answered May 22, 2014 at 15:05

sabhiram

9077 silver badges10 bronze badges

1 Comment

Jonathan Over a year ago

I thought about this, but the tabs themselves don't take up enough horizontal space, so the border has to come from the next element down, so I can't just give all the tabs borders instead of the active one.

Collectives™ on Stack Overflow

making tabs with CSS

2 Answers 2

1) Position the `<li>` elements over the horizontal line

2) Hide the bottom line with a pseudo element

3) Create the horizontal line using a pseudo element

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1) Position the <li> elements over the horizontal line

2) Hide the bottom line with a pseudo element

3) Create the horizontal line using a pseudo element

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

1) Position the `<li>` elements over the horizontal line