Results 1 to 6 of 6

Thread: Multi line tab content?

  1. #1
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multi line tab content?

    1) Script Title: Tab Content Script v2

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    If you have a code so far can we see it?
    If not put in a <br />
    Last edited by Nile; 01-25-2008 at 09:12 PM. Reason: <br>

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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?

  4. #4
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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; ">';

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    For Shade Tabs, 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:

    Code:
    <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.

  6. #6
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •