jQuery Tabs CSS

jeffgreco13 · **Posted:** Tue Feb 17, 2009 7:46 am

Im looking for some ideas because I'm kind of struggling to get my desired result for a page.
Im using jQuery's UI to create a tabs interface (Seen Here). The code is very very simple:

code:

The problem is that these tabs are strictly made to be above the container, stacked horizontally. I am trying to rearrange the tabs to have a layout like this:
-----------------------------
Tab | |
Tab | Content |
Tab | |
-----------------------------

Using the themeroller plugin i created a theme for all of the widgets.
Here's the code that is on my site:

code:

<p><div id="servtabs">
<ul id="sortable">
<li class="ui-state-default"><a href="#enviro-1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Industrial Waste Haulage</a></li>
<li class="ui-state-default"><a href="#enviro-2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Waste Transfer Site/Station</a></li>
<li class="ui-state-default"><a href="#enviro-3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Emergency Response</a></li>
<li class="ui-state-default"><a href="#enviro-4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Asbestos Removal & Lead Abatement</a></li>
<li class="ui-state-default"><a href="#enviro-5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Liquid Waste Containers</a></li>
</ul>
<div id="enviro-1">enviro1</div>
<div id="enviro-2">enviro2</div>
<div id="enviro-3">enviro3</div>
<div id="enviro-4">enviro4</div>
<div id="enviro-5">enviro5</div>
</div>
</p>

And here is the Tabs CSS:

code:

.ui-tabs-nav {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
font-size: 1.1em;
float: left;
position: relative;
z-index: 1;
border-right: 1px solid #cccccc;
bottom: -1px;
}
.ui-tabs-nav ul {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
}
.ui-tabs-nav li {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
float: left;
border: 1px solid #cccccc;
border-right: none;
}
.ui-tabs-nav li a {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
float: left;
font-size: 1em;
font-weight: normal;
text-decoration: none;
padding: .5em 1.7em;
color: #444444;
background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
}
.ui-tabs-nav li a:hover {
background: #f0f0f0 url(images/f0f0f0_40x100_textures_02_glass_100.png) 0 50% repeat-x;
color: #0b5b98;
}
.ui-tabs-nav li.ui-tabs-selected {
border-bottom-color: #99c2ff;
}
.ui-tabs-nav li.ui-tabs-selected a, .ui-tabs-nav li.ui-tabs-selected a:hover {
background: #99c2ff url(images/99c2ff_40x100_textures_02_glass_50.png) 0 50% repeat-x;
color: #000000;
}
.ui-tabs-panel {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
clear:left;
border: 1px solid #cccccc;
background: #f9f9f9 url(images/f9f9f9_40x100_textures_04_highlight_hard_100.png) 0 0 repeat-x;
color: #362b36;
padding: 1.5em 1.7em;
font-size: 1.1em;
}
.ui-tabs-hide {
display: none;/* for accessible hiding: position: absolute; left: -99999999px*/;
}

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members