Wednesday, February 10, 2010

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

2 comments:

  1. It draws OK in IE, but clicking on the tabs doesn't change the selected tab. It doesn't draw correctly or function at all in Chrome or Firefox.

    ReplyDelete
  2. Check out our latest on-line betting offers beneath and bag yourself a prime bonus. If you’re based mostly outdoors the UK, you’ll have entry to different bookies and offers. We’ve received you lined outcome of|as a result of} we analysis the top on-line gambling websites round the} world. Because on-line betting covers each sport out there, we help you consideration to} identifying value bets and earning money. "Twitter's been known as the world's largest sports bar. You wish to share within the pleasure thecasinosource.com with fellow fans," Dupree said. "Well, have the ability to|you probably can} almost think about that Twitter is becoming the world's largest sportsbook, not in terms of|when it comes to|by means of} taking bets, however the place people come to talk in regards to the action and follow their bets."

    ReplyDelete