Dividing Spry Tabbed Panels content area into columns?

Hi there.
I am building a website and I want to divide the content area of a Spry Tabbed Panel into 3 columns for text.
How can I do this?
I thought about making divs inside the Panel but it would be too messy.
Please let me know if there is a simple way to do this.
Thanks in advance.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<style>
* {box-sizing: border-box;}
body {width: 960px; margin: auto;}
.TabbedPanelsContentVisible {overflow: auto;}
.col33 {width: 33.3333%; float: left; padding: 15px;}
</style>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
        <div class="col33">
          <h3>Column 1</h3>
        <p>Content 1</p>
        <p>Dicta sunt explicabo. Nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, aut odit aut fugit, ut aut reiciendis voluptatibus maiores alias. Iste natus error sit voluptatem dicta sunt explicabo. Sed quia consequuntur magni dolores eos itaque earum rerum hic tenetur a sapiente delectus, cum soluta nobis est eligendi optio. Omnis voluptas assumenda est, nemo enim ipsam voluptatem neque porro quisquam est.</p>
        <p>Eaque ipsa quae ab illo inventore veritatis totam rem aperiam, qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, aut odit aut fugit, ut enim ad minima veniam. Id est laborum et dolorum fuga. Atque corrupti quos dolores et quas molestias qui ratione voluptatem sequi nesciunt. Temporibus autem quibusdam saepe eveniet ut et voluptates repudiandae sint sed quia non numquam eius modi.</p>
      </div>
        <div class="col33">
          <h3>Column 2</h3>
        <p>Content 1</p>
        <p>It is the star to every wand'ring bark, which alters when it alteration finds, love alters not with his brief hours and weeks. Or bends with the remover to remove. That looks on tempests and is never shaken; admit impediments; love is not love let me not to the marriage of true minds.</p>
      </div>
        <div class="col33">
          <h3>Column 3</h3>
        <p>Content 1</p>
        <p>The three cs - customers, competition and change - have created a new world for business while those at the coal face don't have sufficient view of the overall goals. In order to build a shared view of what can be improved, building a dynamic relationship between the main players. Highly motivated participants contributing to a valued-added outcome.</p>
        <p>Whether the organization's core competences are fully in line, given market realities the components and priorities for the change program an important ingredient of business process reengineering. Taking full cognizance of organizational learning parameters and principles, organizations capable of double-loop learning, working through a top-down, bottom-up approach. In order to build a shared view of what can be improved, maximization of shareholder wealth through separation of ownership from management measure the process, not the people. Presentation of the process flow should culminate in idea generation, taking full cognizance of organizational learning parameters and principles, the components and priorities for the change program. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption from binary cause and effect to complex patterns, working through a top-down, bottom-up approach.</p>
      </div>
    </div>
    <div class="TabbedPanelsContent">Content 2</div>
  </div>
</div>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Similar Messages

  • Anchor tag inside Spry Tabbed Panel Content

    I have successful been able to use code I found listed on
    here to open a specific tab in a Spry Tabbed Panel form a link. Now
    I am wondering if anyone has found out how to add an anchor tag
    code this so that is goes to a specific location inside that Tabbed
    Panel Content?

    I was looking for an answer on how to open a tab from another tab and found it!
    In return I'll give you a hint on how to open a tab from another tab using an anchor
    for example,
    if you were working on a file named "projects.php"
    create an anchor in tab 2
    <a name="anchor1" id="anchor1"></a>come next to me
    in tab 1 create the link to the anchor in tab 2
    <a href="projects.php#anchor1" onclick="TabbedPanels1.showPanel(1); return false;">open tab 2 and go to its anchor 1</a>
    In your case you are overlooking the file name and jumping directly to the anchor name.....am I right??
    cheers from Lima, Perú

  • Placing an image in a tabbed panel content area, it shows up on all three panels

    This is crazy.  It should be so simple. But sometimes this happens to me. Like today.
    I have many pages that use a simple tabbed panel feature with three tabs.
    Each content area has a text frame and an image frame.
    Sometimes when I try to place an image into the content area of the first tab, the image shows up on all three content areas.  I have tried and tried placing the image, making very sure I am in the "content area" on not just on the page.  But nevertheless, the image seems to be "stuck" on the page, in front of the accordian feature, and therefore showing on all three tabs.
    How am I not targeting the placement of those images correctly? There just aren't that many options for me to screw up, it's a simple tabbed panel, that's all!
    Help please.
    Barbara

    Are you using the latest version of Muse/Air?
    The borders of the Content Area of a tab gets highlighted as soon as you drag over an element over it so it is very unlikely that something like this could happen. However, I believe it could be due to messed up Layers configuration as the only way I could reproduce this problem is through moving the image into a layer above a layer that contains the Tabbed panel or in case of just one layer, you might have the image at the very top.
    Thanks,
    Vinayak

  • Spry Tabbed Panel Content editable region not functioning

    I have a web page I created in dreamweaver CS5 with a tabbed panel.  When my client opens the page to edit in contibute, the content and tabs do not function properly.  Basically, the tabs do not function and the content for all of the tabbed regions is listed down the page on the first tab window. The page works fine when I open in Contibute on my computer, but only if it is through the Contibute Program.  If I try to edit through firefox, I get the same issue as my client. 
    http://menwieldingfire.com.previewdns.com/bbq/bbq-menu.html
    also, I get a space between the header image and the horizontal menu that goes white.  I end up having to re-upload the page from dreamweaver. Why would the follow code get added to the page when a draft is created in Contribute, when this page is based on a template with editable regions?
    < p style="margin-top: 0; margin-bottom: 0;">&nbsp;</p >
    Any ideas?

    Check http://blogs.adobe.com/contribute/2010/06/paragraph_spacing_options_in_a.html  and also http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html it should be helpful to resolve the issue.

  • Spry Tabbed Panels content open verticaly on web site opening?

    Hello,
    As long as the client does'nt authorised javascript my opening web site page does'nt make sense, we see all the content of the tabs openned vertically.
    Is there a way to have an acceptable opening page , maybe without the the tabs working for the one who dont accept javascript?
    Thank You in advance

    picotine7 wrote:
    Hi,
    Thank's for the hint.
    Unfortunatly when I use the noscript tag at the beginning and at he end of my div, I loose my tabs completely.
    Yes and so it should when one uses a JS-enabled browser; but if one turns JS off then you will see the tabs.
    A bit of imagination is required to juggle between what you want the different browsers to see. Anything within the NOSCRIPT tags will only be seen by non-JS-browsers.
    If you want to remove a particular piece of code from JS-enabled-browsers you could use
    <div id="dynamiccontent">
      <script type="text/javascript">
        // If JS is enabled, we want to prevent the table from flashing
        // when the page is first loaded.
        Spry.$("dynamiccontent").style.display = "none";
      </script>
      <!-- your markup goes here -->
    </div>
    I hope this helps.
    Ben

  • Spry Tabbed panels content loading

    Hello,
    I have created a tabbed interface, it looks good, however the
    content in some tabs it is a little heavy on some internet
    connections.
    Is there a way to load the content of each tab separately?
    What i wanted to do is for each tab content to load only if
    the user clicks on the tab, this way the start page will load much
    faster. With the current settings all the content on all tabs loads
    at the same time. Did not find anything on sprytabbedpanels.css
    that could do this.
    Can anyone help me?
    Thanks in advance.
    Joao.

    On Thu, 13 Sep 2007 00:57:12 +0000 (UTC), "manzas"
    <[email protected]> wrote:
    >Hello,
    > I have created a tabbed interface, it looks good,
    however the content in some
    >tabs it is a little heavy on some internet connections.
    > Is there a way to load the content of each tab
    separately?
    > What i wanted to do is for each tab content to load only
    if the user clicks
    >on the tab, this way the start page will load much
    faster. With the current
    >settings all the content on all tabs loads at the same
    time. Did not find
    >anything on sprytabbedpanels.css that could do this.
    > Can anyone help me?
    > Thanks in advance.
    > Joao.
    >
    >
    May we see it?

  • Spry tabbed panels, all content showing on one page, please help?

    Hi there,
    I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
    I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
    Here is the code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DND Perspective</title>
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-color: #2B3856;
    .style1 {
    color: #FFFFFF;
    .style4 {
    color: #FFFFFF;
    font-size: 36px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin-left: 250px;
    .style5 {color: #CCCCCC}
    .style11 {
    font-size: 18pt;
    font-style: italic;
    a:link {
    color: #FFFF00;
    a:visited {
    color: #000000;
    a:hover {
    color: #000033;
    -->
    </style></head>
    <body>
    <div align="center">
      <p align="left" class="style4">DND  </p>
    </div>
    <p align="left">
    <img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" />  </p>
    <p align="center">
    <p align="center">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup" >
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
        <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent style1">
          <div align="center">
            <p class="style11">Welcome to DND </p>
            <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
            <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
            <p>Please visit our services page to discover all photography sessions we have available such as:</p>
            <p>Wedding Photography</p>
            <p> Engament Photos</p>
            <p>Senior Portraits </p>
            <p>Anniversary</p>
            <p>&amp; More!!!</p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
        </div>
        <div class="TabbedPanelsContent">Under Construction...</div>
        <div class="TabbedPanelsContent">Under Construction....</div>
        <div class="TabbedPanelsContent style1">
    <p>We hear at DND  understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &amp;
    packages, custom videos, thank you cards and albums.</p>
               <hr width="50%" align="left" />
          <p><strong>Package 1 - $500.00</strong></p>
          <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 2 - $575.00</strong></p>
          <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 3 - $700.00</strong></p>
          <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
               <hr width="50%" align="left" />
          <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
          <p>Individual prices: 8&quot;x10&quot; = $12.99; 10&quot;x13&quot; = $19.99; 2 - 5&quot;x7&quot; = $12.99; 4 - 4&quot;x6&quot; = $11.99</p>
          <p>(Custom sizes available - Custom framing available)</p>
          <p><strong>Package 1:</strong></p>
          <p>3 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $50.00</p>
          <p><strong>Package 2:</strong></p>
          <p>5 - 8&quot;x10&quot;; 6 - 5&quot;x7&quot;; 6 - 4&quot;x6&quot; = $90.00</p>
          <p><strong>Package 3:</strong></p>
          <p>8 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $125.00</p>
          <p><strong>Package 4:</strong> (Basic Prints)</p>
          <p>Any 100 photos printed 4&quot;x6&quot; = $100.00</p>
               <hr width="50%" align="left" />
          <p><strong>Custom video:</strong>**</p>
          <p>Any 100 photos put to royalty-free music = $50.00</p>
              <hr width="50%" align="left" />
          <p><strong>Custom thank you cards for your guests:</strong>**</p>
          <p>300 cards - 4&quot;x6&quot; = $350.00</p>
          <p>100 cards - 4&quot;x6&quot; = $150.00</p>
         <hr width="50%" align="left" />
          <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
          <p>Bride &amp; Groom Albums</p>
          <p>Parent Albums</p>
               <hr width="50%" align="left" />
          <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
        </div>
        <div class="TabbedPanelsContent style5">
          <p> Contact DND Perspective:</p>
          <p>The best way to reach us is via email .</p>
          <p>You can alternately reach us anytime at ...!</p>
        </div>
        <div class="TabbedPanelsContent">
          <div align="center">
            <p><span class="style1">About Info</span></p>
            <p> </p>
          </div>
        </div>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
      </script>
    </body>
    </html>

    You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
    Correct these links:
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    And you should be good to go.
    Beth
    ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
    B

  • How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?

    I have 5 of them all containing nested Apdiv within nested ApDivs (a long storie ) that I would like to insert into 5 tabs in the Spry Tabbed Panel.
    Please help.

    "Hi Gramp,I realize I have made hard work for myself but I really don't know any better. I also realize now that taking on this project may have been a mistake :-)I taught myself how to use the design side of Dream Weaver. These five ApDivs were created in the content area of the spry tool and it worked fine. (yes a lot of work though)For the first time I looked at the code side. I wanted to try to bring a peace of code from another page for something unrelated and when it didn't work I took it out and without noticing, deleting a line from the Spry tool.Of course like a classic newbe I was working without a backup copy so here I am. Loosing hours of tedious work and on the verve of tears :-)I do have some  questions though.  My APDiv
      What does "apDiv1" stands for and what does "My APDiv" stands for?Is the only thing I have to do is changing this line for my five ApDivs and paste it in the appropriate places in the code? Thanks again,Gilaad
    Date: Sat, 16 Jun 2012 20:39:07 -0600
    From: [email protected]
    To: [email protected]
    Subject: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel? 
        Re: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel? 
        created by Altruistic Gramps in Spry Framework for Ajax - View the full discussion 
    You have really made hard work for yourself by using APDiv's. I suppose it can be done, but I would not. To answer your question, I have create an example as per#apDiv1
    My APDiv
    Content 2
    Tab 1
    Gramps 
         Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4498679#4498679
         To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4498679#4498679. In the Actions box on the right, click the Stop Email Notifications link.
         Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
      For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

  • Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like

    Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
    This started all of a sudden.
    The entire website is a series of spry tabbed panels.
    http://pacificlaser.com/const.html
    if you click on General construction tab things work ok...
    if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
    ive been looking for the answer for 4 months with no success.
    Hope a fellow dreamwever-person can help
    Thanks Rick

    You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
    Correct these links:
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    And you should be good to go.
    Beth
    ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
    B

  • Spry Tabbed Panels: Title Tabs shift left, Content Tabs stay positioned correctly, right.

    I inserted a clean Spry Tabbed Panel into a virtually empty HTML page (no content). I have a content div (624 px , float left) and sidebar (336 px, float right). When I insert the tabbed panel widget into the sidebar, the Spry Title Tabs go or float to te left, while the content portion of the Spry Tabbed panel stays correctly positioned within the sidebar on the right. I looked at the Spry CSS notes, and mentions something of by default they float the tabs left to allow for future divs without problems?? This problem only shows in Design View (leading me to think I've done something wrong). When viewed in Live View or Browser it looks fine, perfect! I have tried several float and clear combinations, none ave helped. I also deleted the Spry Tabbed CSS as to reset to default. Any Help or Advice would be greatly appreciated. Thank you

    Design View is not an accurate representation. Don't rely on it.  Use Live View and Preview in Browsers.
    Incidentally, the Spry framework is gone from DW now.  Most people have moved away from Spry to  jQuery or commercial widgets.
    JQuery UI Tabbed Panels
    http://jqueryui.com/tabs/
    jQuery Easy Tabs
    http://os.alfajango.com/easytabs/
    Nancy O.

  • Spry tabbed panels java script error screwing up whole page when I reopen document in dreamweaver

    I need help!
    I am creating a site in dreamweaver and I am using spry tabbed panels for my content on every page.  I've created 4 pages.  When I go to reopen the pages after quitting dreamweaver 2 open and work just fine.  However, for the other two I receive a window that says,
    this document contains javascript code for a widget that no longer exists.  If you don't remove the code, the browser may display javascript errors when loading the page.  Would you like dreamweaver to find all instances of this code for you. 
    I've selected both yes and no options and either way my entire page becomes all jumbled.  I've tried deleting the script in code view and it doesn't help? 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>LEAP 2 GROW</title>
    <style type="text/css">
    <!--
    body  {
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-color: #090909;
    background-image: url(k2-mountain-1280x800-1.jpg);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    .twoColFixLtHdr #container {
    width: 1200px;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
    .twoColFixLtHdr #header {
    padding: 0;
    margin-top: 10px;
    border-bottom-width: medium;
    border-bottom-style: solid;
    border-bottom-color: #8CC543;
    .twoColFixLtHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 0;
    background-color: #25A8E0;
    margin-top: 40px;
    height: 400px;
    .twoColFixLtHdr #mainContent {
    margin-right: 0;
    margin-bottom: 0px;
    margin-left: 248px;
    border: 1px solid #8CC543;
    margin-top: 40px;
    text-align: center;
    background-position: center center;
    color: #8CC543;
    font-family: "Century Gothic";
    font-size: medium;
    text-transform: none;
    height: 400px;
    background-image: url(k2-faded.jpg);
    .twoColFixLtHdr #footer {
    padding: 0;
    text-align: left;
    font-family: "Century Gothic";
    text-transform: uppercase;
    color: #25A8E0;
    letter-spacing: 5px;
    font-size: small;
    word-spacing: normal;
    display: block;
    margin-left: 0px;
    margin-top: 10px;
    .twoColFixLtHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    -->
    </style>
    <!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    a:link {
    color: #25A8E0;
    text-decoration: none;
    a:hover {
    color: #8CC543;
    text-decoration: none;
    -->
    </style>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function MM_effectAppearFade(targetElement, duration, from, to, toggle)
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    //-->
    </script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style2 {font-size: xx-small; color: #EEEEEE; }
    a:visited {
    text-decoration: none;
    color: #25A8E0;
    a:active {
    text-decoration: none;
    .style3 {
    color: #FFFFFF;
    font-weight: bold;
    .style4 {color: #FFFFFF}
    -->
    </style>
    <style type="text/css">
    <!--
    .style5 {font-size: x-large}
    h1 {
    font-size: medium;
    color: #25A8E0;
    .style6 {color: #444444}
    .style8 {color: #444444; font-weight: bold; }
    -->
    </style>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
    <div id="container">
      <div id="header">
        <h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
        <!-- end #header --></h1>
        <ul id="MenuBar2" class="MenuBarHorizontal">
          <li><a href="volunteer.html">VOLUNTEER</a> </li>
          <li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
          <li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
        </ul>
      </div>
      <div id="sidebar1">
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
            <ul>
              <li><a href="mission.html">mission/overview</a></li>
              <li><a href="ourteam.html">OUR team</a></li>
            </ul>
          </li>
          <li><a href="problem.html">THE PROBLEM</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
            <ul>
              <li><a href="solution.overview.html">overview</a></li>
              <li><a href="solution.structure.html">structure</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
            <ul>
              <li><a href="parentcollege.html">parent college</a></li>
              <li><a href="mentor.html">MENTOR program</a></li>
              <li><a href="farming.html">urban farming</a></li>
              <li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
            <ul>
              <li><a href="location.fulton.html">fulton county ga</a></li>
              <li><a href="location.haiti.html">haiti</a></li>
              <li><a href="location.tribe.html">native american tribe</a></li>
            </ul>
          </li>
          <li><a href="news.html">NEWS|RESOURCES</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
          <li><a href="#">DONATE</a></li>
        </ul>
      </div>
      <div class="style3" id="mainContent">
        <div align="left" class="style4">
          <p class="style5">MENTOR PROGRAM</p>
          <div id="TabbedPanels2" class="TabbedPanels">
            <ul class="TabbedPanelsTabGroup">
              <li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
              <li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
              <li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
              <li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
              <li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
              <li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
            </ul>
            <div class="TabbedPanelsContentGroup">
              <div class="TabbedPanelsContent">
                <blockquote>
                  <p><em>“Those who have the ability, have the responsibility”</em></p>
                  <p><u>Avenue of attention:</u> <strong>                        MENTOR PROGRAM</strong> <br />
                    Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models.  </p>
                  <p>Two levels of involvement: </p>
                  <ol>
                    <li>High School Academic Mentors</li>
                    <li>Community-Leader Mentors</li>
                  </ol>
                  <p><u>Program title:</u>                          <strong>Talent 2 Kids</strong> </p>
                  <p><u>Why Program Important</u><strong>:</strong>  </p>
                  <ol>
                  <ul>
                    <li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
                    <li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
                    <li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress.  Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
                  </ul>
                </blockquote>
              </div>
              <div class="TabbedPanelsContent">Content 2</div>
              <div class="TabbedPanelsContent">Content 3</div>
              <div class="TabbedPanelsContent">Content 4</div>
              <div class="TabbedPanelsContent">Content 5</div>
              <div class="TabbedPanelsContent">Content 6</div>
            </div>
          </div>
          <p> </p>
        </div>
        <p> </p>
        <p> </p>
      </div>
    <div id="footer">
      <table width="1200" border="0">
          <tr>
            <td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
            <td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
            <td><div align="center"><a href="farming.html">urban farming</a></div></td>
            <td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
          </tr>
        </table>
        <p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
        <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels2");
    //-->
    </script>
    </body>
    </html>

  • I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?

    I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
    If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
    By the way new to all this so be gentle please
    <div id="main_column">
         <div class="section_w500">
            <h2>North Bali Listings</h2>
            <div id="TabbedPanels1" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
                <li class="TabbedPanelsTab" tabindex="0">Land</li>   <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
                <li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
                <li class="TabbedPanelsTab" tabindex="0">Commercial</li>
    </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially  in and around the Badung and Denpasar areas, has driven investors northward, in our opinion   at this time it is an ideal opportunity to  acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
                  <p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area,  principally along the coastline ,  with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling,  water sports, fishing, sailing. trekking  gives this area the potential to be world-class tourist destination. Research has shown that  property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
                    <br />
                    The Northern part of Bali  is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
                  Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
                  <table width="100%">
                    <tr>
                      <td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property  in this area; be it for investment, development or private use.</div></td>
                    </tr>
                  </table>
                  <p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
                    <br />
                    <img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other  areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve;  are also beginning to attract investors, resulting in  prices  rising.<br />
                    The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with &quot;Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
                    <br />
                    <img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of  established ex pat communities, and better facilities  also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
                  <p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
                </div>
                <div class="TabbedPanelsContent">
                  <p> </p>
                  <table width="100%" border="0">
                    <tr>
                      <td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
                        <span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
                      <td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng  Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
                    </tr>
                    <tr>
                      <td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded &quot;Tourism Status&quot;  ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
                        <p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone &amp; Internet close to hand and readilly available</p></td>
                      <td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
                    </tr>
                    <tr>
                      <td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
                        Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
                          Min Rental Period 25 Years, extendable to to a max of 75 years
                          (with full &quot;Right Of Use&quot; issued by owner)</span></td>
                      <td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
                        <br />
                        <span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
                    </tr>
                  </table>
                  <p><br />
                  </p>
                  <hr width="100%" noshade="noshade" />
                  <p> </p>
                </div>
    <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
                <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
    </div>
            </div>
            <p> </p>
          <p>
            <h7 style="color: #C03"></h7>
          </p>
    <h2></h2><!-- this stays empty to put dotted line under listings block -->
         </div>
         <div class="cleaner"></div>
        </div> <!-- end of main column -->

    Could you share a link to the page?
    Seeing it in context and in our browsers is much easier to debug.
    If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms.

  • Spry Tabbed Panels - Contribute Error Message

    I created a Web site using  Dreamweaver CS4 that uses a Spry Tabbed Panels.  It works fine, but so  far it fails when it is pulled into Contribute CS5.  I've read the posts  about allowing Spry Widget editing in Contribute, so I've turned on  that capability.
    When I try to launch the Spry Widget Properties from within Contribute, I get this error:
    "This  tabbed panel is missing its content.  Contact your administrator to add  the missing content panel, or delete this panel and insert a new one."
    I've tried creating new generic pages with new Spry tabbed panels, but they always fail with this message.
    Here is a sample page:
    http://www.dougriderconsulting.com/zmcpa/incentives.html
    Any ideas?  Thanks!

    The page http://www.dougriderconsulting.com/zmcpa/incentives.html mentioned here has no issues.
    If there are any missing  codes DW also shows the error as <missing content panel>  or <missing tab> when the Tabbed Panel widget is selected.
    In Contribute the same pops up as a message.
    The issue in page http://www.dougriderconsulting.com/zmcpa/education_in_muskingum_county.html posted in Contribute Blogs is re-solved http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html#more-33.

  • Spry Tabbed Panels - replace text tab with an image, how to?

    Hi all, I'm stumped. I've uploaded 2 files to:
    http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
    http://docs.google.com/leaf?id=0B4zgjxAaUD97YTQ1MDliNzEtZGVhZS00MmYzLTllZWMtMzJiODQwMjRlMT Bl&hl=en&authkey=CILrxq0G
    I'm working in Dreamweaver CS3, 4 tab "Spry Tabbed Panel" with 3 columns (one column is a form and submit btn). The 1st photo is a mockup of what I'm trying to accomplish. In the 2nd photo, Nokia designed a page for its Nokia Developer Summit 2010 (been pulled down since). This is the desired effect. I'm trying to replace the typical text tabs in the tabbed panel with images, or, at the very least, change the color between states ON and OFF (images the same except for bg color - green verses gray), which is probably the better way to go, given page load time.
    I need the CSS and HTML code. I'd settle for just the image problem, but if someone can give me guidance on the content boxes too, that would be AWESOME!
    REALLY hoping anyone can help (Ben, I'm an Aussie too) - been on this for a month now.
    Very grateful Adobe staffs such a great resource tool as this site with a lot of really good, courteous brainiacs.
    Thanks,
    Louis cat

    G'day Ben,
    Upgraded to Dreamweaver CS5, added Tabbed Panels 2 widget to page.
    Here's a mockup of what I'm trying to do: http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
    Questions:
    1. Want to change Spry TP tabs to images (see link, above), then make them vertical tabs, with morph effect - How?
    2. How do I change the default TabbedPanels2 instance name? (not easy to rename)
    3. The first section of the code was planted in my index page - shouldn't this be pasted into a CSS file, or just leave it alone?
    ================================================
    FIRST SECTION OF THE CODE: -------------------------------------------------------------------------------
    <style type="text/css">
    /* BeginOAWidget_Instance_2138522: #TabbedPanels2 */
    /* TabbedPanelsTabGroup */
    #TabbedPanels2 .TabbedPanelsTabGroup {
    top: 1px;
    left: 0px;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border-left: solid 0px inherit;
    border-bottom: solid 0px inherit;
    border-top: solid 0px inherit;
    border-right: solid 0px inherit;
    padding: 0px 0px 0px 0px;
    /* TabbedPanelsTab */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTab,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTab {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #DDD;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTab a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTab a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsTabHover */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsTabSelected */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #EEE;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsTabFocused */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #EEE;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsContentGroup */
    #TabbedPanels2 .TabbedPanelsContentGroup {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 0px 0px 0px 0px;
    /* TabbedPanelsContentVisible */
    #TabbedPanels2 .TabbedPanelsContentVisible {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border-left: solid 0px #CCC;
    border-bottom: solid 0px #CCC;
    border-top: solid 0px #999;
    border-right: solid 0px #999;
    padding: 4px 12px 4px 12px;
    #TabbedPanels2.BTabbedPanels .TabbedPanelsTab {
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    #TabbedPanels2.BTabbedPanels .TabbedPanelsTabSelected {
    border-top: solid 1px #999;
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabGroup {
    width: 10em;
    height: 20em;
    top: 1px;
    left: 0px;
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #EEE;
    /* EndOAWidget_Instance_2138522 */
    </style>
    ========================================================
    SECOND SECTION OF THE CODE: ----------------------------------------------------------------------------------------
      <div id="TabbedPanels2">
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id.  </p>
        <h2>Tab 2</h2>
        <p>Nulla facilisi. Vestibulum ipsum elit, tincidunt sed tristique sit amet, faucibus in orci. Nunc sit amet elit lorem. Sed eget arcu ipsum, pharetra ullamcorper lectus. Sed ac diam ac tortor mattis mollis. Etiam mattis felis vel augue tempus in rhoncus ligula elementum. Vestibulum ut iaculis risus. Aliquam erat sem, feugiat vel laoreet in, lobortis non mauris. Vestibulum neque nibh, vehicula eleifend tincidunt sed, bibendum id dolor. </p>
        <h2>Tab 3</h2>
        <p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. </p>
      </div>
      <script type="text/javascript">
    // BeginOAWidget_Instance_2138522: #TabbedPanels2
      var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
       injectionType: "replace",
       widgetID: "TabbedPanels2",
       autoPlay: true,
       defaultTab: 0,
       enableKeyboardNavigation: true,
       hideHeader: true,
       tabsPosition: "top",
       event:"click",
       stopOnUserAction: true,
       displayInterval: 5000,
       minDuration: 300,
       maxDuration: 500,
       stoppedMinDuration: 100,
       stoppedMaxDuration: 200,
       plugIns:[]
    // EndOAWidget_Instance_2138522
      </script>
    ===================================================
    Any help would be much appreciated, Ben. Cheers from another Aussie. Louis Cat!

  • Spry Tabbed Panel Problem

    Thanks in advance to anyone who can help. I'm having a problem with my spry tabbed panel. It works but the actual CSS isn't working on the spry. The panel goes down onto the content.
    Here is a screen cap: http://img32.imageshack.us/img32/2598/53451133.jpg
    Coding:
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container. For our
    * default style, this container does not contribute anything visually,
    * but it is floated left to make sure that any floating or clearing done
    * with any of its child elements are contained completely within the
    * TabbedPanels container, to minimize any impact or undesireable
    * interaction with other floated elements on the page that may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels widget, set a
    * width on the TabbedPanels container. By default, the TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
        margin: 0px;
        padding: 0px;
        float: left;
        clear: none;
        width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    /* This is the selector for the TabGroup. The TabGroup container houses
    * all of the tab buttons for each tabbed panel in the widget. This container
    * does not contribute anything visually to the look of the widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This container houses
    * the title for the panel. This is also the tab "button" that the user clicks
    * on to activate the corresponding content panel so that it appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1 pixel down from
    * where it wold normally render. This allows each tab to overlap the content
    * panel that renders below it. Each tab is rendered with a 1 pixel bottom
    * border that has a color that matches the top border of the current content
    * panel. This gives the appearance that the tab is being drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this selector is not
    * necessary to make the widget function. You can use any class name you want
    * to style this tab container.
    .TabbedPanelsTab {
        position: relative;
        top: 1px;
        float: left;
        padding: 4px 10px;
        margin: 0px 1px 0px 0px;
        font: bold 0.7em sans-serif;
        background-color: #DDD;
        list-style: none;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #999;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        -moz-user-select: none;
        -khtml-user-select: none;
        cursor: pointer;
    /* This selector is an example of how to change the appearnce of a tab button
    * container as the mouse enters it. The class "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
        background-color: #CCC;
    /* This selector is an example of how to change the appearance of a tab button
    * container after the user has clicked on it to activate a content panel.
    * The class "TabbedPanelsTabSelected" is programatically added and removed
    * from the tab element as the user clicks on the tab button containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are positioned
    * 1 pixel down from where it would normally render. When the tab button is
    * selected, we change its bottom border to match the background color of the
    * content panel so that it looks like the tab is part of the content panel.
    .TabbedPanelsTabSelected {
        background-color: #EEE;
        border-bottom: 1px solid #EEE;
    /* This selector is an example of how to make a link inside of a tab button
    * look like normal text. Users may want to use links inside of a tab button
    * so that when it gets focus, the text *inside* the tab button gets a focus
    * ring around it, instead of the focus ring around the entire tab.
    .TabbedPanelsTab a {
        color: black;
        text-decoration: none;
    /* This is the selector for the ContentGroup. The ContentGroup container houses
    * all of the content panels for each tabbed panel in the widget. For our
    * default style, this container provides the background color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
        clear: both;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #CCC;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        background-color: #EEE;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
        padding: 4px;
    /* This selector is an example of how to change the appearnce of the currently
    * active container panel. The class "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules above so that the
    * TabbedPanels widget renders with its tab buttons along the left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will have to be made
    * to switch a horizontal tabbed panels widget to a vertical tabbed panels
    * widget, is to use the "VTabbedPanels" class on the top-level widget
    * container element, instead of "TabbedPanels".
    /* This selector floats the TabGroup so that the tab buttons it contains
    * render to the left of the active content panel. A border is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
        float: left;
        width: 10em;
        height: 20em;
        background-color: #EEE;
        position: absolute;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #CCC;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTab {
        float: none;
        margin: 0px;
        border-top: none;
        border-left: none;
        border-right: none;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
        background-color: #EEE;
        border-bottom: solid 1px #999;
    /* This selector floats the content panels for the widget so that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
        clear: none;
        float: left;
        padding: 0px;
        width: 30em;
        height: 20em;

    Hi Ben,
    I creat a new page ( a simple page...):
    http://dev.achab.it/test/test.htm
    Our web-graphics are insert into
    <script type="text/javascript" src="../common/js_func/parameters.js"></script>
    the SpryTabbedPanels.js scripts.
    On the new simple, you can click to 4 Tabs on the left.
    If you want to see the 5 or 6 content tab you can click the label into the 3 or 5 content tab.
    When you click on the label "here" on the 3° Tab (for example), you can see the content change and the "Tab 3" is not selected.
    I'd like to change the content and leave the "Tab 3" selected.
    I hope in your help :-)
    thank in advance
    regards
    Stefano

Maybe you are looking for