Tab Content Script

[iwdynamic]

1) Script Title: Tab Content Script

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

3) Describe problem: Not a problem just wanted to know if it's possible to display the tabs on the side (right is prefer) instead of at the top.

[ddadmin]

Do you mean align the tabs to the right of the content? By default it's aligned left. If so, just change the line inside the css file:

text-align: left; /*set to left, center, or right to align the menu as desired*/

[iwdynamic]

Do you mean align the tabs to the right of the content? By default it's aligned left. If so, just change the line inside the css file:

text-align: left; /*set to left, center, or right to align the menu as desired*/

No I want to have the tabs on the side instead of at the top

view sample here: http://www.leavethatthingalone.com/e...tabs/index.cfm

[ddadmin]

There's nothing binding the HTML for the tabs themselves to the tab contents, so you're free to move the former's block of HTML to whereever you wish it to appear on your page:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

"To the right" can mean a lot of things and can be done in many ways. For example, you could create a 2 column table and place this code in the right cell, or if you're handy with CSS, create a two column DIV via CSS. It really depends on how you wish to do this, but there's nothing inside the script stopping you from moving the HTML for the tabs around.

[iwdynamic]

I am not very good at CSS. I tried to add float: left and display: block. The tabs are now on the left but are bunched up overlapping each other.

Here is a sample of what I'm trying to achive:
http://www.leavethatthingalone.com/e...tabs/index.cfm

Thanks

[iwdynamic]

Can someone take a look of my sample and help me with putting the tabs on the left?

Thank you!

[ddadmin]

To get you started, here's the code to create a 2 column layout using CSS:

<div id="leftcolumn" style="width: 200px; background-color: lightyellow; float: left">
<p style="height: 500px">Some content</p>
</div>

<div id="maincolumn" style="width: 600px; float: left; padding-left: 10px">
<p style="height: 500px">Some content</p>
</div>

<br style="clear: left" />

I would gather you'd want to put the tab content divs in the left column, and the tabs themselves in the main column.

[iwdynamic]

I am still trying to get this to work. I have manage to create the tabs on the left.
I have 2 problems that I hope someone can help me with:

1. FF does not display the tabs with same width (120) but it works in IE

2. How do get the border of the tab content to open for the selected tab.
I have this property: border-right-color: white;
I think I need to have the tab to overlap the content area to cover the border when a tab is selected but I don't know how to do it

I have included my css and html page

Please Help

[iwdynamic]

Please someone take a look at my sample and show me where I did wrong. It must be something very simple

[jscheuer1]

#leftcolumn {
padding-top:0!important;
padding-top:1ex;
float:left;
}

.shadetabs{
	float:left;
	cursor:pointer;
	font-size:11px;
	font-family:verdana;
	font-weight:normal;
	text-align:right;
}

.shadetabs li{
	display:block;
	cursor:pointer;
	width:120px;
	height:24px;
	position:relative;
	left:1px;
	}

.shadetabs li a{
	width:120px;
border: 1px solid #778;
text-decoration: none;
padding: 3px 7px;
margin-bottom: 5px;
color: #2d2b2b;
background: white url("/images/shade_blue.gif") top left repeat-x;
text-align:left;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
left: 2px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url("/images/shadeactive_blue.gif");
border-right-color: white;
text-decoration: none;
color: #F67a18;
}

.shadetabs li.selected a:visited{
color: #F67a18;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontentstyle{ /*style of tab content oontainer*/
	float:left;
border: 1px solid gray;
width: 400px;
height: 400px;
overflow: auto;
*/
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
height:auto!important;
width:auto!important;
overflow:visible!important;
display:block!important;
}
}