Spry tabs nested in accordion on IE.

I am trying to put a tabbed panel in an accordion panel. In
IE6 and I believe 7 as well, the tabs do not hide. Everything looks
fine in FF and Safari. Any ideas on fixing this?

This example, though for our widgets, might help with the
spry issue.
http://www.projectseven.com/products/tools/accordion/tweaks/with_tpm/index2.htm
Essentially, what you do is make each containing DIV for each
accordion
content panel relative.
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
Elevating Dreamweaver Widgets to a Higher Level
"Josh Rawls" <[email protected]> wrote in
message
news:ft0go1$h8m$[email protected]..
>I am trying to put a tabbed panel in an accordion panel.
In IE6 and I
>believe 7 as well, the tabs do not hide. Everything looks
fine in FF and
>Safari. Any ideas on fixing this?

Similar Messages

Spry tabs in accordion overflow in ie7

I am trying to nest tab panels into accordion panels and it
works great in safari and firefox, however in ie7 the tabs are
overflowing the closed accordion panels. I have tried setting
overflow:hidden on the accordion content div and that did not help.
It acts like a float clearing issue, yet I can figure out at what
level to clear it. I was wondering if anyone had tried to do this.
In the end I can set events to display or not onClick but was
hoping for a css solution as that seems to be where the problem is.
you can see a sample at
http://jdspeer.com/aesi
Thank you in advance for any ideas.
James Speer

Hi Ronald,
Place the constructor withing the Spry region as follows
      <div spry:region="dsGrade5" >
          <div id="Accordion1" class="Accordion" tabindex="0">
            <div spry:repeat="dsGrade5" class="AccordionPanel">
            <div class="AccordionPanelTab">{@name}</div>
            <div class="AccordionPanelContent">{summary}</div>
          </div>
          <script>
               var Accordion1 = new Spry.Widget.Accordion("Accordion1");
          </script>
        </div>
      </div>
I hope this helps.
Ben

Spry Tabs + Accordion

i have spry accordion here and in two of them there are spry tabs. when i view the site in IE the spry tabs are always visible instead of being hidden until you select that panel in the accordion.
here's what i'm seeing in IE:
http://www.robvanwyen.com/cv/rfblair/Outlook.jpg
and this is what i see everywhere else:
http://www.robvanwyen.com/cv/rfblair
i do have overflow set to hidden in the panels.
thanks in advance!

What version of IE?
Working for me in IE6 and 8, in both modes.
Site looks nice and clean, btw.

Help me control Spry Tabs or Spry Accordion width

I am using Spry Tabs and Spry Accordions in Liquid pages, inside a DIV with ID.
I use an external CSS stytle sheet to control this ID and properly position the Spry Tabs or Spry Accordions inside the page.
I would like to have these Tabs or Accordions panels filling the page with a 10px margin on both sides.
I tried many CSS properties to have the DIV ID position the panel with both 10px margins...
If I use a 100% width, the panel overshoots the width of the page by about 10 to 20 pixels.
Using a 0px position and a 10px border on the right does not work.
The only solution I found is using a 98% width (box and position), but it varies on larger screens...
I am using Dreamweaver CS 5.5 on a Mac Pro.
There must be some CSS trick that I don't know... But CSS should also be easier to use...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    padding: 0
    margin: 0
html {
    background: #CCC;
    height: 100%;
body {
    width: 960px;
    margin: auto;
    background: #FFF;
    height: 100%;
.aside {
    width: 260px;
    float: left;
    background: #030;
    padding: 10px;
.main {
    background: #6F3;
    padding: 10px;
    margin-left: 280px;
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
</head>
<body>
<div class="aside">
<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">Content 1</div>
      <div class="TabbedPanelsContent">Content 2</div>
    </div>
</div>
</div>
<div class="main">
<div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Label 1</div>
      <div class="AccordionPanelContent">Content 1</div>
    </div>
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Label 2</div>
      <div class="AccordionPanelContent">Content 2</div>
    </div>
</div>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryAccordion.js"></script>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Gramps
PS Sorry, horible colours

Accordion spry tabs - adding a link to each main tab - is that possible

Hi all,
The site I am working on is: www.drsamet.com/new .
The site is in Hebrew, but that does not relly effect my issue.
My client wants me to add links to each of the main tabs in this accordion. These are the "instigator" tabs, the ones that you click on for the accordion to expend. (in this site they are Blue).
Is that possible?
I tried to do it in a regular way using <a href> tags, but it did not work.
any and all help will be appriciated.
a

The accordion widget has a "showPanel" method. You can call these for example with a onclick attribute..
onclick="acc1.showPanel(0); return false;"
That would open panel 1, as the accordion uses a zero based index.
Read more about the accordion. http://labs.adobe.com/technologies/spry/articles/accordion_overview/index.html

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.

Spry tabbed panels - Different Hover Class for each tab

Already posted this in the general Dreamweaver section, but just realized there was a specific Spry section. So, my apologies for the repost.
I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.
However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.
Any help?
Thanks.

Just in case you did not notice the announce at the top of this forum's main page, I have copied it here.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Yoru question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.
by Arnout Kazemier at Oct 23, 2009 2:47 PM
landon_tc wrote:
Actually, I do remember posting that, and have updated it with what worked for me. However, I could not recall posting it in a specific ajax spry forum, so I assumed I just posted in the general forum. Hence the current situation.
Yeah and my name is not Ben Pleysier.
landon_tc wrote:
Any help with the current problem?
Please have a look at this thread http://forums.adobe.com/message/2662019#2662019
I hope this helps.
Ben Pleysier

Spry Tabbed Panels: Tabs

I'm experimenting with Spry Tabbed Panels. The problem I
couldn't work out is that how to get panel tabs stay on their
place. They seems to be jumping out (far right) when I click on
enter key while my cursor in the tab content area. This happens on
DW CS3 but displays correctly on browsers preview (site is local)?
I am inserting Spry Tabbed Panel in a simple styled div.
There are many styled divs/nested divs on the page.
I can insert non Spry items in a same div and style them
without problem but something seems to be different about Spry
Tabbed Panel?

I'm experimenting with Spry Tabbed Panels. The problem I
couldn't work out is that how to get panel tabs stay on their
place. They seems to be jumping out (far right) when I click on
enter key while my cursor in the tab content area. This happens on
DW CS3 but displays correctly on browsers preview (site is local)?
I am inserting Spry Tabbed Panel in a simple styled div.
There are many styled divs/nested divs on the page.
I can insert non Spry items in a same div and style them
without problem but something seems to be different about Spry
Tabbed Panel?

How to hide the default panels of a dreamweaver spry tabbed panel?

i put several spry tabbed panels in the same page (one widget inside the other). the problem is that when the page loads all of the default panels (4 in total) appear for about 6 seconds and then they collapse into the main pannel. how do i fix this?
you can see this problem in this page:
http://www.eye-dealswing.com/Parents/WhereToStay/index1.html
do i need to add something in this section?
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
thank you
Alejandra

im sorry, i dont understand what you mean. i am using the tabbed panels spry and not the accordion. i am just a rookie with html coding. can you please explain me what do i need to do?
thank you very much
Alejandra

ANN: Linking to non-default Spry tab or panel - tutorial

Spry 1.6 includes a file called SpryURLUtil.js that makes it
easy to
link to a specific tab or panel in a Tabbed Panels or
Accordion widget.
I've created a step-by-step tutorial explaining how to use
it. You can
find it on my site at the following URL:
http://foundationphp.com/tutorials/spry_url_utils.php
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

That should be built in, as it is in all PVII Widgets.
Being how Spry has grown to be such an important part of your
books and
other writings, perhaps you would agree (and maybe even be
able to influence
Adobe) that what Spry needs is a re-writing rather than
updates.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"David Powers" <[email protected]> wrote in message
news:fokosr$l1e$[email protected]..
> Spry 1.6 includes a file called SpryURLUtil.js that
makes it easy to link
> to a specific tab or panel in a Tabbed Panels or
Accordion widget. I've
> created a step-by-step tutorial explaining how to use
it. You can find it
> on my site at the following URL:
>
>
http://foundationphp.com/tutorials/spry_url_utils.php
>
> --
> David Powers, Adobe Community Expert
> Author, "The Essential Guide to Dreamweaver CS3"
(friends of ED)
> Author, "PHP Solutions" (friends of ED)
>
http://foundationphp.com/

Spry Tabs question

I have a page that uses the Spry tabs. It's set to use the
first tab (default).
I have another page wherein I'd like to put a link tot his
page but
have the link display the SECOND tab.
Is this possible? How is it done?

I'm a newbie to Dreamweaver CS 5.5 (so please go easy)
You are out of luck, you copped me.
<script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 }); </script>
That's correct, that will vary the content area depending on the contents and will start with all panels closed.
My code currently looks like this:
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
And this is where I stop being nice. Your code entails a lot more than these two lines. Your code will look a lot more like
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
The line that you are looking for is called a constructor. The function of a constructor is to create an instance of the widget, without which a widget would not exist. Another function of the constructor is to override the default JavaScript using overriding settings. Hence, if you change the 4th last line (hopefully highlighted bold red) to
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
or similar, you should be fine.
Gramps

Looking to add animation to the spry tabbed panels

SO I was wondering if there's any way to add a fade in/out to
the content panel on the spry tabbed panels, whenever you click a
new tab, have that content fade in or do some other kind of effect
that adobe supports through the spry framework.
I've already looked at the adobe labs documentation, and I
can only find effect modifications for the accordion panels.
Any help would be great!
Matt

I have a simple solution posted on my blog:
http://blog.infrontweb.com/spry/spry-tabbed-panel-fade-transition/
Hope this helps.

Spry Tabbed XML data panels within HTMLPanel not working.

Many thanks for reading.
s
I trying to provide a rapid solution using adobe's samples
to make Spry Tabs work within an html panel (in order to avoid
many links in my page).
I am using the following code:
initial page with html panel with the ready products.js to parse the links:
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryPagedView.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLPanel.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryDataExtensions.js"></script>
<script src="SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="../SpryAssets/products.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="TabbedPanels/SpryTabbedPanels.css"/>
<script src="TabbedPanels/SpryTabbedPanels.js"></script<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet("ajaxbibliaxmlbridgetitle.php", "root/row[katigoria=1]", {sortOnLoad: "ID_BIBLIOU", sortOrderOnLoad: "ascending"});
var pv1 = new Spry.Data.PagedView( ds1 ,{ pageSize:10 });
var pv1PagedInfo = pv1.getPagingInfo();
//var TabbedPanels1 = new Spry.Widget.TabbedPanels();
</script>
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="sidebar1">
<div id="productPageLinks">
   <ul>
    <li><a href="index.php">Index</a></li>
    <li><a href="booklist.php">Product List</a></li>
        <li><a href="test.php">Σχετικά με τη Βιβλιοθήκη</a></li>
   </ul>
</div>
</div>
<div id="mainContent">
<br />
<div class="HTMLPanelLoadingContent"> Waiting</div>
<div class="HTMLPanelErrorContent"> error </div>
</div>
</div>
</body>
</html>
Products.js (adobe'S change to can load xml dataset)
var mainPanel = null;
// Our initialization function which unobtrusively attaches
// click handlers on the product links within the page.
function InitProductPage()
mainPanel = new Spry.Widget.HTMLPanel("mainContent" , { evalScripts: true });
    var observer = {onPostUpdate: function(){ Spry.Data.initRegions('mainContent');
mainPanel.addObserver(observer);
// For every link on the page which points to a product page,
// attach an onclick handler that will intercept clicks and
// and fire off a request to load the URL via the HTMLPanel.
// For these links, we want to load the static product page
// and extract out the content underneath the "mainContent"
// node.
Spry.$$("#productPageLinks a").addEventListener("click", function(e)
mainPanel.loadContent(this.href, { id: "mainContent" });
return false;
}, false);
// For every link on the page which points to a product HTML
// fragment, attach an onclick handler that will intercept clicks and
// and fire off a request to load the URL via the HTMLPanel.
// For these links, we are loading HTML fragments, so there is no
// need to specify an ID to extract out. The HTMLPanel will insert
// all of the content recieved.
Spry.$$("#productFragmentLinks a").addEventListener("click", function(e)
mainPanel.loadContent(this.href);
return false;
}, false);
// Add our InitProductPage() function as a load listener
// so that it gets executed once the page has fully loaded.
Spry.Utils.addLoadListener(InitProductPage);
XML data and stuff all loaded correctly
What I am trying to do is to load a second page from a link in my initial page
that contains a Tabbed Panel.
The page loads but no panel functionality exists. The first Panel load correctly but behaves as a simple html page .
I have searched several hours the forums and playing around by moving the definition of Spry.Widget.TabbedPanels within
the initial HTMLPanel page and other spots but this produced js errors as expected (because the tab panel definitions exist in bookcategories.php)
which is loaded only when it is called.
Any ideas?
Page to load is like this :
<bookcategories.php>
<link rel="stylesheet" type="text/css" href="TabbedPanels/SpryTabbedPanels.css"/>
<script src="TabbedPanels/SpryTabbedPanels.js"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryDataExtensions.js"></script>
</head>
<body >
<div id="container">
<div id="mainContent">
         <div class="TabbedPanels" id="TabbedPanels1">
<ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab">SOmething ... </li>
          <li class="TabbedPanelsTab">Something else </li>
<
</ul>
<div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">Blah Blah
              <div spry:region="pv1" id="bibliapv"><br />
                <br />
              <div spry:state="ready">
                  <table width="775" height="42" >
                    <tr style="color:#900"; >
<th etc>
                    </tr>
                    <tr spry:repeat="pv1" spry:even="even" spry:odd="odd">
                      <td >       {ID_}
                     </td>
                      <td>{Writer}</td>
                      <td>{Book_Title}</td>
                       </tr>
                  </table>
                </div>
              </div>
          <div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
   <div class="TabbedPanelsContent">Tab 4 Content</div>
</div>
</div>
</div>
<br class="clearfloat" />
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Many thanks

Ok I went back through everything and checked to make sure my
files were in the right places both my SpryTabbedPanels.css and my
SpryTabbedPanels.js are in the SpryAssets folder and they work fine
until I try and add data from an xml file to them then the tabs
populate with the info but become unclickable and the content area
has every bit of content in on tab. Below is what I have let me
know what I'm doing wrong I am using Spry 1.6
<!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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div spry:region="ds1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li spry:repeat="ds1" class="TabbedPanelsTab"
tabindex="0">{name}</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div spry:repeat="ds1"
class="TabbedPanelsContent">{desc}</div>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Spry Tab Panel is not working properly on remote server

Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
Thanks
<!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=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
          <div id="header"></div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html" class="current">ABOUT</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
        <ul>
          <li><a href="#">Business Plan</a></li>
          <li><a href="#">Marketing Plan</a></li>
          <li><a href="#">Incorporation</a></li>
          <li><a href="#">Accounting System</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#">OUR PROCESS</a></li>
      <li><a href="#">CAREERS</a>      </li>
      <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">values</li>
      <li class="TabbedPanelsTab" tabindex="0">people</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
                <div id="scrolltext">
                    <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
        </div>
      </div>
      <div class="TabbedPanelsContent">
                  <div id="scrolltext">
                    <h1>Heading1</h1>
        <p>Lorem n, </p>
                            <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, , </p>
                           <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit a, </p>
                           <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, </p>
        </div>
      </div>
    </div>
</div>
</div>
<div id="footer">
<div id="legal">
                      <ul>
                          <li>Copyright © 2012 Temari&Co</li>
                    <li>| Privacy Policy |</li>
                    <li>Terms of Use</li>
                </ul>
    </div>
            <div id="socialmedia">
                      <ul>
                          <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                    <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                    <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                    <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
              </ul>
      </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - 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.
.TabbedPanels {
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          clear: none;
          width: 100%;
          height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
          margin: 0px;
          padding: 0px;
.TabbedPanelsTab {
          position: relative;
          float: left;
          background-color: #FFF;
          list-style: none;
          -moz-user-select: none;
          -khtml-user-select: none;
          cursor: pointer;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9pt;
          font-weight: normal;
          color: #666;
          height: 30px;
          width: 116px;
          text-transform: uppercase;
          text-align: center;
          line-height: 30px;
          margin: 0px;
          padding: 0px;
.TabbedPanelsTabHover {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
.TabbedPanelsTabSelected {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
          height: 30px;
          width: 116px;
.TabbedPanelsTab a {
          color: black;
          text-decoration: none;
.TabbedPanelsContentGroup {
          clear: both;
          background-color: #FFF;
          height: 100%;
          width: 824px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9pt;
          color: #666;
          border-top-width: 1px;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-top-style: dotted;
          border-top-color: #CCC;
          border-right-color: #CCC;
          border-bottom-color: #CCC;
          border-left-color: #CCC;
.TabbedPanelsContent {
          height: 100%;
          width: 100%;
          overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
          overflow: hidden;
          zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
          float: left;
          background-color: #EEE;
          position: relative;
.VTabbedPanels .TabbedPanelsTab {
          float: none;
          margin: 0px;
          border-top: none;
          border-left: none;
          border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
          background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
          clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
          overflow: visible !important;
.TabbedPanelsContentGroup {
          display: block !important;
          overflow: visible !important;
          height: auto !important;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
.TabbedPanelsContent {
          clear:both !important;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
          width: 744px;
.TabbedPanelsTab {
           overflow: visible !important;
           display: block !important;
           clear:both !important;

Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services

More than one spry tabbed panels

Hi,
On my index page I have a tabbed panel with it own css (size,
color, etc.)
I would like to insert another tabbed panel on another page
(tabbed panel2). I would like this to have its own css style
(different size, color scheme, etc.)
When I insert a spry tabbed panel in dreamweaver it
automatically takes on the css of my original tab panel design! How
can I let the second tabbed panel take on its own life, completely
independent of the first one?
Thank you.

"chris.cavage" <[email protected]> wrote in
message
news:gnuk7l$hoj$[email protected]..
> How can I let the second tabbed panel
> take on its own life, completely independent of the
first one?
Create a second set of CSS rules for it. The easiest way is
to make a
copy of SpryTabbedPanels.css, and call it
SpryTabbedPanels2.css. Link
SpryTabbedPanels.css to the original page, and
SpryTabbedPanels2.css
to the page that you want to look different.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com

Spry tabs nested in accordion on IE.

Similar Messages

Maybe you are looking for