CS3 DW, CSS templates, Spry widgets
Hello--I'd appreciate any comments/advice. I created a new
website using CS3 templates with CSS that came with the application
and used the Spry widgets, horizontal navibar and tabbed panels.
The site loads in all of the browsers fine; but, it sometimes does
not allow movement from one navibutton to the next...like the
navibar gets stuck on the previous button and/or the browser
crashes (IE). Any thoughts? Thanks!
Post a link to one of these pages, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ARCCHARI" <[email protected]> wrote in
message
news:glas3n$81l$[email protected]..
> Hello--I'd appreciate any comments/advice. I created a
new website using
> CS3
> templates with CSS that came with the application and
used the Spry
> widgets,
> horizontal navibar and tabbed panels. The site loads in
all of the
> browsers
> fine; but, it sometimes does not allow movement from one
navibutton to the
> next...like the navibar gets stuck on the previous
button and/or the
> browser
> crashes (IE). Any thoughts? Thanks!
>
Similar Messages
-
Can't add spry widget to page created from dreamweaver template
Please help! I have created a template in Dreamweaver and
from that template I have created an html page. I want to add
different tabbed and/or accordion spry widgets to multiple pages
however I keep getting an error when I try to add a widget to an
editable region. I can add the widgets to the dwt file, but I do
not want the same widget on all pages created from that template.
Please advise!
Thanks
cycleguyIf that's all that's on the child page you are in trouble.
Anyhow, it appears to me that the template has not been
properly created
since I do not also see an editable region around the
<title> tag in your
code. Please read my previous post and follow the
instructions.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"cycleguy" <[email protected]> wrote in
message
news:fu01pk$s7k$[email protected]..
> Thank you for your reply.
> I started with one of the built-in templates offered in
Dreamweaver then
> added
> additional div's and formatting then saved it as a dwt
file and created my
> html
> page from that template. I did not start the page from
scratch. Below is
> my
> source code from the child page.
>
> <!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"><!--
InstanceBegin
> template="/Templates/DankaConnectionPortalTemplate.dwt"
> codeOutsideHTMLIsLocked="false" -->
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
> <title>Untitled Document</title>
> <style type="text/css">
> <!--
> body {
> -
Hi,
I have created a accordion menu using a spry widget built
into Dreamweaver CS3. However I want to amend this so that the menu
is collapsed until the user clicks on a category.
Do I have to amend the CSS or the javascript to make it
collapsed to begin with?
Any help would be appericated.
Thanks
GaryWhen you hover your mouse over the spry collapsible panel you
will get a blue tab, click it. The properties panel will give you
the widget controls. There you can set the default state as
closed. -
Do Spry widgets work in a Dreamweaver Template
I can get the Spry widgets to work in a normal HTML page but
when I try to use the widget in a template it doesn't work.
Is there a limitation on using Spry in templates? Any help
would be appreciated. I've looked thru the docs and searched the
web but didn't find anything saying yes or no.
Thanks!I tried in both FF 2.0 and IE 6 with the same bad results.
I started with a sample from html page DW and saved it as a
template.
Then I created a new page and applied the template to that
html page.
The widgets I added directly to the html page worked, but the
ones from the template did not.
Here is the dwt file.
http://tricksterrabbit.com/tmp/Untitled-1.dwt.txt -
Spry Widget Issues - Deactivating after a while
Hi there,
I'm using Spry Widgets in DW CS3 and have been experiencing
the following strange issue.
When I insert a widget everything functions fine, the widget
is outline in blue, the little blue title appears when I roll over
it and the eye appears (for the Collapsible or the Accordion for
example) and allows me to close or open it with DW.
All in all, everything works sweet... I can edit it fine in
the Properties box etc.
And then after a while the widget just stops working. What I
mean is that there is no blue outline when rolling over it, there
is no Properties panel, there is no "eye", but the object is still
there, just not functioning.
I have obviously gone over the code as best I can. I've
created a new page within the same site and inserteda widget and
compared the code from one page to another and cannot find anything
off kilter.
Note that the CSS still woks fine, it just seems to lose its
Javascript capabilites (...)
This has happened with several different widgets in different
sites on different machines...
Any help would be much appreciated.
Thanks in advanceHere is a screenshot of a site I'm building atm. Please bear
in mind that I am not a coder and am building exclusively using
Design Mode.
LINK TO SCREENSHOT:
http://flickr.com/photos/7512606@N04/492179644"
>
-When I first inserted the Tabbed Panels widget, it
functioned fine...
-Now, something has happened and the widget is not editable
(other than going into the code) and the Panels are just displayed
one below the other.
-The widget functions normally when the page is previewed in
a browser, but I have lost my Design Mode editing capabilites.
-Now if I were to enter a new widget, it would start off
straight away in "non-editable" mode
-This has happened every time I have tried to use widgets.
Starts off fine and then loses editibility and/or functionality.
It's obviously something that I'm doing that is "breaking"
the widget, but any help would greatly appreciated.
Below is the code for that particular page:
<!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>Sisters, Pearls & MIssion Girls -
Info</title>
<style type="text/css">
<!--
body {
background-attachment: fixed;
background-color: #FFFFFF;
background-image: url(images/background/info.jpg);
background-repeat: no-repeat;
background-position: right top;
#infoContainer {
position:absolute;
top:67.5px;
width:215px;
height:515px;
z-index:1;
opacity:0;
filter:alpha(opacity=00);
right: 17.5px;
#infoTitle {
position:absolute;
left:10px;
top:3px;
width:195px;
height:90px;
z-index:1;
#infoCredits {
position:absolute;
left:10px;
top:96px;
width:195px;
height:144px;
z-index:2;
overflow: auto;
#infoLogos {
position:absolute;
left:3px;
top:244px;
width:195px;
height:21px;
z-index:3;
#infoLinks {
position:absolute;
left:10px;
top:278px;
width:195px;
height:20px;
z-index:4;
#infoFMA {
position:absolute;
left:10px;
top:304px;
width:195px;
height:205px;
z-index:5;
.infoCredits {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #333333;
text-align: left;
#logosContainer {
position:absolute;
left:10px;
top:248px;
width:195px;
height:25px;
z-index:6;
overflow: visible;
#panelProcontaioner {
position:absolute;
left:10px;
width:195px;
height:205px;
z-index:7;
bottom: 5px;
#panelContainer {
position:absolute;
left:0px;
width:195px;
height:195px;
z-index:1;
opacity:0.8;
filter:alpha(opacity=80);
top: 15px;
-->
</style>
<script src="../../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="../../SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<link href="../../SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<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_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
//-->
</script>
<link href="../css/films.css" rel="stylesheet"
type="text/css" />
</head>
<body onload="MM_effectAppearFade('infoContainer', 2000,
0, 100, false)">
<div id="infoContainer">
<div id="infoTitle"><img
src="images/info/sisters_logo.png" alt="sisters_logo" width="195"
height="90" /></div>
<div id="infoCredits"><span
class="textDefault">Directed by David Batty<br />
Produced by Jeni McMahon</span><br />
<br />
<span class="textSmall">A Rebel Films Production<br
/>
Financed by Film Finance Corporation of Australia<br
/>
Produced with the assistance of the Australian Broadcasting
Corporation<br />
© Rebel Films and Film Finance
Corporation</span></div>
<div id="infoLinks"><img
src="../images/buttons/imdb.png" alt="imdbButton" width="195"
height="20" /></div>
<div id="panelProcontaioner">
<div id="panelContainer">
<div id="filmsPanels" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
</ul>
<div id="panelContent" div
class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><a
href="../veiled/index.html" target="_top"><img
src="../../images/tabbed_nav/veiledPanel.jpg" alt="veiledPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../rodeo/index.html" target="_top"><img
src="../../images/tabbed_nav/rodeoPanel.jpg" alt="rodeoPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../inventions/index.html" target="_top"><img
src="../../images/tabbed_nav/inventionsPanel.jpg"
alt="inventionsPanel" width="195" height="175"
border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="index.html" target="_top"><img
src="../../images/tabbed_nav/sistersPanel.jpg" alt="sistersPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../thatsaustralia/index.html" target="_top"><img
src="../../images/tabbed_nav/taPanel.jpg" alt="taPanel" width="195"
height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../taylor/index.html" target="_top"><img
src="../../images/tabbed_nav/taylorPanel.jpg" alt="taylorPanel"
width="195" height="175" border="0"/></a></div>
</div>
</div>
</div></div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("filmsPanels");
//-->
</script>
</body>
</html> -
Spry Widget as a Server Side Include
I am new to using SSI. I guess one question is: does the
include have to be saved as a .shtm or .shtml file? I am trying to
take a Spry Navigation bar and use it as an include in a site I am
building. I have saved it as a .html file and a .shtml file, but
neither is working. It shows up in design view, but not preview in
browser view. Here is the code of the SSI:
<script src="../SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet" type="text/css" />
<div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="
http://www.j-boysentertainment.com">Home</a>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Projects</a>
<ul>
<li><a href="../pamperzpro.html">Pamperz
Pro</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu"
href="#">Creative Team</a>
<ul>
<li><a href="#">Jeff Reed</a> </li>
<li><a href="#">John
Elliott</a></li>
<li><a href="#">Jack Kelly</a></li>
<li><a href="#">J. Skylar
Testa</a></li>
<li><a href="#">Jonathan
Perkins</a></li>
</ul>
</li>
<li><a href="#">Connect</a></li>
</ul>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
Does anyone see what I am doing wrong? Also, when I insert it
as a SSI, does it matter if it is a file or a virtual?Create a page that contains ONLY this -
<p>woohoo</p>
and save it as woohoo.monkeybutt.
Then create another page, click in the Design view, and
insert a server-side
include. Browse to and select woohoo.monkeybutt.
Save this new page as "page.shtml".
Preview it in the browser (with temp files enabled in your
PREFERENCES).
'nuff said?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"jp3rks" <[email protected]> wrote in
message
news:[email protected]...
>I am new to using SSI. I guess one question is: does the
include have to be
> saved as a .shtm or .shtml file? I am trying to take a
Spry Navigation
> bar and
> use it as an include in a site I am building. I have
saved it as a .html
> file
> and a .shtml file, but neither is working. It shows up
in design view,
> but not
> preview in browser view. Here is the code of the SSI:
>
>
> <script src="../SpryAssets/SpryMenuBar.js"
> type="text/javascript"></script>
> <link href="../SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet"
> type="text/css" />
> <div>
> <ul id="MenuBar1" class="MenuBarHorizontal">
>
<a href="
http://www.j-boysentertainment.com">Home</a>
</li>
>
<a href="#" class="MenuBarItemSubmenu">Projects</a>
>
>
<a href="../pamperzpro.html">Pamperz
Pro</a></li>
>
> </li>
>
<a class="MenuBarItemSubmenu" href="#">Creative
Team</a>
>
>
<a href="#">Jeff Reed</a> </li>
>
<a href="#">John Elliott</a></li>
>
<a href="#">Jack Kelly</a></li>
>
<a href="#">J. Skylar Testa</a></li>
>
<a href="#">Jonathan Perkins</a></li>
>
> </li>
>
<a href="#">Connect</a></li>
>
> </div>
> <script type="text/javascript">
> <!--
> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
> {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
> imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
> //-->
> </script>
>
> Does anyone see what I am doing wrong? Also, when I
insert it as a SSI,
> does
> it matter if it is a file or a virtual?
> -
Does anyone know where there is a good tutorial for centering
spry menu bars? Can this be done by changing rules in the spry menu
.css file, or do I have to add code in code view? thanks!"mek113" <[email protected]> wrote in
message
news:fbruuf$56$[email protected]..
> I'm new to Spry Widgets and before I start in on
learning how they work,
> I'd
> like to know how compatible they are with all browsers.
Will user's need
> to
> download anything? Will they get the ActiveX message
like javascript and
> flash
> components? In other words, why would I want to use Spry
Widgets rather
> than
> Flash or javascript?
Spry widgets are nothing more than DHTML (JavaScript). They
work the same as
any other DHTML. If you like the way they work in your target
browsers and
the ease of which they are able to be made and modified
inside Dreamweaver,
then, by all means, use them. There is, however, nothing
really unique about
them beyond that they are simply new Javascript behaviors
included with
Dreamweaver CS3. I believe they will work well in most modern
browsers, but
to so well in some older browsers such as IE5.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design" -
PLEASE HELP!
I am building a website for my company using Dreamweaver for the very first time. I have a spry accordian menu on my page (that probably has nothing to do with my issue).
Next I added an iframe in the page to hold a vertical spry menu (since it will appear in other pages and I only want to edit it once. The menu was working fine until I did this.
Now that I embedded it in the iframe it is opening behind other things on the page. What can I do? Code is below:
<!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"><!-- InstanceBegin template="/Templates/Template_ABA_2011.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Arkansas Bankers Association</title>
<!-- InstanceEndEditable -->
<style type="text/css">
</style>
<link href="Dec28.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
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];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
</script>
<style type="text/css">
<!--
.style8 {
color: #CDDAE0;
font-weight: bold;
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
</head>
<body onload="MM_preloadImages('Images/HeaderHover_Files/images/aboutus_hover.png','Images/Head erHover_Files/images/education_hover.png','Images/HeaderHover_Files/images/banking_hover.p ng','Images/HeaderHover_Files/images/government_hover.png','Images/HeaderHover_Files/image s/products_hover.png','Images/HeaderHover_Files/images/partnership_hover.png','Images/Head erHover_Files/images/fraudcenter_hover.png','Images/HeaderHover_Files/images/consumer_hove r.png','Images/HeaderHover_Files/images/home_hover.png','Images/HeaderHover_Files/images/c ontactus_hover.png','Images/HeaderHover_Files/images/sitemap_hover.png','Images/Header_htm landimages/images/home_hover.png','Images/Header_htmlandimages/images/contactus_hover.png' ,'Images/Header_htmlandimages/images/sitemap_hover.png')">
<div id="wrapper">
<div id="header">
<div align="center" "top">
<!-- ImageReady Slices (header_seachinfrontofimage.psd) -->
<table id="Table_01" width="980" height="81" border="0" cellpadding="0" cellspacing="0" bgcolor="#2B4E74" >
<tr>
<td rowspan="2">
<img src="Images/header_and_search/images/logo.png" alt="" width="597" height="81" border="0"></td>
<td>
<img src="Images/header_and_search/images/home.png" alt="" width="250" height="33" border="0"></td>
<td>
<img src="Images/header_and_search/images/contact-us.png" alt="" width="65" height="33" border="0"></td>
<td>
<img src="Images/header_and_search/images/site-up'.png" alt="" width="68" height="33" border="0"></td>
</tr>
<tr>
<td colspan="3" valign="middle" background="Images/header_and_search/images/search-box.png" border="0"><form name="form1" method="post" action="">
<label>
<input name="search" type="text" id="search" value="Search by Keyword(s)" size="35">
</label>
<label></label>
<label>
<input name="submit2" type="image" id="submit2" src="Images/header_and_search/images/arrow.png" border="0" align="bottom">
</label>
</form> </td>
</tr>
</table>
<!-- End ImageReady Slices -->
<a href="www.arkbankers.org/aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Images/HeaderHover_Files/images/aboutus_hover.png ',1)"><img src="Images/HeaderFiles/images/aboutus.png" name="Image21" width="76" height="37" border="0" id="Image21" /></a><a href="education_training.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','Images/HeaderHover_Files/images/education_hover.p ng',1)"><img src="Images/HeaderFiles/images/education.png" name="Image22" width="133" height="37" border="0" id="Image22" /></a><a href="www.arkbankers.org/banking_news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','Images/HeaderHover_Files/images/banking_hover.png ',1)"><img src="Images/HeaderFiles/images/banking.png" name="Image23" width="99" height="37" border="0" id="Image23" /></a><a href="www.arkbankers.org/government_relations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','Images/HeaderHover_Files/images/government_hover. png',1)"><img src="Images/HeaderFiles/images/government.png" name="Image24" width="141" height="37" border="0" id="Image24" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','Images/HeaderHover_Files/images/products_hover.pn g',1)"><img src="Images/HeaderFiles/images/products.png" name="Image25" width="130" height="37" border="0" id="Image25" /></a><a href="www.arkbankers.org/partnership_opportunities.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','Images/HeaderHover_Files/images/partnership_hover .png',1)"><img src="Images/HeaderFiles/images/partnership.png" name="Image26" width="158" height="37" border="0" id="Image26" /></a><a href="www.arkbankers.org/fraud_center.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','Images/HeaderHover_Files/images/fraudcenter_hover .png',1)"><img src="Images/HeaderFiles/images/fraudcenter.png" name="Image27" width="94" height="37" border="0" id="Image27" /></a><a href="www.arkbankers.org/consumer_connection.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','Images/HeaderHover_Files/images/consumer_hover.pn g',1)"><img src="Images/HeaderFiles/images/consumer.png" name="Image28" width="149" height="37" border="0" id="Image28" /></a></div>
</div>
</div>
<div id="body">
<!--sidebar close -->
<table width="860" height="auto" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td width="3" rowspan="3" valign="top"> </td>
<td height="53" colspan="4" valign="top"><!-- InstanceBeginEditable name="Department_Heading" -->
<div align="center"><img src="Images/education_images/education_top.png" alt="Education and Training" width="805" height="150" /></div>
<!-- InstanceEndEditable --></td>
<td width="29" rowspan="2" valign="top"><table width="20" border="0" cellspacing="5" cellpadding="2">
<tr>
<td> </td>
</tr>
</table>
<br />
</td>
<td width="144" rowspan="2" valign="top"><img src="Images/Ads/ababannerad.jpg" width="140" height="325" /><br />
<br />
<img src="Images/Ads/Link_LiveEvents2010_CoverPic.jpg" width="144" height="186" /><br />
<br />
<img src="Images/Ads/SponsorshipBrochure2010_Link.gif" width="144" height="140" /></td>
</tr>
<tr>
<td colspan="4" valign="top" background="Images/bg_department_details.png"><table width="771" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="135" valign="top">
<!--begins table that holds the spry accordian -->
<!--table that holds education items 1 and 2 is inside the table that holds the spry accordian menu. -->
<!-- InstanceBeginEditable name="Department_SubMenu_Ads" -->
<iframe src="EducationMenu.html" width="145" height="auto" frameborder="0" scrolling="no"> </iframe>
<br />
<br />
<!-- InstanceEndEditable --> <br /></td>
<td width="616" valign="top"><div align="left">
<!-- InstanceBeginEditable name="Department_Details" -->
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">ABA LIVE EVENTS</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/Live.png" width="150" height="110" align="left" /><br />
The Arkansas Bankers Association is your organization, dedicated to serving the needs of Arkansas bankers. If you are an employee of an ABA-member financial institution, then you are an ABA member. Our educational offerings are available in a variety of formats to make training as convenient, timely and cost effective as possible.<br />
<a href="educ_liveevents.html">View All Live Events</a> <a href="educ_liveevents.html"><img src="Images/more_arrow.png" width="12" height="12" border="0" /></a><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">ABA WEBINAR LIBRARY</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinar_Library.png" width="150" height="124" align="left" /><br />
The Arkansas Bankers Association is your organization, dedicated to serving the needs of Arkansas bankers. If you are an employee of an ABA-member financial institution, then you are an ABA member. Our educational offerings are available in<br />
a variety of formats to make training as convenient, timely and cost effective as possible. We encourage you to explore all the training options available to you.<br />
<a href="Jan5_2.html">View Webinar Library <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /><br />
</a><br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">COMPUTER BASED IN-HOUSE</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/ComputerBasedInHouse.png" width="150" height="110" align="left" /><br />
The Arkansas Bankers Association is your organization, dedicated to serving the needs of Arkansas bankers. If you are an employee of an ABA-member financial institution, then you are an ABA member. Our educational offerings are available in a variety of formats to make training as convenient, timely and cost effective as possible. <br />
<a href="Jan5_2.html">View Computer Based In-House Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">WEBINARS & PODCASTS</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinars_Podcasts.png" width="150" height="110" align="left" /><br />
A webinar is an enhanced telephone seminar. The audio portion is delivered by speaker phone. You may also view a corresponding PowerPoint presentation by PC.
&A. You will receive a PIN, materials and instructions prior to the seminar.<br />
<a href="Jan5_2.html">View Webinars & Podcasts <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">SELF-PACED ONLINE</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/SelfPacedOnline2.png" width="150" height="104" align="left" /><br />
ABA eLearning includes over 60 courses and 200 hours of training in the retail, small business, personal trust, compliance, and
management development areas.<br />
<br />
<strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001">Register/Enroll/Take a Demo - </a></strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001" target="_rpbrowser"><strong>Take the Demo Now</strong></a><strong> </strong> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
<a href="Education/ABA_eLearning_Price_and_Credit_List%20Jan_10.xls" target="_rpexternal">Brochure & Pricing</a> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">INSTRUCTOR LED ONLINE</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/InstructorLedOnline2.png" width="150" height="110" align="left" /><br />
Your instructor posts weekly assignments which includes a reading (either textbook or online) and homework is submitted through the discussion board or via email. You complete each at your convenience and take a weekly quiz. Exams (proctored midterms and/or finals) are all taken online. Your instructor is available to provide feedback and answer questions. <a href="Jan5_2.html">View Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><strong>ANNUAL CONVENTION</strong></div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/Convention.png" width="160" height="106" align="left" /><br />
New Rules, New Opportunities, New Banking Environment<br />
<br />
<strong>121st Annual Arkansas Bankers Association Convention & Tradeshow</strong><br />
The Peabody Hotel & Statehouse Convention Center, Little Rock, Arkansas<br />
May 4-6, 2011 - <strong><em>Brochure Coming Soon!</em></strong><br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><strong>BANK MANAGEMENT SEMINAR</strong></div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/BankManagementSeminar.png" width="124" height="106" align="left" />Open to our Bank Members, Associate Members and non-members, this annual event will be held at Hilton Branson Convention Center in Branson, Missouri.<br />
<br />
<strong>2011 Bank Management Seminar</strong><br />
Hilton Branson Convention Center, Branson, Missouri.<br />
August 4-6, 2011<br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><strong>E<strong>MERGING LEADERS LEADERSHIP CONFERENCE</strong></strong></div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/LeadershipConference.png" width="160" height="106" align="left" />Make plans to join us for the 2011 conference in order to network with your peers, further your education and leadership skills, and accelerate your banking career!<br />
<br />
<strong>2011 ELS Leadership Conference</strong><br />
Doubletree Hotel and Robinson Center, Little Rock, Arkansas<br />
July 21-22, 2011<br />
<br />
</div>
</div>
</div>
<br />
<br />
<!-- InstanceEndEditable -->
<div align="left"></div>
<p align="left""top"> </p>
<p> </p>
</div></td>
</tr>
</table>
<!-- InstanceBeginEditable name="Extras" -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
<!-- InstanceEndEditable --><br /> </td>
</tr>
</table>
<p> </p>
</div>
<!--body close -->
</div>
<div id="footer">
<table width="800" border="0" align="center" cellpadding="2" cellspacing="5">
<tr>
<td>Footer Contents Here</td>
</tr>
</table>
<br />
</div>
</body>
<!-- InstanceEnd --></html>I frame should not be used in this situation because its contents are not in the same flow as the main document.
You are far better off using serverside includes as per following article http://foundationphp.com/tutorials/sprymenu/ssi.php
Gramps -
I am new to Dreamweaver, teaching myself through online tutorials and have faired pretty well until now.
I have been building a website as a digital porfolio and now that I have more pages, managing the spry menu I initally created is becomeing more difficult.
So far, every time I add a page I update the spry menu bar on the main page, then copy and paste it onto all the pages that have the same menu and then re-upload every page to the internet. (Very Tedious)
I would like to create a master or template spry menu bar, that I can update that will automaticlly update on all pages using the same menu.
All the tutorials I have found have been on how to crate and poupulate the menu, so if someone could dirrect me to a tutorial more fit for what I'm trying ot achieve, I owuld be greatly appreciative.
If you like you can look at hte menubar I am refferign to at http://mgarito.com/Portfolio/Portfolio.html (only the tabs Graduate and Undergard have been populated with data thus far)Heya Michael,
It may be that you're not using the correct file directory to point to your include file. If MenuBar.php is in the root of your site and the include is in a different directory you may have to insert the include with preceding ../ to point to the include file in a higher directory.
<?php include("../../spry_menu.php"); ?>
Also in MenuBar.php insert only the spry menu code not the doctype, head, body, etc. what I'd do is put the head js and css in the pages you have the menu bar and just put this in MenuBar.php
<ul id="PortfolioMenuBar" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="http://mgarito.com/Portfolio/Graphic/PlexiPlates/PlexiPlates.html">Graduate</a>
<ul>
<li><a href="http://mgarito.com/Portfolio/Graduate/TransbayHSR/TransbayHSR.html">Transbay HSR</a></li>
<li><a href="http://mgarito.com/Portfolio/Graduate/Firefly/Firefly.html">Firefly</a></li>
<li><a href="http://mgarito.com/Portfolio/Graduate/Gem/Gem.html">Gem</a></li>
<li><a href="http://mgarito.com/Portfolio/Graduate/LiveWork/LiveWork.html">Live / Work</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Undergrad</a>
<ul>
<li><a href="http://mgarito.com/Portfolio/Undergraduate/NYC/NYC.html">NYC Gateway</a></li>
<li><a href="http://mgarito.com/Portfolio/Undergraduate/ReadingRoom/ReadingRoom.html">Reading Room</a></li>
<li><a href="http://mgarito.com/Portfolio/Undergraduate/AfricanArtMuseum/AfricanArtMuseum.html">African Art Museum</a></li>
<li><a href="http://mgarito.com/Portfolio/Undergraduate/DoorWindowStair/DoorWindowStair.html">Door Window Stair</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Lighting</a>
<ul>
<li><a href="#" class="style8">Welded Wire Lamp</a> </li>
<li><a href="#">Tower Lamps</a></li>
<li><a href="#">Cantilever Lamp</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Furniture</a>
<ul>
<li><a href="http://mgarito.com/Portfolio/Furniture/Easel/Easel.html">Easel</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Fashion</a>
<ul>
<li><a href="http://mgarito.com/menubartest2.php">Accessories</a></li>
<li><a href="http://mgarito.com">Clothing</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Graphic</a>
<ul>
<li><a href="http://mgarito.com/Portfolio/Graphic/PlexiPlates/PlexiPlates.html">Plexi Plates</a></li>
<li><a href="http://mgarito.com/Portfolio/Graphic/Pastel/Pastel.html">Pastel</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("PortfolioMenuBar", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script> -
The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP by David Powers
The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and
PHP by David Powers:
Would this book help me learn about Spry and Ajax and how
applications can be made with them, if I my e-commerce site runs on
a compiled C code shopping cart (ShopSite) but supports PHP
server-side scripts or is it only for shopping carts based on PHP
itself (like X-Cart)?
I am not sure. Someone please let me know so I can purchase
this book. Thanks.ahsenabro wrote:
> 1. Do I have to be a developer/programmer in order to
learn from this book or
> can a tech-savvy entrepreneur can also get some gems out
of it and direct his
> programmer?
You don't need any prior knowledge of Ajax or PHP, but you do
need to
know the basics of HTML and CSS. As I say in the
introduction, "You
don't need to be an expert, but you do need to have an
inquiring mind.
It doesn't teach the basics of web design, nor does it
attempt to list
every single feature in Dreamweaver CS3. There are plenty of
other books
to fill that gap. However, by working through this book,
you'll gain an
in-depth knowledge of the most important features of
Dreamweaver."
> 2. I am interested in purchasing this book mainly to
implement cool Ajax/Spry
> stuff on my e-commerce site. I am asking about PHP
because the book's content
> mentions making a PHP site. Now I realize this book is
not about shopping
> carts, but the Ajax/Spry stuff can be implemented on
e-commerce sites, right?
The book provides detailed coverage of the Spry 1.4 features
in
Dreamweaver CS3, which can be applied to any site. With minor
adaptation, you can also use Spry 1.6. It's important to
realize,
though, that the Spry/Ajax features in Dreamweaver CS3 do
*not* cover
asynchronous requests to the server. The ability to
communicate
asynchronously with the server was added in Spry 1.6. If it's
asynchronous server calls and responses that you're after,
your
programmer will need to dig around in the Spry 1.6
documentation on the
Adobe Labs site, and hand-code it.
The Spry features covered in the book are Spry Effects, Spry
UI widgets
(menu, accordion, tabbed panels, and collapsible panels),
Spry
Validation Widgets, and Spry XML Data Sets.
> I just want to know if I can learn and implement
Ajax/Spry apps on my
> simple HTML/CSS-based pages, on a server which allows
server-side PHP scripts
> but the pages themselves are not with .php extension. Is
this book still going
> to be applicable?
Yes. All the Spry techniques can be used on any web page. It
doesn't
need to be a PHP one.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/ -
I'm new to Spry Widgets and before I start in on learning how
they work, I'd like to know how compatible they are with all
browsers. Will user's need to download anything? Will they get the
ActiveX message like javascript and flash components? In other
words, why would I want to use Spry Widgets rather than Flash or
javascript?"mek113" <[email protected]> wrote in
message
news:fbruuf$56$[email protected]..
> I'm new to Spry Widgets and before I start in on
learning how they work,
> I'd
> like to know how compatible they are with all browsers.
Will user's need
> to
> download anything? Will they get the ActiveX message
like javascript and
> flash
> components? In other words, why would I want to use Spry
Widgets rather
> than
> Flash or javascript?
Spry widgets are nothing more than DHTML (JavaScript). They
work the same as
any other DHTML. If you like the way they work in your target
browsers and
the ease of which they are able to be made and modified
inside Dreamweaver,
then, by all means, use them. There is, however, nothing
really unique about
them beyond that they are simply new Javascript behaviors
included with
Dreamweaver CS3. I believe they will work well in most modern
browsers, but
to so well in some older browsers such as IE5.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design" -
Problem with .css for Spry menu
Hi,
I am having a problem with the Spry menu I have created and edited. All looks great in the Design view of Photoshop however under the Live view or opened using a browser the menu reverts to a list of hyperlinks!
I have checked the .css link but when using Firefox CSS editor the CSS file for the menu is simply blank?
Any suggestions would be great!
Thanks,
OzanYour SpryMenuBarHorizontal.css needs to be within your SpryAssets folder, which is where it would have been put automatically when you inserted the SpryMenuBar. You can move it back in there using the Files Panel.
Here is what the file structure needs to look like:
SpryAssets
SpryMenuBar.js
SpryMenuBarHorizontal.css
cssstyletemplate.css
index.html (or whatever the name of your page is)
Hierarchally, the top level of your root folder will show folders for SpryAssets and css and the html pages will be on the same level.
The Spry assets themselves will be down a level IN the SpryAssets folder, as the styletemplate.css file will be down a level IN the css folder.
In the head of the document, you will have
<link rel="stylesheet" type="text/css" href="css/styletemplate.css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="SpryAssets/SpryMenuBarHorizontal.css" />
At the end, remove the slash before Spry inside the imgDown and imgRight sections:
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
Compare these with your files and file structure and correct any small typos, and they should be correctly linked.
Beth -
My VerticalTabs Spry widget not working - help
My HTML file:
<!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>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #ffdcb2;
margin: 0px;
padding: 0px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
a:link {
color: #42413C;
text-decoration: none;
a:visited {
color: #42413C;
text-decoration: none;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: underline;
/* ~~ this fixed width container surrounds all other divs~~ */
.container {
width: 1136px;
background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 18px;
top: 0px;
background-color: #ffdcb2;
background-image: url(images/01-Pocetna-strana_08.png);
background-repeat: repeat-y;
background-position: right top;
height: 2026px;
.content {
width: 1100px;
float: left;
height: 145px;
top: 0px;
background-color: #FFF;
.sidebar2 {
float: left;
width: 18px;
top: 0px;
background-color: #ffdcb2;
background-image: url(images/images/01-Pocetna-strana_04.png);
background-repeat: repeat-y;
background-position: left top;
height: 2026px;
padding: 0px;
/* ~~ miscellaneous float/clear classes ~~ */
.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. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.apDiv7 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
padding-top: 6px;
padding-right: 0px;
padding-left: 26px;
background-color: #FFF;
height: 53px;
width: 1100px;
background-image: url(images/01-Pocetna-strana_12.png);
background-repeat: repeat-x;
-->
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
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];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('images/01-akcija-popust-seva-obelezavanje.png','images/01-Bezbe dnosno-obelezavanje.png')">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" top="0px">
<tr>
<td>
<div class="container">
<div class="sidebar1"><!-- end .sidebar1 --> </div>
<div class="content">
<div id="wrap">
<div id="apDiv2" style="position: inherit; left: 151px; top: 0px; width: 1100px; height: 145px; z-index: auto"><img src="images/01-poslovno-obelezavanje-header.png" width="1100" height="145" alt="poslovno obelezavanje header"></div>
<div class="apDiv7" id="apDiv7" style="position: inherit; left: 135px; top: 145px; width: 1100px; height: 53px; z-index: auto"><a href="SEVA-PORTAL.html">ŠEVA-PORTAL</a> | <a href="#" target="_self">Početna strana</a> | <a href="O-nama.html">O nama</a> | <a href="01-Reference.html">Reference</a> | <a href="Kontakt.html">Kontakt</a> | <a href="01-Kako-do-nas.html">Kako nas naći</a></div>
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><img src="images/01-Glavni-spoljni-natpis.png" name="Image2" width="240" height="163" border="0" id="Image2" /></li>
<li class="TabbedPanelsTab" tabindex="10"><img src="images/01-Spoljni-putokazi.png" name="Image3" width="240" height="163" border="0" id="Image3" /></li>
<li class="TabbedPanelsTab" tabindex="20"><img src="images/01-Centralna-INFO-tabla.png" width="240" height="163" /></li>
<li class="TabbedPanelsTab" tabindex="30"><img src="images/01-Spratna-INFO-tabla.png" width="240" height="163" /></li>
<li class="TabbedPanelsTab" tabindex="40"><img src="images/01-Unutrasnji-putokazi.png" width="240" height="163" /></li>
<li class="TabbedPanelsTab" tabindex="50"><img src="images/01-Obelezja-prostorija.png" width="240" height="163" /></li>
<li class="TabbedPanelsTab" tabindex="60"><img src="images/01-Oglasne-table-i-vitirine.png" width="240" height="163" /></li>
<li class="TabbedPanelsTab" tabindex="70"><img src="images/01-Ostale-oznake.png" width="240" height="163" /></li>
<li class="TabbedPanelsTab" tabindex="90"><img src="images/01-Bezbednosno-obelezavanje.png" width="240" height="188" /></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="apDiv1" style="position: fixed; left: 661px; top: 209px; width: 361px; height: 51px; z-index: auto"><img src="images/02-Glavni-spoljni-natpis.png" width="361" height="51" alt="seva, novi sad, beograd, poslovno, obelezavanje, oznake, prostor, poslovni, opstina, hotel, centar, oznaka, oznake" /></div>
</div>
<div class="TabbedPanelsContent">
<div id="apDiv1" style="position: fixed; left: 698px; top: 211px; width: 287px; height: 40px; z-index: 1"><img src="images/03-Spoljni-putokazi.png" width="287" height="40" alt="seva, novi sad, beograd, poslovno, obelezavanje, oznake, prostor, poslovni, opstina, hotel, centar, oznaka, oznake, srbija" /></div>
</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 class="TabbedPanelsContent">Content 7</div>
<div class="TabbedPanelsContent">Content 8</div>
<div class="TabbedPanelsContent">Content 9</div>
</div>
</div>
</div>
</div>
<div class="sidebar2">
</div>
<!-- end .container --></div>
</td>
</tr>
</table>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
and my modified SpryTabs CSS file is:
@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.
/* 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 {
overflow: hidden;
margin: 0px;
padding: 0px;
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-left: 10px;
/* 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;
float: left;
background-color: #FFF;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 240px;
margin-bottom: 10px;
/* 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-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
padding-left: 11px;
height: auto;
width: auto;
/* 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 {
overflow: hidden;
padding: 0px;
/* 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 {
background-image: url(../images/01-Pocetna-strana_23.png);
background-repeat: repeat-y;
background-position: left top;
height: auto;
width: auto;
padding-left: 11px;
/* 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".
.VTabbedPanels {
overflow: hidden;
zoom: 1;
/* 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: 240px;
height: auto;
background-color: #FFF;
position: relative;
/* 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;
/* [disabled]border-top: none; */
/* [disabled]border-left: none; */
/* [disabled]border-right: none; */
height: auto;
width: 240px;
/* 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: #FFF;
width: 240px;
height: auto;
/* 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: auto;
height: auto;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
I got preview in any browser OK, like I wanted but clicking on tabs not working and they not switching content per each tab. I maked tabindexes: 0, 10, 20,30, 40, 50, 60, 70, 80, 90 and nothing works.
Where is problem?But the tabs do work and the content does show!
Clicking the first two tabs causes the content to fly over to the right, outside of the content panel, exactly as the style rules tell it to.
Clicking the other 7 tabs causes the content to show aligned to the left within the content panel, again as per the style rules.
The total height of the tabs is 882 px including the bottom margins.
The height of the content panels varies with the content, in case of the first two tabs there is no content contained within the content panel thus the height is zero; of the remaining content panels the height is about 1.5x the height of one line.
In other words there are no surprises except for the fact that it would have been better not to have used the SpryTabbedPanels widget for this.
Of course I am supposing that you have changed the personality of the TabbedPanel widget on purpose.
If this is not the case then a good start will be
to get rid of the modified SpryTabbedPanels.css and re-instate the original.
to get rid of the all of the apDiv's including those inside the content panel.
to reduce the overall height of the tabs to a manageable height by reducing the height of the images.
Gramps -
Dreamweaver CS4 Errors, Spry widget not working. Please Help!
I am redesigning a website and downloaded an html file from the present contact page. I opened it in Dreamweaver and I started to have this errors. The html file I opened has some JavaScripts in it and I believe, the the scripts got a conflict with Dreamweaver CS4. I already deleted these files I tried to open and still I'm encountering these errors.
These are the errors I'm getting:
1. When I open the Dreamweaver, this message pop-ups:
"While executing onLoad in RecordsetFind.htm, the following JavaScript error(s) occured:
In file "RecordsetFind"
findRs is not defined."
2. I click OK. Then I'm getting this message:
"While executing onLoad in Design Notes_onOpen.htm, the following JavaScript error(s) occured:
In file "Design Notes_onOpen"
onOpen is not defined."
3. I just click OK. Then, when I open an html file to edit or create a new one, this error pops up again:
"While executing onLoad in Design Notes_onOpen.htm, the following JavaScript error(s) occured:
In file "Design Notes_onOpen"
onOpen is not defined."
4. I will again just click OK, then this error appears:
"The following translators were not loaded due to errors:
Coldfusion.htm: has configuration information that is invalid.
SpryWidget.htm: has configuration information that is invalid."
5. Then, I will just click OK again. Then, when I'm working with the projects or creating a new project with Spry, it is not working properly anymore. I have to go the code and update the Spry list or content manually.
6. When I close Dreamweaver, I'm always having this error:
"While executing onLoad in TeamAdminTempDelete.html, the following JavaScript error(s) occured:
In file "TeamAdminTempDelete"
delTempFile is not defined"
I tried uninstalling the Dreamweaver and installing it again, but it did not work.
What should I do to make the spry working again and to remove all these annoying errors? By the way, all my Spry widgets are not working and these errors I'm encountering in all of the Sites I'm working on. How can I make it work again? I tried looking for troubleshoot in CS4, but I could not see one, only in CS3.
Please help.See if the following helps (found in Dreamweaver FAQ)
JavaScript and other unexpected errors
Mark A. Boyd
Keep-On-Learnin' :-)
This message was processed and edited by Jive.
It shall not be considered an accurate representation of my words.
It might not even have been intended as a reply to your message. -
Hi, I have recently created a website using Dreamweaver. I don't know much coding at all so I did it using the design view. It is a very basic site. Just one page, styled with CSS and with Spry Tabbed Panels to reveal 4 different 'pages'
I have uploaded my website folder to the server via ftp but none of the CSS, images or spry are displaying.
I uploaded one folder which contained 2 subfolders and one html file
-SubFolder 1: Spry Assets
-SubFolder 2: Images
-index.html (with internal .css)
I can see that the folders have been uploaded but for some reason they are not being read. I would really appreciate some help as my web host says they can't help me. I can send you the html file or whatever you need if you would like to take a look. It really is a very simple website so i'm sure it wouldn't take one of you geniuses very long to figure it out!
CheersThanks for your quick responses guys! Hopefully I can reach a solution with this.
In answer to your questions:
- Yes, I defined a local site folder in Dreamweaver. That is the folder I uploaded via ftp.
-Am I working with valid code? I don't know. I have not touched any of the code. I used 'design view' in Dreamweaver. Previewed in Firefox, Safari and IE and it works with no problems.
Below is the code for index.html and below that is the css code for spry tabbed panels.
index.html:
<!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>DMH Window Cleaning</title>
<style type="text/css">
.main {
background-color: #0e414f;
height: 480px;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
.right {
background-color: #FFF;
float: left;
height: 440px;
width: 460px;
border-right-width: 20px;
border-right-style: solid;
border-right-color: #0e414f;
margin-top: 20px;
.logo {
float: left;
border-right-width: 20px;
border-left-width: 20px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #0e414f;
border-left-color: #0e414f;
margin-top: 20px;
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main"><img src="images/DMHLogo.png" width="440" height="440" class="logo" />
<div class="right">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">HOME</li>
<li class="TabbedPanelsTab" tabindex="0">SERVICES</li>
<li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
<li class="TabbedPanelsTab" tabindex="0">CONTACT</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<h1>DMH Window Cleaning is your local window cleaning service for Ipswich, Martlesham and Kesgrave. </h1>
<p> </p>
<p>DMH offers an interior and exterior window cleaning service for domestic and commercial properties. </p>
<p>We have been providing a professional, reliable and regular window cleaning service to hundreds of happy customers for the past 16 years. </p>
<p> Just use the links above find out more, alternatively <br />
send us an email or request a free quote</p>
<h2> </h2>
</div>
<div class="TabbedPanelsContent">
<h1>We offer a range of services to domestic and commercial properties</h1>
<p>Services: </p>
<ul>
<li> Window Cleaning Interior and Exterior</li>
<li> Guttering</li>
<li> UPVC Cleaning</li>
<li> Conservatories </li>
<li>Domestic Properties </li>
<li> All sills included free</li>
</ul>
<p> </p>
<p><span class="servicesHeading"><strong>Domestic Properties<br />
</strong></span>
- Services offered on a once a month basis </p>
<p><span class="servicesHeading"><strong>Commercial Properties<br />
</strong> </span>
- Services offered on a weekly, two weekly or monthly basis.</p>
</div>
<div class="TabbedPanelsContent">
<h1>We have been providing a professional and reliable window cleaning service for the past 16 years</h1>
<p class="quoteboxes">"DMH has been our window cleaner for many years and<br />
I would have no hesitation in recommending him. David<br />
is quick, reliable and does a great job!"<br />
<strong class="QuoteName">Ruth Carley, General Manager, Punch and Judy, Ipswich</strong></p>
<p class="quoteboxes">"David works to a high standard and is professional, he<br />
cleans the inside and outside of Jamie Cann House. David <br />
is punctual and reliable"<br />
<strong class="QuoteName">Teresa Page, Jamie Cann House, Ipswich</strong></p>
</div>
<div class="TabbedPanelsContent">
<h1>Request a free, no obligation quote<br />
</h1>
<p>If you would like to request a no obligation quote then please do so by email or phone. </p>
<p>email: [email protected]<br />
phone: xxx</p>
<p><strong>Payment</strong></p>
<p>Please make cheques made payable to:<br />
'DMH Window Cleaning'</p>
<p>and post to:<br />
6 Bramley Hill<br />
Ipswich<br />
IPX XXX</p>
<p>We also accept cash in person. Details will be posted through your door once the job has been completed.</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Then I also have a separate 'Spry Assets' folder which has 2 files in it.
1. SpryTabbedPanels.js
2. SpryTabbedPanels.css
the css code for tabbed panels is:
@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.
/* 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 {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
background-color: #0e414f;
/* 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;
background-color: #d7df25;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
text-align: center;
width: 115px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-bottom: 10px;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
color: #0e414f;
/* 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: #d7df25;
font-size: 12px;
/* 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: #0e414f;
color: #d7df25;
font-size: 12px;
/* 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;
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 {
overflow: hidden;
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible .quoteboxes strong {
padding-top: 5px;
.QuoteName {
padding-top: 20px;
line-height: 20px;
/* 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 {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
.TabbedPanelsContent h1 {
color: #0e414f;
font-family: Arial, Helvetica, sans-serif;
line-height: 20px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #d7df25;
padding-bottom: 10px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #d7df25;
padding-top: 10px;
li {
color: #0e414f;
.servicesHeading {
.TabbedPanelsContent h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0e414f;
.quoteboxes {
background-image: url(../images/quotebox2.png);
height: 105px;
background-repeat: no-repeat;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
width: 400px;
.quoteRight {
background-image: url(../images/quoteboxright.png);
background-repeat: no-repeat;
height: 100px;
.TabbedPanelsContent P {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0e414f;
/* 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".
.VTabbedPanels {
overflow: hidden;
zoom: 1;
/* 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: relative;
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;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
h1 {
font-weight: bold;
.bottomBox {
background-color: #0e414f;
width: 1020px;
margin-right: auto;
margin-left: auto;
.box {
background-color: #0e414f;
width: 900px;
Maybe you are looking for
-
My Iphone will not update from 4.2.1to the latest 4.3.3
When i go on itunes and check for updates it comes up that 4.2.1 is the lastest update. my itunes is fully updated to 10.4. Can anyone help?
-
Running newly installed Elements 12 on Vista laptop. Install worked fine. Can open it and run the ORGANIZER OK but, when I click on EDITOR, it hangs my computer after giving it my adobe password. I Have to use Task Manager (Ctrl-Alt-Delete) to exit
-
Hi Experts, Please help. I am PP consultant. I have created sales order and now I am creating production order against that sales order but system shows following error. Sales order has no CO object Diagnosis The production order should be settled on
-
/SAPTRX/IDOC_INPUT_EVMSTA IDoc posting only works for single BAPI call
Although the settings and code imply that the function /SAPTRX/IDOC_INPUT_EVMSTA can handle multiple events in a single IDoc the fact is that the code does not have a refresh statement on the BAPI internal tables with the loop through the IDoc contro
-
i have a character Order Number Now in report for some set of data i have to show, Number of orders i think i need to use Counter in order to do that? yes/no how to use that lets say for month of January, user want to see the total # of orders for St