Home/ Questions/Q 929637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T20:12:16+00:00

I’m coding a tab system for my website that must be entirely CSS/HTML/JS (without

  • 0

I’m coding a tab system for my website that must be entirely CSS/HTML/JS (without using any images). Problem is, I keep hacking the code until when I’m finished its just a mess. I don’t know whether to use positioning, or float the tabs or what. Basically one of the big problems is that after I take away the bottom-border CSS of the selected tab, I need to move it down 1px so it seamlessly blends with the sorting headers – I don’t know whether to use margin: -1px or position: relative/absolute etc. I’d love some advice on a good way to code a tab system like this, so that it can be reused across the website!

alt text

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s an example with CSS that makes it work:

    HTML:

    <body>
    <div class="tabs">
        <ul>
            <li><a href="#item1">Item 1</a></li>
            <li class="active"><a href="#item2">Item 2</a></li>
            <li><a href="#item3">Item 3</a></li>
        </ul>
        <div class="tabInner">
            <div id="item1">
                bla1
            </div>
            <div id="item2">
                bla2
            </div>
            <div id="item3">
                bla3
            </div>
        </div>
    </div>
</body>

    CSS:

    .tabs ul {
    list-style: none;
}

.tabs ul li {
    float: left;
    background: #eee;
    border: 1px #aaa solid;
    border-bottom: none;
    margin-right: 10px;
    padding: 5px;
}

.tabs ul li.active {
    margin-bottom: -1px;
    padding-bottom: 6px;
}

.tabInner {
    clear: both;
    border: 1px solid #aaa;
    height: 200px;
    overflow: hidden;
    background: #eee;
}

.tabInner div {
    height: 200px;
    padding: 10px;

}

    It even works without JS (to some degree). You’ll still need some JS to move the ‘active’ class arround and also if you want fancy transitions.

    See it in action here: http://jsfiddle.net/V8CK4/

    • 0