-----------------------------------

jeffgreco13

Tue Feb 17, 2009 7:46 am


jQuery Tabs CSS

-----------------------------------

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 (

	$(function() {
		$("#tabs").tabs();
	});
	


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:


			
				Industrial Waste Haulage
				Waste Transfer Site/Station
				Emergency Response
				Asbestos Removal & Lead Abatement
				Liquid Waste Containers
			
			enviro1
			enviro2
			enviro3
			enviro4
			enviro5
			
		

And here is the Tabs CSS:

.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*/;
}