Centering tabbed panel in div

Is there a way to adjust with width of the tabbed panel div
and have the
tabs adjust to match the width and line up correctly?
The page I'm working on right now (as a test) is
www.scootervilleusa.com/scooters/tform2.cfm?PID=25
You can see what happens right now....
Thanks,
Steve

Hi Steve,
Your use of auto left and right margins on the
TabbedPanelsContentGroup is what is throwing things off. Instead of
specifying a width and left/right margins on the
TabbedPanelsContentGroup, try doing it on the TabbedPanels class:
.TabbedPanels {
padding: 0px;
clear: both;
width: 100%;
margin: 0px auto 0px auto;
width:800px;
I think that will get you closer to what you want.
--== Kin ==--

Similar Messages

Spry Tabbed Panels- Open link on click

I am completely new to Dreamweaver and web design in general so please bear with me. I have created a tab menu using Spry Tabbed Panels but dont know how to make it so once a tab has been clicked an html file (ex. tab1.html which is saved on my computer) opens in the content portion, not open a new window.Can anyone post a tutorial or if its simple enough, post some directions?
Any help would be appreciated!

Spry Tabbed Panels are not a "menu" per se, but a series of panels, all but one of which remain hidden until their tab is clicked. Tabbed Panels is a Spry "disclosure" widget. All the content may actually exist on the same page as the Tabbed Panels widget, or you can use <iframe></iframe> to 'surface' other pages in your Tabbed Panel Content divs.
As it sounds as if you want to use the <iframe> approach, here's how:
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">First Panel</li>
    <li class="TabbedPanelsTab" tabindex="0">Second Panel</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">This is the content of the first panel <br /><iframe src="heirloom.html" width="100%" height="800" frameborder="0"></iframe></div>
    <div class="TabbedPanelsContent">This is the content of the second panel <br /><iframe src="data.html" width="100%" height="500"></iframe></div>
</div>
</div>
You can also omit the frameborder="0" if you want to keep the default look of an iframe. Remember to give both a height and a width to your iframes. Test them in several different browsers (or BrowserLab) to make sure they look the way you want.
Beth

Linking to specific spry tabbed panel - code not working

Hi,
I have followed the tutorial at
http://foundationphp.com/tutorials/spry_url_utils.php
with regard to being able to link to a specific tab. For some
reason though, my code doesn't work. I am usign Dreamweaver cs3,
and as soon as I head back to the design view, or preview it in a
browser for that matter, all I see is each tab one above the other,
and the tabs no longer work.
My code is as follows:
<script src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params =
Spry.Utils.getLocationParamsAsObject(); </script>
is in the head, and the body for the tabbed panels is:
<div id="mainContent">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">1st
Team</li>
<li class="TabbedPanelsTab" tabindex="0">2nd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">3rd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">4th
Team</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3 style5">Player
name</div>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic" /></p>

<p align="center" class="style3 style6 style4">Click a
player name to view their profile. </p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3"><span
class="style5">Player name</span></div>
<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic2" /></p>

<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>
</td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto2" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<p align="center" class="style3 style6 style4">Player
name</p>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic3" /></p>

<p align="center" class="style3 style6 style4">Click a
player name to view their profile.</p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto3" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3 style4
style6">Player name</div>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic4" /></p>

<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto4" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
</div>
</div>
</div>
<p> </p>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.tab ?
params.tab : 0)});
The link I would then use to link to tab 2 say, would be:
../"pagename".php?tab=2#TabbedPanels2
Also, when I then go to click on the Spry tabbed panels
region in design view, I get an error message saying:
while executing inspectSelection in spry_tabbedpanels.htm, a
javascript error occurred.
I am pretty inexperienced with Spry and Java so I may have
missed something simple.
A solution would be much appreciated as this is driving me
mad!
Please let me know if you need me to post more code.
Thanks in advance.
p.s. I am using Dreamweaver CS3 and the SpryURLUtils.js
script is from the Spry 1.6.1 prerelease framework.

quote:
Originally posted by:
brownie_jedi
Ok, so I've just changed the code to <script
type="text/javascript"
src="../SpryAssets/SpryURLUtils.js"></script>
to mimic the code for <script
src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
since the spry files are all in the same folder. Is this what
you meant?
Having just installed firebug, I get the error params is not
defined. So I guess that this all together means that the
SpryURLUtils.js file is not being called correctly?
p.s. Thanks for the speedy replies, much appreciated.
Yes it means it cant find the file SpryURLUtils.js.
in firebug theres a tab called scripts, if u click on it, u
can see wich scripts are loaded. i suggest u check that out. Or
post a online URL so we can see the problem for our selfs..

InContext and Spy Tabbed Panels

First I have to get it out of the way that I'm with everyone
else who thinks it's silly that there is no indication as to what
the InContext service will cost. Even if you could throw a ballpark
out there it would help people decide whether or not to fart around
with it. I'm guessing the difference between a $10 a month service
and $100 is going to be the difference between lots of people
loving it to lots of people passing it by. Seems like the
developers could throw us a little bit of a bone on this.
Secondly, I was planning on redesigning my entire site where
each page has tabbed panels. My site is an advertising site with
lots of vendors, so each of their pages would have a default tab
for their main copy, a photo gallery, a video clip, and contact
information. I'd love to let them be able to update their own
default tab info, and their contact information tab, but not access
the other. But I'm curious as to how InContext would handle a page
with Tabbed Panels? I assume I could designate Div tags within the
panels I want them to be able to edit, but I'm wondering how those
panels would appear to the editor using InContext.
Again, I'd jump right in and try this on my own but I agree
with many here that it doesn't make sense to spend time designing
and testing this service with no clue whatsoever if it will be
within my budget to use it. Thanks.

Hello Brian,
I absolutely understand the importance of getting some sort
of information related to future pricing, and I'm still waiting for
word on that. So please keep checking the forum! I'll post to the
main topic on pricing as soon as I can. Again, we really appreciate
everyone's feedback - and patience on this.
Regarding your other question, yes, you would specify the
tabbed panel content div (or divs
within the tabbed panel content div) as editable.
For example, you have Tab 1 panel content, which contains the
vendor main copy, photo gallery etc., and then Tab 2 panel content,
which contains basic vendor contact info. You specify Tab 2 panel
content as editable. When the vendor has logged in and is editing
the site, they simply click on Tab 2 to display the Tab 2 panel,
and they can then edit the content in the editable region(s).
However, I should clarify that you cannot currently restrict
certain users to certain divs/pages within a site. If you were to
allow your vendors the ability to update editable sections on the
site, they would be able to update
all editable sections of your site.
"InContext Editing supports three user roles: administrator,
publisher, and editor."
Take a look at the
About
InContext Editing Roles section in the Administrator Guide for
a breakdown of the user roles.
Let me know if you have further questions about this.
Thanks!
Corey

Spry Tool tip on Tabbed panels

I am having a problem with the new spry tool tip widget. I
have a Tabbed panels table with 4 tabs. For some reason the spry
widget only works when I have 4 seperate div's with the tool tip
content and 4 separate js variables placed after the divs. One must
be on each tab. Is there any way to make it work so there is one
div and one variable creation on the page rather than 1 for each
panel?. heres how my code works:
<head>
<body>
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">TAB
1</li>
<li class="TabbedPanelsTab" tabindex="1">TAB
2</li>
<li class="TabbedPanelsTab" tabindex="2">TAB
3</li>
<li class="TabbedPanelsTab" tabindex="3">TAB
4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="Funds_DIV1" spry:region="ds1"
class="SpryHiddenRegion" >
<table>
<div id="blindMe" class="toolTip"> <%=accesstxt
%> </div>
<script type="text/javascript">
var blindTooltip = new Spry.Widget.Tooltip('blindMe',
'.blindTrigger');
var blindToolTipClosed = new
Spry.Widget.Tooltip('blindMeClosed', '.blindClosedTrigger');
</script>
</table>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="Funds_DIV2" class="SpryHiddenRegion"
spry:region="ds2">
<table>
<div id="blindMe" class="toolTip"> <%=accesstxt
%> </div>
<script type="text/javascript">
var blindTooltip = new Spry.Widget.Tooltip('blindMe',
'.blindTrigger');
var blindToolTipClosed = new
Spry.Widget.Tooltip('blindMeClosed', '.blindClosedTrigger');
</script>
</table>
Repeat two more times . You get the idea

Sorry i just kinda threw that together as a mock up
id="blindMe" becomes id="blindMe2" and so on for each subsequent
use. I had already checked for that. The same thing goes for the
associated script variable. It works as is, i just dont want to
have to duplicate it.
The problem is, if i remove all the duplicated divs and
scripts, then place that script and div on the bottom of the page
after the </div> for the tabbed panels div, the hover state
no longer works. Same is true if i keep it within the </div>
the only way it does work is if i duplicate it within each tabbed
panels content divs. (With different id values of course)

I put a Spry Tabbed Panel obj in my site at...how I centered it, to the container div width?

I put a Spry Tabbed Panel obj in my site at
http://l-web-dev.net/
how I centered it, to the container div width?

Add this to your document:
<style type="text/css">

</style>
Then change the following line
<div class="story" style="width:550px;">
to
<div class="story myTabbedPanels">
At a later stage you could add the style rules for myTabbedPanels to /styles/css-styles.css after having removed it from this document.
That is it.
Ben

Embedded map in tabbed panel not centered

When I embed the html code from google maps to a tabbed panel for a particular location, that location does not appear in the center of the map but is just off the map at the upper left-hand corner. In preview mode, property is centered, but in publish mode it is off center. Any suggestions? website: www.netlease.net, affected page: Available properties

Hello Sanjit,
Please click on Map tab and take a look. When I resize the browser, it appears, but it's still not centered.
http://kijibay.com/index.php?a=2&b=196
I would deeply appreciste it if you let me know how to fix it.
Thanks,
Bob

Tabbed Panels in a div

When I put the tabbed panels into rightcolumn the content part stays but the tabs fall out of the div. How can I fix this? Thank you so much!
Also if you can answer this question, When I use an ap div how do I make it in the backround so that if I have a menu bar go down over the ap div the menu bar doesnt disapear behind it! Thank you so much!

I remember responding to a similar question from you last week. Same answers apply.
http://forums.adobe.com/thread/1152221
#1 Do not use APDivs for layouts.
#2 Do not assign explicit height values to containers. Height is always determined by content.
PLEASE READ THIS (again):
http://www.apptools.com/examples/pagelayout101.php
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">

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

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

</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<style type="text/css">

</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>
    </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>
    </div>
</div>
<script type="text/javascript">

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

Problem with Spry Tabbed Panels with Explorer 6

I've used Tabbed panels all over my site, and they seemed to work fine in FireFox, Safari, Explorer 7 and 8, etc. but today i checked out Explorer 6 in BrowserLab, after someone said our site looked weird.
In EX 6 it certainly does: all the tabbed panels are preceded by about a screen's worth of empty space!
I'd appreciate it someone could have a look at this and see if they can tell what's going on:
See this page:
http://www.ragandbone.ca/Pages/willows.html
or almost any ohter page on the site!
I'm very far from experienced in web work, so I might need step by step instructions for any fix suggested.
Thanks in advance
John

Hi, John,
Make the width of the .TabbedPanels narrower. In the course of my experiments, I ended up making it 580px, which works in IE6, according to BrowserLab. You had a simple width overrun; your widths + borders+ paddings + margins (within the content div) added up to more than the width available. You might be able to get away with slightly more width, but test it carefully when you start to add it back in...
This might be an instance of the "doubled margin bug" (see http://www.positioniseverything.net/explorer/doubled-margin.html).
I changed the margin on .TabbedPanels to margin: 0 auto; so that any effective centering that had been done by 'filling' the width previously was now achieved by the margin-right and margin-left set to "auto." (The zero applies to top and bottom margin.)
I deleted the left: -40px; that you had applied to .TabbedPanelsTab and zeroed out the right padding on .content ul, .content ol {
padding: 0 15px 15px 0; that your threeColFixHF_RB.css had applied to all ul in the site. This might or might not actually affect anything if you don't make these same changes, but I had altered them in the course of figuring out what was going on. It's never a good policy, in my opinion, to use negative margin if you can simply correct both elements, as I did. You don't want to be progressively compensating for things you don't need anyway!
Beth

Spry tabbed panel

Hi,
I've paced a Spry tabbed panel into a page below 3 thumbnails of images, you click on the tab and a larger image drops down, that works just fine but I can't figure out how to have the contents of all tabs to be empty on load so no large images in the content area are visible, is this possible?
Thanks in advance
Pete

Sorry Ben, don't have this page uploaded yet but I've included the code from the HTML page.
Thanks Pete
<!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=iso-8859-1" />
<title>Web design professional web site design & development Auckland Tauranga Wellington Filemaker Pro relational databases by Trident Solutions</title>
<meta name="Description" content="Trident Solutions build professional websites and develop relational databases for clients in New Zealand and Australia." />
<meta name="Keywords" content="Web site design, New Zealand Australia, Filemaker Pro databases design company," />
<meta name="Copyright" content="Copyright Trident Solutions 2010. All rights reserved" />
<meta name="Publisher" content="web design" />
<meta name="Distribution" content="Global" />
<meta name="Revisit" content="10 days" />
<meta name="Language" content="English" />
<meta name="Rating" content="General" />
<link href="css_files/styles.css" rel="stylesheet" type="text/css" />
<link href="css_files/body_class.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:200px;
    height:21px;
    z-index:27;
    left: 689px;
    top: 616px;
    background-color: #FF0000;
#apDiv3 {
    position:absolute;
    width:77px;
    height:30px;
    z-index:1;
#apDiv4 {
    position:absolute;
    width:83px;
    height:26px;
    z-index:1;
    top: 181px;
#apDiv5 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:27;
    left: 68px;
    top: 265px;
body {
    background-color: #FFF;
</style>
<script src="SpryAssets/SpryCollapsiblePanel2.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="services">
<div id="centered">
<div id="container">
<div id="buttons">
   <a class="home" href="index.html">Home</a>
    <a class="services" href="services.html">services</a>
    <a class="clients_examples" href="client_examples.html">client examples </a>
    <a class="filemaker_pro_database" href="filemaker_pro_database.html">databases</a>
    <a class="company_info" href="company_info.html">company info </a>
    <a class="contact_us_feedback_form" href="contact_us_feedback_form.html">contact us feedback form</a>
    <a class="photo_gallery" href="photo_gallery.html" target="_blank">photo gallery</a> </div>
<div id="header_text">
    <h1>Web design & development<br />
      Filemaker Pro relational databases</h1>
    <h1>Digital photography</h1>
</div>
<div id="masthead"></div>
<div id="apDiv2"></div>
<div id="rh_title_heading"></div>
<div id="services_table">
    <div id="web_title2">
      <h2>Services provided by Trident
      </h2>
      <div id="dotted_line_top"></div>
    </div>
    <p> </p>
    <p><img src="images/http_icon.jpg" alt="web icon" width="124" height="94" class="img" /><img src="images/database_icon.jpg" alt="filemaker icon" width="124" height="94" class="img" /><img src="images/digital_camera.jpg" alt="photos" width="124" height="94" class="img" />
    </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <div id="services_image3">
      <p><img src="images/sydney_cove_tn.jpg" alt="" width="181" height="121" class="img" /><img src="images/mount_tn.jpg" width="181" height="121" class="img" /><img src="images/bridge_tn.jpg" width="181" height="121" class="img" /></p>
      <p> </p>
      </p>
      <p><br />
    </p>
</div>
<p> </p>
<div id="image_3_large">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
      <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
      <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
</ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent1">Content 1</div>
      <div class="TabbedPanelsContent2">Content 2</div>
      <div class="TabbedPanelsContent3">Content 3</div>
</div>
</div>
<p> </p>
</div>
<p> </p>
</div>
<div id="rh_text_box_css">
    <h3>CSS </h3>
    <p class="main_text"><strong>CSS</strong> stands for <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets<br />
      Styles define how to display HTML elements<br />
      Styles were added to HTML 4.0 to solve a problem<strong><br />
        </strong>External Style Sheets can save a lot of work<br />
      External Style Sheets are stored in <strong>CSS files</strong></p>
    <div id="read2"><a href="http://www.w3schools.com/css/css_intro.asp" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
    <p class="main_text"> </p>
</div>
<div id="index_lh_top_box"></div>
</div>
<div id="back_shadow">Content for id "back_shadow" Goes Here</div>
<p> </p>
<div id="rh_text_box_flash"><span class="main_text_rh_box">
<h3 class="home" id="sprytrigger1"><strong>Flash Animation</strong></h3>
    </span><span class="main_text"><span id="sprytrigger2">Web sites come</span> to life with the power of Flash <br />
    animation, display interactive photo
    </span><span class="main_text">    how to albums, <br />
    diagrams with movement and tutorials can all<br />
be done in Flash</span><span class="main_text">
<p class="main_text"> </p>
    </span>
<div id="read1"><a href="http://www.adobe.com/products/flash/whatisflash/" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
</div>
<div id="rh_text_box_seo">
<h3>Search Engine optimisation (SEO) </h3>
      <p class="main_text">As an Internet marketing strategy, SEO <br />
        considers how search engines work and what <br />
        people search for. Optimising a web site primarily <br />
        involves editing its content and HTML and <br />
        associated coding to both increase <br />
        the site's ranking with search engines. </p>
<div id="read3"><a href="http://en.wikipedia.org/wiki/Search_engine_optimization" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
</div>
<div id="rh_text_xhtml">
<div id="read4"><a href="http://www.w3schools.com/xhtml/xhtml_intro.asp" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
      <h3><span class="main_text_rh_box">XHTML</span> What Is XHTML?</h3>
      <span class="main_text">XHTML stands for EXtensible HyperText Markup<br />
Language<br />
XHTML is almost identical to HTML 4.01<br />
XHTML is a stricter and cleaner version of HTML<br />
XHTML is HTML defined as an XML application<br />
XHTML is a W3C Recommendation</span>
      <p> </p>
</div>
    <div id="footer_text">Copyright 2010. Trident Solutions. Comments regarding this site, <span class="class1"><a href="mailto:[email protected]">please contact the web master.</a></span></div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Spry tab panels

Hello,
I have 2 questions I am hoping someone can help me with.
1. is there a way to center the spry tabbed panels, currently
they are float left and when I remove the float left they still
remain float left.
2. how do I add a colored background rectangle behind the
tabs so they appear to span the length of my div tag/content area?
Thank you!
amber

I have figured out the background rectangle but still
perplexed about the centering issues....
any help is greatly appreciated.
thank you!

Help needed for tabbed panels

I'm having problems with my html pages that utilize Spry
tabbed panels. The majority of them look as expected but when a
page requires a scroll bar because of it's increased length,
there's a noticeable shift from page to page.
Almost looks like the pages jump horizontally. Can someone
take a look & offer some help?
Thanks much, VSE_driver
http://www.monocacyequine.com/newweb/index.html

Nothing to do with tabbed panels. This is to do with Firefox
etc adding a scroll bar on the right and then the outer div
"wrapper" being centered horizontally on the page.
Try adding a css relative position attribute to the wrapper
id element
#wrapper{
position: relative;
left: 100px;
</style>
Adjusting the left element as required.
Phil

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

Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
And click on the "Using Spry.Utils.updateContent()"
The 3rd example shows how to use a fade transition whenever the content changes.
I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
Tabs code;
<ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab">
               <table class="Button" >
                    <tr>
                    <td style="padding-right:0px" title ="Home">
                    <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                    </td>
                    </tr>
               </table>
          </li>
etc
etc
etc
and the panel code:
<div class="TabbedPanelsContent" id="Home">
     CONTENT
</div>
I hoped i can use the example code from the link into my tabbed panels.
I thought this code:
onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
could be added to the tab code like this:
<a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
But the content doesnt fade...
I know i need to change the header etc.
The following is from the link:
<!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>Aquo Events</title>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
<script src="../../../includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<style type="text/css">
/* IE HACK to prevent bad rendering when fading. */
#event { background-color: white; }
</style>
</head>
So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
Is there a way to keep my tabbed panel (or change as less as possible) and let
A. The fade work
B. The loading work.
The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
And the fading part is just because its nice...

It doesnt show in the post but off course i changed this link;
"data/AquoThonFrag.html"
into;
"javascript:TabbedPanels1.showPanel(1);"
I must say i dont know if this even works...

Centering tabbed panel in div

Similar Messages

Maybe you are looking for