PDA

View Full Version : DD Color Tabs not expanding



asiewe61
05-29-2007, 02:34 PM
Hi All -

http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs/

First time post, I am trying to get this script to work more like the Tabifier (http://www.barelyfitz.com/projects/tabber/) script. I want to break the content down into sections but keep all the content on one page. I have started to do this, but when the content expands, my page doesnt expand and to fit, it just overflows over the other content. How can I solve this problem? Also, can I switch the tabs to on onclick event rather than just hovering? Thanks

My Demo (http://www.baublitz.com/demos/bondaflex/products.htm)

ddadmin
05-29-2007, 03:43 PM
Most likely you have an explicit CSS height attributed defined on the DIV that shows the sub contents. Remove that.

BTW it seems you're using DD Tab Menu. It might make more sense to use Tab Content script instead: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

asiewe61
05-29-2007, 04:51 PM
Thanks, It is working properly in FF now.

asiewe61
05-29-2007, 08:11 PM
How can I have the same functionality of a tab content script, with keeping the same tab styles? Is there a simple fix for this?

ddadmin
05-30-2007, 03:34 PM
If you mean use DD color tabs as the menu interface for the Tabs Content script, that's certainly possible, assuming you're somewhat familar with CSS. The default tabs (blue look) consist of:


<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>

While the HTML for DD color tabs look like:


<div id="ddcolortabs">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>
</ul>
</div>

Simply replace the first with the 2nd code, taking into account the use of the "rel" attributes etc in the first.