Welcome to Your Site Name!
We appreciate your visit to us. Please take the time to browse through and register if you're interested in us.
We hope you enjoy your stay,
Your Site Name Management and Moderation Team.
A lot of people have wanted to know how to make each tab or one of the tabs have a fixed height so that the content will scroll and prevent the table's height from increasing and decreasing between tabs. To do this, you just have to put a division element like the one below in each of your tabs with the same height.
<div style="width: 100%; height: 130px; overflow: auto;">
All of the tab's content goes here.
</div>
Note that in this generator on the list tabs you can only insert the code around each item's content and not the entire cell. If you want the div placed around the entire cell, you'll have to do that by hand which is not difficult. Once you have generated your code, just search for the tab's content and place the opening and closing divs shown above around everything, but be sure to put it within the tab's main division element like below.
<div id="pro_tabID">
<div style="width: 100%; height: 130px; overflow: auto;">
All of the tab's content goes here.
</div>
</div>
When you insert this table into your forum, you will notice that all of the table except for the tabs will take your forum's default colors. I kept the tabs from inheriting from other classes to keep things simple and to not have any confusion. What you need to modify is the CSS shown below which will be generated for you.
.tabbg {
background-color: #dadada;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}
.tabbgselected {
background-color: #efefef;
border-bottom: 1px solid #efefef;
border-right: 1px solid #000000;
}
These two classes determine how a tab will behave when it is and isn't selected. The second class which has the word "selected" in it is the class for when the tab is selected. I like to have this class' background color and bottom border color the same as the windowbg class' background color (Admin > Skins / Forum Colors > Modify Skin > Window Background 1) so that the tab appears to be "connected" with the content below.
If you have more than one skin with different colors, you can use Javascript to print the correct skin colors with this method.
<script type="text/javascript">
<!--
if(pb_skinid == 1){
document.write(
"<style type='text/css'>" +
".tabbg {" +
"background-color: #dadada;" +
"border-bottom: 1px solid #000000;" +
"border-right: 1px solid #000000;" +
"}" +
".tabbgselected {" +
"background-color: #efefef;" +
"border-bottom: 1px solid #efefef;" +
"border-right: 1px solid #000000;" +
"}" +
"</style>"
);
} else if(pb_skinid == 2){
document.write(
"<style type='text/css'>" +
".tabbg {" +
"background-color: #dadada;" +
"border-bottom: 1px solid #000000;" +
"border-right: 1px solid #000000;" +
"}" +
".tabbgselected {" +
"background-color: #efefef;" +
"border-bottom: 1px solid #efefef;" +
"border-right: 1px solid #000000;" +
"}" +
"</style>"
);
}
//-->
</script>
Admin ::
Jordan
Click on a staff name above to read about them.
Name: Admin
Forum Rank: Administrator
Hi, I'm the staff member who founded this forum.
Another paragraph here.
Name: Jordan
Forum Rank: Moderator
Hi, I'm a moderator on this forum.
Another paragraph here.
|
New Posts
