[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 529
  • Last Modified:

jquery tabs css

I am trying to create a nice css for the nested tabs , but do not know where to begin.

here is my html
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
</ul>
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div id="ui-tabs-vertical_3" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-vertical ui-helper-clearfix">
<ul class="myMenu ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>
</div>
</div>

<style>
.ui-tabs.ui-tabs-vertical {
    padding: 0;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
    border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
    float: left;
    /*
width: 10em;
*/
    background: #CCC;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid gray;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    margin: 0.2em 0;
    border: 1px solid gray;
    border-width: 1px 0 1px 1px;
    border-radius: 4px 0 0 4px;
    overflow: hidden;
    position: relative;
    right: -2px;
    z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
    width: 100%;
    padding: 3px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
    cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
    padding-bottom: 0;
    border-right: 1px solid white;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
    margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
    float: left;
    /*
width: 28em;
*/
    border-left: 1px solid gray;
    border-radius: 0;
   /*
 position: relative;
    left: -1px;
*/
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
      background-image: none;
      background-color:green;
    }
</style>
0
erikTsomik
Asked:
erikTsomik
  • 4
1 Solution
 
SurranoSystem EngineerCommented:
Can you post a sketch of what you'd like to achieve?
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
Well I do not have a sketch. But what I trying to accomplish is being able to control outer tabs separately from the inner tab . different colors width. Also if you have noticed the inner tabs are vertical .

Is that possible to shift inner tab somewhat outside so it looks like there are tabs horizontally and vertically sticking out   from 1 box
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
Something like this for the horizontal tabs

http://www.jqueryrain.com/?Vd69wMvK

and the following link for the vertical

http://www.jqueryrain.com/?EoxzWsPG
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
Here is the mock-up screen of what I am trying to a ccomplish
Presentation1.pptx
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now