Improve company productivity with a Business Account.Sign Up

x
?
Solved

jquery  tabs css

Posted on 2014-01-02
5
Medium Priority
?
529 Views
Last Modified: 2014-02-05
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
Comment
Question by:erikTsomik
  • 4
5 Comments
 
LVL 8

Accepted Solution

by:
Surrano earned 1500 total points
ID: 39753442
Can you post a sketch of what you'd like to achieve?
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39753649
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 39753665
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 39756717
Here is the mock-up screen of what I am trying to a ccomplish
Presentation1.pptx
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39790691
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

595 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question