Tab Content script Question

[Sventovit]

1) Script Title: Tab Content Script

2) Script URL: http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem: hi Dudes.
I was wondering if it's possible to have several li background images in order to have a different state for the one selected as shown in this pic :


That script is awesome. Thanks for having shared it.

Any relevant answer will be much appreciated.

Thanks alot.

This was a message from Sven who wish you a nice day.

[ddadmin]

Do you mean different background images for the tabs themselves? Right now the selected tab already has a different background image from the default:

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

What do you mean that you need multiple background images?

[Sventovit]

Hello Mr Admin
thanks for your answer

Yes I wish to have different background images for the selected.
As on the pic there are 4 different bg images for each li I wish to have for the selected one (the red one here) another bg image.
Do you think it would be possible? And how?

Greetz from Paris,
Sven

[ddadmin]

Hmmm there's no easy way to do this with the current HTML for the tabs. In CSS you can only have one background image per element. In the case of the tabs, each one is made up of just two elements, namely, a LI and A element:

<li><a href="#" rel="tcontent3">Tab 3</a></li>

Unless you're proficient with HTML and CSS and can redesign the entire tabs interface so each tab uses for elements, you're probably better off letting things be.

[Sventovit]

Hello and thanks again Mr Admin
I think I found a trick which might be usefull for those who'll be interested.

1/ I've placed a div with an image of the tabs like this :

<div id="navigation_tabs"><img src="img/nav_tabs.jpg" alt="" width="15" height="198" class="noborder"></div>

2/ in the CSS I just cover the selected li with an image (white rectangle over #2]:


This is the CSS :

#navigation_tabs {
	left: -15px;
	position: absolute;
	margin-top: 58px;
}
.navigation {
	left: -20px;
	position: absolute;
	margin-top: 8px;
	width: 200px;
	padding: 0px 0px 0px 20px;
	list-style: none;
}
.navigation li {
margin-bottom: 1px ;
	}
.navigation li a {
	display: block;
	color: #fff;
	font: 2em "Trebuchet MS", Arial, sans-serif;
	line-height: 2em;
	text-align: left;
	text-decoration: none;
	padding: 4px 0;
	margin-left: 12px;
	}
.navigation li.selected{
	position: relative;
	margin-bottom: 1px;
}
.navigation li.selected a{ /*selected main tab style */
	background: url(../img/nav_select.png) repeat-y;
	margin-bottom: 1px;
}
.navigation li.selected a:hover, #navigation li.selected a:focus, #navigation li.selected a:active {
text-decoration: underline ;
	}

As you can see there's still an issue: the rectangle is not covering the (fake) blue tab.
When I try to give a negative BG position to the "nav_select.png" it disappears.