CODEWITHSUNDEEP
htmlcsstabs
Kevin
Kevin

Reputation: 1240

CSS HTML: Creating A Page With Horizontal Tabs

I am trying to write a web page that displays horizontal tabs across the top. I have copied the CSS and HTML from several different examples but I always end up with a vertical unordered list of options. I don't have any other CSS concerning unordered lists that would conflict with what I am experimenting with. Here is the CSS:

#ts_tabmenu {
    font-size: .75em;
    padding: 20px 0px 0px 20px;
}
#ts_tabmenu ul
{
    line-height: 1em;
    margin: 0px;
    list-style-type: none;
    float: left;
    padding: 0px 0px 0px 5px;
}
#ts_tabmenu ul li
{
    float: left;
}
#ts_tabmenu ul li a
{
    text-decoration: none;
    display: block;
    float: left;
    padding: 0px 0px 0px 10px;
    background: url(tabs.gif) no-repeat left top;
    margin-left: -5px;
    z-index: 0;
    position: relative;
    color: #666666;
}
#ts_tabmenu ul li a strong
{
    font-weight: normal; /* remove the bold effect */
    display: block;
    background: url(tabs.gif) no-repeat right top;
    padding: 6px 10px 7px 5px;
    cursor: pointer;
}
#ts_tabmenu ul li a:hover
{
    position: relative;
    z-index: 5;
    background: url(tabs.gif) no-repeat left bottom;
    color: #000000;
}
#ts_tabmenu ul li a:hover strong
{
    background-image: url(tabs.gif) no-repeat;
    position: relative;
    z-index: 5;
    background-position: right bottom;
}

And here is the HTML:

<div id="ts_tabmenu">
    <ul>
        <li><a href=#Dashboard><strong>Tutorialsphere</strong></a></li>
        <li><a href=#><strong>Photoshop</strong></a></li>
        <li><a href=#><strong>Illustrator</strong></a></li>
        <li><a href=#><strong>Fireworks</strong></a></li>
        <li><a href=#><strong>Flash</strong></a></li>
        <li><a href=#><strong>CSS</strong></a></li>
        <li><a href=#><strong>PHP</strong></a></li>
    </ul>
</div>

Any advice is greatly appreciated.

Regards.

Upvotes: 3

Views: 15578

Answers (3)

raddrick
raddrick

Reputation: 4453

#ts_tabmenu ul li
{
  display:inline-block;
  float: left;
}

that should do it for you.. the problem with float left is that, if its a block, it takes up the width of the space that it is in.

inline-block will make it only as wide as its contents, you might want to add some paddings/margins according to your style.

Upvotes: 2

Amaerth
Amaerth

Reputation: 178

Seems to be working for me in http://jsfiddle.net/7GUVU/

Tab links along the top.

Upvotes: 0

Concordus Applications
Concordus Applications

Reputation: 987

Works perfect for me: http://jsfiddle.net/EPSr6/

I added display: inline-block to #ts_tabmenu ul li and still worked fine.

Upvotes: 0

Related Questions