Ajax Tabs Content Script, help with tab spacing

[anoop31]

1) Script Title: Ajax Tabs Content Script

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

3) Describe problem: I am using your code as below to show different content under different tabs rather loading external pages. I have very simple question which couldn't solve myself. How can I have tabs with no spacing in between?
This is more common now where first row(TABS) stretch over complete length of second row(the content part) without any spacing.

<ul id="flowertabs" class="shadetabs"> 
<li><a href="#" rel="tcontent1" class="selected">Tab1</a></li>

<li><a href="#" rel="tcontent2">Tab2</a></li>

<li><a href="#" rel="tcontent3">Tab3</a></li>
</ul>

<div style="border: 1px solid gray; padding: 5px; margin-bottom: 1em;"> 
<div id="tcontent1" class="tabcontent"> 
....some content1...
</div>

<div id="tcontent2" class="tabcontent">
....some content2...
</div>

<div id="tcontent3" class="tabcontent">
....some content3...
</div>
</div>

<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs") //enter ID of Tab Container
myflowers.setpersist(true) //toogle persistence of the tabs' state
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script> 

Thanks very much,
Anoop

[ddadmin]

Are you talking about the spacing between the tabs themselves, or the spacing between the tab interface and the content interface? In any event, this sounds like just a CSS issue- please post a link to the page on your site that contains the problematic script so we can check it out.

[anoop31]

Yes, I am talking about the spacing between the tabs themselves. I tried to play with CSS file but doesn't help.

How we can completely eliminate the spacing between tabs? It will be like(sort of) one table with two rows. First row will have TABS. Second row will carry the content to be displayed.

[anoop31]

I think, the static content TAB could even be acheived by this following code. CSS needs to be enhanced to give it brillinat look.

Java Script-

<script>
function openTab(tab)
{
var OTab = document.getElementById(tab);
if(OTab)
{
for(i=1;i<=10;i++)
{
var CTab = document.getElementById('tab-text-'+i);
if(CTab) CTab.style.display='none';
}

OTab.style.display='block';
}
}
</script>


HTML BODY-

<ol id="toc">
        <div class="current" onclick="openTab('tab-text-1')"> <a href="#Page_1">Page 1</a> </div>
        <div onclick="openTab('tab-text-2')"> <a href="#Page_1">Page 2</a> </div>
        <div onclick="openTab('tab-text-3')"> <a href="#Page_1">Page 3</a> </div>
</ol>

<div class="content" id="tab-text-1"> Tab-Text1<br>Tab-Text1<br>Tab-Text1<br> </div>
<div class="content" style="display:none" id="tab-text-2"> Tab-Text2<br>Tab-Text2<br>Tab-Text2<br></div>
<div class="content" style="display:none" id="tab-text-3"> Tab-Text3<br>Tab-Text3<br>Tab-Text3<br></div>

CSS Code-

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#toc div {
    float: left;
    margin: 0;
}

ol#toc a {
    background: #bdf;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}

ol#toc a:hover {
    background-color: #3af;
    background-position: 0 -120px;
}

ol#toc a:hover span {
    background-position: 100% -120px;
}

ol#toc div.current a {
    background-color: #48f;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
}

ol#toc div.current span {
    background-position: 100% -60px;
}

ol#toc span {
    background: url(tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}

div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

[ddadmin]

if you're talking about the tabs interface used in Demo #2 of the script, which is extracted for this CSS menu, you can remove the spacing between the tabs by finding the below line in the CSS:

margin: 0 1px 0 0; /*Margin between each menu item*/

and changing the "1px" to 0.

[anoop31]

Thanks for your effort. I am talking about first #1, shadetab css as below. There is no such setting present for that.

/* ######### CSS for Shade Tabs. Remove if not using ######### */

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.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(shadeactive.gif) top left repeat-x;
}

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

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

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

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

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

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}