PDA

View Full Version : Tab Content Script - same length on each tab?



bluemoon562
10-16-2006, 05:01 PM
1) Script Title: Tab Content Script

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

3) Describe problem: Love this script! Okay, now I just need to figure out how to make each tab the same length. Some have shorter text and content than others but I want to make them even in length.

Okay, I figured out the solution. I was able to make the tabs all even lengths by changing the following:

.tabcontentstyle{
border: 1px solid gray;
width: 630px;
height: 410px;
margin-bottom: 1em;
padding: 10px;
left: 0px;
}

I added height: 410px to the tabcontentstyle. You can increase or decrease the height as you see fit.

It works in Firefox and IE6.

jscheuer1
10-16-2006, 06:13 PM
Working from the default style, see this post:

http://www.dynamicdrive.com/forums/showpost.php?p=46640&postcount=12

bluemoon562
10-17-2006, 01:32 AM
Hi John,

That changed the tabs but didn't affect the length of the boxes the way that I wanted.

There must be an easy way that works.

jscheuer1
10-17-2006, 07:45 AM
It standardizes the width of the tabs. What were you looking for?

lorrens
10-17-2006, 09:22 AM
You're editing the tabcontent box...
You should edit the .shadetabs :)

jscheuer1
10-18-2006, 09:05 AM
You're editing the tabcontent box...
You should edit the .shadetabs :)

That's what the post at:

http://www.dynamicdrive.com/forums/showpost.php?p=46640&postcount=12

that I mentioned before does, more or less:


.shadetabs li a{
float:left;
width:160px;
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

and:


.contentstyle{
clear:left;
border: 1px solid gray;
width: 450px;
margin-bottom: 1em; padding: 10px;
}

But, I think I left out:


.shadetabs li a{
display:block;
float:left;
width:160px;
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

The width for .shadetabs li a may be adjusted to suit. Width will not apply in all browsers to an anchor unless it is display:block but then there is a line break after each tab hence, float left and then later this must be cleared in the .contentstyle element. Editing the .shadetabs directly didn't work when I tried it.

vanbao
03-19-2008, 05:14 AM
I would like to minimize the space between tabs. Where do I change that. I am assuming it is in the css file but I change the paddings but nothing happens.

rangana
03-19-2008, 05:20 AM
You should'nt hijack someone's thread :)
I suppose its the right margin


.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

vanbao
03-24-2008, 04:13 PM
You should'nt hijack someone's thread

What do you mean? This is in relating to the same topic. Don't you want it to be in the same thread?

Thanks for the help though.

jscheuer1
03-25-2008, 05:13 AM
It means that if you have a new question, even if it seems to relate to an existing thread, if it isn't the exact same issue, the current policy is to encourage you to start a new thread in which you define the script you are working with and the exact issue you are having with it. Providing a link to your page is always a good idea as well.