CODEWITHSUNDEEP
htmlcsstabs
futlib
futlib

Reputation: 8398

How to make tabs with pure HTML/CSS

I'm trying to do Tabs with pure HTML/CSS, and it works nice in all major browsers. Except IE, both 7 and 8.

If I don't add display: table to the ul, the content is not on a new line in every browser. However, IE doesn't display it in a new line even after I add that. What can I do about that? Is there a better way to make tabs in pure HTML/CSS?

<!DOCTYPE>
<html>
    <head>
        <style type="text/css">
          ul.tabs {
              display: table;
              list-style-type: none;
              margin: 0;
              padding: 0;
          }

          ul.tabs>li {
              float: left;
              padding: 10px;
              background-color: lightgray;
          }

          ul.tabs>li:hover {
              background-color: yellow;
          }

          ul.tabs>li.selected {
              background-color: orange;
          }

          div.content {
              border: 1px solid black;
          }
        </style>
    </head>
    <body>
        <ul class="tabs">
            <li class="selected">One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
        <div class="content">
            This should really appear on a new line.
        </div>
    </body>
</html>

Upvotes: 2

Views: 14070

Answers (4)

Piksel8
Piksel8

Reputation: 1428

I've used this approach which works well. It uses an inline list: http://nontroppo.org/test/tab1.html

UPDATE: Above is outdated. If I were to answer the question now I would suggest using the CSS target pseudo-class method outlined here: http://www.w3.org/Style/Examples/007/target. There are other methods like using (hidden) radio buttons in combo with the checked pseudo-class but using target seems the cleanest.

Upvotes: 0

Daniel K
Daniel K

Reputation: 7093

I always just "float" the li elements: 

ul.tabs{list-style: none;}
ul.tabs li{float:left;}

Upvotes: 0

Alexey Lebedev
Alexey Lebedev

Reputation: 12197

Because of the floated <li> elements your <ul> element is zero height.

Try adding ul { overflow: auto; } and div.content { clear: both; } to your CSS

Upvotes: 1

TimFoolery
TimFoolery

Reputation: 1925

Does this (jsfiddle) work for you?

Changes made:

  1. Removed display: table; from ul.tabs
  2. Removed float:left from ul.tabs li's
  3. Added display:inline-block to ul.tabs li's

Upvotes: 0

Related Questions