Log in

View Full Version : Multi line tab content?



ajmast
01-25-2008, 09:04 PM
1) Script Title: Tab Content Script v2

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

3) Describe problem:
I am seeking a way to wrap the tabs to a second row. My tabs are dynamically generated and when they reach the width set in style sheets, I would like to have them wrap to a second row. Any thoughts or suggestions appreciated.

Put another way rather then 8 tabs going across horz. I would like 2 rows of 4 tabs each.

Nile
01-25-2008, 09:12 PM
If you have a code so far can we see it?
If not put in a <br />

ddadmin
01-25-2008, 09:21 PM
It depends on the tabs you're using in terms of its CSS. Adding a <br /> tag alone probably won't do it, you'll need to tweak other areas of the CSS to make it look presentable. Which tabs from the demos are you using?

ajmast
01-25-2008, 09:38 PM
I am using the default tabs.

I thought maybe I could do a wrap, but it did not work out.

Relevant set of the code in the doc is:

echo '<ul id="cattabs" class="shadetabs">';
foreach ($results as $category => $ranks) {
echo '<li><a href="#" rel="'.$category .'">'. $category .'</a></li>';
}
echo '<li><a href="#" rel="finalize">Finalize</a></li>';
echo '</ul>';
echo '<div style="border:0px solid gray; width:575px; margin-bottom: 1em; padding: 3px; ">';

ddadmin
01-25-2008, 10:09 PM
For Shade Tabs (http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/), the easiest way to have multiple rows of tabs with respect to Tab Content Script is actually just to embed multiple menus (UL tags). Move the ID attribute from the UL tag to a DIV instead that wraps around all the tabs. So for example:


<div id="cattabs">

<ul class="shadetabs">
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
</ul>

<ul class="shadetabs" style="margin-top: 5px">
<li><a href="#" rel="dog4" class="selected">Tab 4</a></li>
<li><a href="#" rel="dog5">Tab 5</a></li>
<li><a href="#">Tab 6</a></li>
</ul>

</div>

The beauty of Tab Content script is that it scans the links generically for special meaning within a container with the specified ID, whether that container contains.

ajmast
01-25-2008, 10:38 PM
Excellent, that should work.

I'll just need figure out how to divide up my Dynamic results evenly in the two lists.

Thank you very much.