PDA

View Full Version : Tab Content Script



iwdynamic
08-15-2006, 10:32 PM
1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/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
08-15-2006, 10:47 PM
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
08-15-2006, 10:50 PM
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/examples/csssubmitsidetabs/index.cfm

ddadmin
08-15-2006, 10:59 PM
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
08-16-2006, 06:21 AM
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
08-16-2006, 08:25 PM
Can someone take a look of my sample and help me with putting the tabs on the left?

Thank you!

ddadmin
08-17-2006, 03:58 AM
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
08-22-2006, 12:24 AM
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
08-22-2006, 07:46 AM
Please someone take a look at my sample and show me where I did wrong. It must be something very simple

jscheuer1
08-22-2006, 09:12 AM
#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;
}
}

iwdynamic
08-22-2006, 03:09 PM
Thank you scheuer1 for you help. Do you know what I can do to fix the tab width problem in firefox? What can be done to make it to display all tabs with same width (120px)?

Thank you!

jscheuer1
08-23-2006, 03:57 AM
#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:auto!important;
width:120px;
height:24px;
position:relative;
left:1px;
}

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

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

iwdynamic
08-23-2006, 05:52 PM
It works. Thank you very much for helping.

Vespa808
08-24-2006, 05:19 AM
This is a nifty little script, I like it a lot. What modifications would I need to make to put the navigation tabs vertically down the left hand side and have one main window where the content for each appears?
Like the current layout only turned 90 degrees counter clockwise.

jscheuer1
08-24-2006, 09:00 AM
The tabs in the modification in this thread are on the left vertically with one main area for display of the content to the right of that. I don't think you really want a window, that would literally mean another browser instance.