tabview - tabs on bottom

Subscribe to our RSS feed

Follow us on twitter

Watch this site via email

Wiki Tabview with tabs on bottom - now allows for variable heights of content

Tab 1

Nulla At Nulla

Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue.

Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo.

This is tab 2

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.

Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum.

Ooh, tab 3

Tab 3

Has not much content at all.

View the CSS

+ show the CSS

/* Tabview */
/***************/
.yui-navset.yui-navset-top {
    margin: 10px 0 0px 0px;
    position: static;
}
 
.yui-navset-top ul.yui-nav {
    width: 585px;
    height: auto;
    border: none;
    bottom: 0;
    left: 0;
    position: absolute;
    text-align: center;
}
.yui-navset-top ul.yui-nav li {
    border: none;
}
.yui-navset-top ul.yui-nav li a {
    height: 30px;
    width: auto;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
}
.yui-navset-top ul.yui-nav li a:hover {
    background: #3198dd;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#3198dd));
    background-image: -moz-linear-gradient(top,#fff,#3198dd);
}
.yui-navset-top ul.yui-nav li.selected a {
    background: #3198dd;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3FBBFF), to(#3198dd));
    background-image: -moz-linear-gradient(top,#3fbbff,#3198dd);
    margin-bottom: 1px;
}
.yui-navset-top ul.yui-nav li em {
    border: none !important;
}
.yui-navset-top .yui-content {
    width: 565px;
    height: auto;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 3px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 3px 2px rgba(0,0,0,0.2);
    background-color: #56585c;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#56585c), to(#2c2d2f));
    background-image: -moz-linear-gradient(top,#56585c,#2c2d2f);
    margin: 0px 0px 5px 0px;
    color: #d1d3d3;
    padding: 5px 5px 5px 10px;
    line-height: 1.3;
}
.yui-navset-top .yui-content a, .yui-content h3 {
    color: #35b0ff;
}
.yui-navset-top .yui-content h5 {
    margin-top: 10px;    
}
.tab-container {
    display: block;
    height: auto;    
    padding-bottom: 40px;
    margin: 0 auto;
    width: 580px;
    position: relative;
}

What's Important?

A containing div for the tabview, with position set to relative, and bottom padding to allow for the tabs. The nav container ul.yui.nav is set to position: absolute, and bottom: 0. .yui-navset-top needs to be reset with position: static. All heights are set to auto.

Discussion

Add a new comment