0

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/

Improve this question
2
  • 1
    There are several ways to accomplish this. You can try: jsfiddle.net/V9PQ7/6 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. Commented May 27, 2014 at 19:03

2 Answers 2

Reset to default
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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

On my Firefox, the JSFiddles you posted all still have the bottom border on the active tabs.
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.
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).

Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.