CODEWITHSUNDEEP
css
Jonathan
Jonathan

Reputation: 11331

making tabs with CSS

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/

Upvotes: 0

Views: 278

Answers (2)

agrm
agrm

Reputation: 3852

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;
}

Upvotes: 2

sabhiram
sabhiram

Reputation: 907

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).

Upvotes: 0

Related Questions