How to overlap a border in CSS in order to create tabs?


Tags: css,css3

Problem :

I'm trying to create the following tabs:

enter image description here

And have a problem figuring out how to make the active tab overlap the order on the list. Here is the HTML:

<ul>
 <li class="active">LATEST</li>
 <li>VOTES</li>
<ul>


Solution :

Without div:

Demo: http://jsfiddle.net/GCu2D/790/

CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background-color:#f0f0f0
}
ul {
    margin:0px;
    padding:0;
    position:relative;
}
ul:before {
    left: 0;
    right: 0;
    bottom: 0px;
    height: 0;
    border-bottom: 1px solid #777;
    content:"";
    top: auto;
    display: block;
    position: absolute;
}
ul:after {
    clear:both;
    display:block;
    content:""
}
ul li {
    display:block;
    float:left;
    padding:5px 10px;
    border:1px solid #777;
    margin-right:-1px;
    position:relative;
}
ul li.active {
    border-bottom:1px solid #f0f0f0
}

HTML:

<ul>
    <li class="active">LATEST</li>
    <li>VOTES</li>
</ul>

With extra div

You can try this way: http://jsfiddle.net/GCu2D/787/

CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background-color:#f0f0f0
}
ul {
    margin:0px;
    padding:0;
}
ul:after {
    clear:both;
    display:block;
    content:""
}
ul li {
    display:block;
    float:left;
    padding:5px 10px;
    border:1px solid #777;
    margin-right:-1px;
    position:relative;
}
div {
    border:1px solid #777;
    margin-top:-1px;
}
ul li.active {
    border-bottom:1px solid #f0f0f0
}

HTML:

<ul>
    <li class="active">LATEST</li>
    <li>VOTES</li>
</ul>
<div>Content</div>

    CSS Howto..

    How to reveal part of blurred image where mouse is hovered?

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

    How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?

    How to fade-in and fade-out background-image with CSS transition?

    HOW TO check if an external (cross-domain) CSS file is loaded using Javascript

    How can I add an external stylesheet to a UIWebView in Xcode?

    How do I override the default way Wordpress' determines the .current-menu-item class?

    How to dynamically import javascript and css files

    How to incorporate CSS into a table

    How to assign C# variable to CSS class variable in ASP.NET MVC ActionLink

    How to emulate table cells with CSS (without float)?

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    How to load content in a “virtual window” like “LightBox”

    How to Clear Every Third Box in a Row? [duplicate]

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    How to apply css to top level element only

    How to access this element with CSS

    How to make text flow from left right bootstrap

    How to make a layout scale with CSS?

    How to switch between custom css layout and bootstrap css layout

    css/jquery - how to hide last row of floated elements if not even

    How to fix a footer overlay on main in HTML

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    Horizontal
      navigation - how to vertical align contents of

    How to css 3rd li in hierarchy?

    How to change the CSS on the last clicked div

    CSS and JQuery: how to remove “right:0” style

    How do I switch my CSS stylesheet using jQuery?

    How can I target an id=“last_name[]_field” with css

    Dropdown not showing on small screens