css only tabs

by Christopher Pearson

HTML

<div id="nav-tab-frame">
    <ul id="boxLinks" class="group">
        <li><a href="#box1">Tab 19</a></li>
        <li><a href="#box2">Tab 20</a></li>
        <li><a href="#box3">Tab 21</a></li>
    </ul>
    <div id="box">
        <div id="box1" class="box">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
            </ul>
        </div>
        <div id="box2" class="box">
            <p>Another box! </p>
        </div>
        <div id="box3" class="box">
            <p>Woot! </p>
        </div>
    </div>
</div>

CSS

#nav-tab-frame { 
    position: relative; 
    width: 100%; 
}

#boxLinks {
    list-style: none; 
    overflow: hidden; 
}


#boxLinks li {
    display: inline; 
}

#boxLinks li a {
    padding: 5px 10px; 
    color: #333; 
    text-decoration: none; 
    border: 1px solid #333; 
    float:left;
    display: block; 
    margin-left: -1px
    position: relative; 
    left: 1px; 
}
        
#boxLinks li a:hover {
    color: #333; 
    background: #ccc; 
}

#boxLinks li a:active {
    color: #333; 
    background: #ccc; 
}

#boxLinks li a:focus {
    color: #333; 
    background: #ccc; 
}

#box {
    height: 250px; 
    border: 1px solid #333; 
    overflow: hidden; 
    padding: 0px 10px; 
    position: relative; 
    top: -1px; 
}

.box { 
    display: none; 
    height: 250px; 
    overflow: auto; 
    display: block; 
    position: relative; 
    overflow-x: hidden; 
}

#box1:target, #box2:target, #box3:target { 
    display: block; 
}