Simple HTML Tabs

Ever wondered how those tabs are created in html? You can create tabs very easily using html list elements

Here is a screenshot of simple html tabs

All you really need here is to create a unordered list (UL) with class attribute set to "nav" and the list element (LI) with class attribute set to "selected" for the tab you need selected.

<style>
    ul.nav { border-bottom:1px solid gray; }

    ul.nav li {
        display:inline;
        position:relative;
        padding:5px 5px 5px 5px;
        top:-5px;
        border:1px solid gray;
        background-color:lightgray;
        margin-left:5px;
    }
    ul.nav li.selected {
        background-color:white;
        border-bottom:none;
        top:-4px;
    }
</style>
<ul class="nav">
    <li class="selected">Tab 12<li>
    <li>Tab 2<li>
    <li>Tab 3<li>
    <li>Tab 4<li>
</ul>

The above html was generated using vim - for those who are interested, vim can generate html with syntax highlighting with a simple command


:runtime! syntax/2html.vim