Spry CSS

I am using spry on an FAQ page and it works fine but I want
some panels to open a certain height like 100px and others to open
200px. I copied the CSS and changed the height and then changed the
name of the class. When I use the first class it works fine but the
second content div I use a different class and it doesn't work it
still acts like the first class. How can I stop the first class
attributes for height so my other panel content areas can have
their own CSS.
I also would love to understand how to make the js work so
the content panel can expand to just the size needed for the
content. I tired height: auto; and it did not work.

Oh, yes...
Congratulations!
Take care,
Tim
"TC2112" <[email protected]> wrote in message
news:g4c1tn$40c$[email protected]..
> Hello,
>
> You can just make a copy of the spry CSS stylesheet and
change the name to
> something like
> SpryAccordianWedding.css
> Make sure it is in the same folder as the original spry
stylesheet.
>
> Use this "new" stylesheet to style the spry on the
wedding pages.
> Change the link on the wedding page to reference this
new sheet:
> <link href="../SpryAssets/SpryAccordianWedding.css"
rel="stylesheet"
> type="text/css" />
>
> Take care,
> Tim
>
>
> "smitz123" <[email protected]> wrote in
message
> news:g4bvpe$1rb$[email protected]..
>> Hello,
>>
>> I started building a website for my work and have
set up several sprys
>> and
>> custonized them using the CSS panel like you should.
All the Spry seemed
>> to
>> work fine on the page just how I wanted them to.
Then I started to do a
>> webpage for my upcoming wedding. I am using the same
site to also host
>> my
>> wedding site. Unfortunitly when I change the tabbed
panel spry on one it
>> changes the other. I understand the CSS is a form of
standardization for
>> websites but is there a way to seperate these two
sprys so when I change
>> one
>> the other does not change? I imagine there is but I
cannot figure it
>> out. If
>> someone knows how I could really use the help,
please be pretty detailed
>> as I
>> am still pretty new to Dreamweaver but I have been
using Adobe products
>> for
>> years now. The two sites in question are:
http://www.ZESstudio.com and
>>
http://www.ZESstudio.com/zachandbevinwedding.html
and you can see the
>> error on
>> the About us page on my wedding website. Thanks so
much for your help!
>>
>> -Zach
>>
>
>

Similar Messages

In the spry css menu, how do i know what does what?

I have two questions,
(1) In the spry css menu, is it just a case of trial and error to find out what each one does or is there a recognisable freature of each line to tell me what each one does, there are so many of them and most of them are alike. I cant help thinking there is a simple way of identifying what each one does without having to search around in the dark until i stumble on the right one that dose what i am trying to tweak in the appearance of the menu bar.
(2) When I am inserting the data for each of the navigation links when i first insert the spry menu I.E.... HOME...ABOUT...COURSES....CONTACT and the list items under "COURSES" link successfully to each page when clicked in the browser. When i click the "HOME" button, a drop down menu of the navigation options ( HOME...ABOUT...COURSES...CONTACT) appears under it. How do I eliminate this when i insert the spry menu bar so it does not appear in the browser.

Have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Have proper markup.
Although the above are true answers to your questions, I have reason to believe that it will not satisfy you. Remember that these are user to user forums and that we do not have much time to spare. We can answer most specific questions, but do not have the time to answer generic questions to their fullest extent.
What I am trying to say is, please supply a link to your site with a specific question and we will help where we can.
Gramps

Multiple Spry CSS files?

I'm wondering if it's possible to have more than one style
sheet for, in this case, Spry Tabbed Panels. I'd like to have a
couple of different looks for tabbed panels in the site on which
I'm working and want be able to do that will CSS. So...
1) Is it possible?
2) Is there a specific naming convention, (i.e.,
"SpryTabbedPanels1.cs")?
3) Presumably they would need to be stored in the SpryAssets
folder???
Thanks - JAY

This is a multi-part message in MIME format.
------=_NextPart_000_01A6_01C8568B.7814C890
Content-Type: text/plain;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
Sure, it's completely possible. Create new CSS style sheets
that contain =
your revised styles and then link to them after the link to
the standard =
Spry CSS files. There's no standard naming convention and you
can store =
it wherever you'd like.
Best - Joe
Joseph Lowery
VP of Marketing, WebAssist
Author, Dreamweaver CS3 Bible
"LumberBisquit" <[email protected]> wrote
in message =
news:[email protected]...
I'm wondering if it's possible to have more than one style
sheet for, =
in this=20
case, Spry Tabbed Panels. I'd like to have a couple of
different looks =
for=20
tabbed panels in the site on which I'm working and want be
able to do =
that will=20
CSS. So...
1) Is it possible?
2) Is there a specific naming convention, (i.e., =
"SpryTabbedPanels1.cs")?
3) Presumably they would need to be stored in the SpryAssets
=
folder???
Thanks - JAY
------=_NextPart_000_01A6_01C8568B.7814C890
Content-Type: text/html;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML><HEAD>
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Diso-8859-1">
<META content=3D"MSHTML 6.00.6000.16587"
name=3DGENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=3D#ffffff>
<DIV><FONT face=3DArial size=3D2>Sure, it's
completely possible. Create =
new CSS=20
style sheets that contain your revised styles and then link
to them =
after the=20
link to the standard Spry CSS files. There's no standard
naming =
convention and=20
you can store it wherever you'd
like.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2>
<P>Best - Joe</P>
<P>Joseph Lowery<BR>VP of Marketing, <A=20
href=3D"
http://www.webassist.com/">WebAssist</A><BR>Author,
<A=20
href=3D"
http://www.idest.com/dreamweaver/">Dreamweaver
CS3=20
Bible</A></P></FONT></DIV>
<BLOCKQUOTE=20
style=3D"PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT:
5px; =
BORDER-LEFT: #000000 2px solid; MARGIN-RIGHT: 0px">
<DIV>"LumberBisquit" <<A=20
=
href=3D"mailto:[email protected]">[email protected]=
</A>>=20
wrote in message <A=20
=
href=3D"news:[email protected]">news:fme7c4$npe$1@forums=
.macromedia.com</A>...</DIV>I'm=20
wondering if it's possible to have more than one style sheet
for, in =
this=20
<BR>case, Spry Tabbed Panels. I'd like to have a
couple of different =
looks for=20
<BR>tabbed panels in the site on which I'm working and
want be able to =
do that=20
will <BR>CSS. So...<BR><BR> 1) Is
it possible?<BR> 2) Is =
there a=20
specific naming convention, (i.e., =
"SpryTabbedPanels1.cs")?<BR> 3)=20
Presumably they would need to be stored in the SpryAssets=20
folder???<BR><BR> Thanks -
JAY<BR></BLOCKQUOTE></BODY></HTML>
------=_NextPart_000_01A6_01C8568B.7814C890--

Spry css ERROR when validating

These are the errors I got when attempting to validate my
spry css - does anyone know how i fix them.
Cheers Kylie
56 .AccordionPanelTab Property -moz-user-select
doesn't exist : none
57 .AccordionPanelTab Property -khtml-user-select
doesn't exist : none

I have to say as someone new to web-design, I really don't understand why this won't validate..
I mean, I get the technical side of it - that mozilla and linux require additional or different coding to appear and act the way it's intended to. But why even have validation then? Why have codes that specify one complete set of rules - when every browser acts, behaves, and appears differently? If w3 standards are to be obeyed, then why are non-compliant browsers still used?
For example, when create a .css - that stylesheet should define the style in all browsers. I shouldn't, in my opinion anyway, need various hacks to compensate for specific instances. That's what standards are (supposed to be) for! To eliminate the need for special and extreme instances!
It seems to me (again, a newbie to all of this - so I don't want anyone to think I'm challenging them, just seeking answers), that either the browsers that refuse to comply to the same set of standards should be slowly weeded out by those of us who refuse to use them for their negligence, or that w3 standards should be completely ignored for their inability to represent all browsers.
or maybe everyone just needs some time to catch up? I'd love your opinion on this, Mr. Powers.

CS3 Spry css question

I know basic tableless css, my question is instead of a regular navigation bar I need to use the spry widget for a dropdown navigation bar on an exisitng html page. I'm able to insert the spry in the correct spot on the .html page and get it to work but I have a css sheet already attached to the page I need to know if I can just select all the css from the spry css page and insert it inside my attached css page?
Any help?

Yes, you can move the styles, but in my opinion, it is safer to maintain the Spry CSS assets in their own file, safe from inadvertent deletion or harm. There is an inherent logic to the order of styles in the Spry CSS sheets, and you might lose the wisdom of the comments not to mention the orderly consistency as well.
You may link many style sheets to your .html pages...you are not limited to one per page.
By using several CSS files attached to one page, you can also have a separate style sheet for different media: one for the Screen, one for Print, one for a Handheld device. There's no reasonable way to keep all these varying uses for different style sheets all one ONE sheet. The Printer will look for your main style sheet AND at the overriding styles in the print style sheet, for instance, so you don't need to print the nav bar when what you want is a print of the content.
Z
You do, of course, need to NAME the CSS files with distinct names, for instance, global.css, print.css, handheld.css.
Message was edited by: Zabeth69

Photo gallery using Spry/CSS?

I have done a spry gallery, by replacing images from a
tutorial. tried to center the page within the browsers windows by
looking @ previous css, page ignores all but body color. here is
the code can some one help please?
<!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>Ajax Album Demo</title>
<script type="text/javascript"
src="includes/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryData.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml",
"/gallery/photos/photo");
var dsData = new Spry.Data.XMLDataSet("photos.xml",
"/gallery");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="header"><img src="images/HP 2 Header.jpg"
width="800" height="54" /></div>
</div>
<div id="thumbContainer" spry:region="dsGallery
dsData"> <img src="{dsData::thumbnail/@base}{@thumbpath}"
spry:repeat="dsGallery" class="thumbs"
onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div>
<div id="main" spry:detailregion="dsGallery
dsData"><img src="{dsData::large/@base}{@path}"/><br
/>
Name: {@path}</div>
<div id="apDiv1"></div>
</body>
</html>
Thanks

Thats beouxe of the position absolute, top left, these force
the elements in position.
So u would need to change that and it would "center" in the
way u wanted.

Default spry css not working correctly

Hi. I made my first Spry tabbed panel, CS3 on a Mac. It
worked perfectly in Safari, and on a PC with Explorer. However the
panels were not "stacked" under each other in Firefox and Opera -
displayed all tab content as one long column . I ran a css
validation and it came back with two errors:
Property -moz-user-select doesn't exist : none
Property -khtml-user-select doesn't exist : none
What does this mean? Does anyone know why the tabbed panels
are not working in Mozilla browsers and how to fix?
The only change I made to the supplied css was to change the
color of the tab, Here is the code:
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 2px;
margin: 0px 1px 0px 0px;
font: bold 10px Arial, Helvetica, sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #000000;
Here is the page:
http://pureinspirationmag.com/issues/back2.shtml
Here is the link to the complete code:
http://pureinspirationmag.com/SpryAssets/SpryTabbedPanels.css
Thanks for any help!

Perhaps there is something I can do within DW that might easily solve this?
There's no magic button to fix bad code. Adobe abandoned GoLive back in 2008 because it wasn't capable of producing standards compliant code. This is 2013. It would make more sense to re-build the site from scratch to be both web standards compliant and responsive in mobiles, tablets and desktops.
Nancy O.

Spry CSS keeps crashing DW

I added a spry tabbed panel to a page... then I opened the CSS file and made a change, then clicked to switch back to the original file to see the change and DW crashes.
I restart, open the CSS file, make the change and hit CTRL+S. DW crashes.
There is something going on here with this file that keeps causing DW to crash. Has anyone run into this before?

I'm not sure if this could be the cause, but there is a bug in CS3 (not sure what you are using) :
The 8KB bug
This is a very rare bug that causes Dreamweaver to crash during operation, and then crash repeatedly each time you try to restart the program. It normally affects only Dreamweaver CS3 on Windows, and is caused by the presence of a file that's exactly 8,192 bytes (8KB) or a multiple thereof.
The solution is to open the file in a text editor and add a few extra characters (new lines or a comment will do). Save the file, and restart Dreamweaver.
If the file causing the problem is an image or other type of media file, edit it so that it's no longer an exact multiple of 8KB
Other than that, are you using the latest Spry Version?
SPRY UPDATERS: http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_spry
If none of these help - then you may want to ask the question over at the forum dedicated to the Spry Framework:
http://forums.adobe.com/community/adobe_labs/spry_framework_ajax_prelease

Combining spry & css

I have done a spry gallery, by replacing images from a
tutorial. tried to center the page within the browsers windows by
looking @ previous css, the page ignores all but body color.
On another front I have through a css tutorial centered a two
column page with header and footer, replaced text with my header
& footer (both images), is it possible to make the two columns
spry regions, and insert my thumbs & main images there, coping
xml, SpryData.js, & xpath.js files from uncentered gallery that
works?
here is the code for the spry gallery page. can some one help
please?
Thanks

Spry turns off the autocomplete for a reason.. If users use autocomplete in IE. It will not fire a "change" event to the browser. So onchange validations will fail if you turn on autocomplete..
If you still think you want it on. You should manually edit the Spry .js file. And comment the autocomplete = false; out

Html lost link to spry css

I'm pretty new to Dreamweaver so thanks for the help.
I've set up a spry horizontal menu bar. The menubar.js is attached but the horizontalmenu.css is not showing under the html associated files. It has somehow become unattached even though the stylesheet link is in the head section of the html file. How do I re-link it or for that matter, link a different one? Opening the link as a file does not seem to do it.
Thanks.

I am a tutor at a college in the UK and although this is not a frequent occurance it does happen more than you might think.
More than a few students have experianced this in their software.
It is a Dreamweaver issue and not a code issue. The html code is still intact when it happens and if you were to preview the page it would display correctly.
It is that the style sheet info in the css panel is lost and in page design view of Dreamweaver.
If you restart Dreamweaver its there again. but once this has occured, it then happens more freqently on that computer.
David

Link to spry css broken in template or child pages

Hi,
on the following pages the spry menu is not displaying properly. I did notice that in the template pages the link ref was missing ../ at the beginning. Having added this and updated the templates and child pages (these were also uploaded to the server) I thought that would solve the problem. But it doesn't look as though the change in the link ref has updated correctly.
http://davidcoshdesign.com/nea/lighting_decorative.html
http://davidcoshdesign.com/nea/lighting_functional.html
http://davidcoshdesign.com/nea/news.html
http://davidcoshdesign.com/nea/links.html
http://davidcoshdesign.com/nea/blog.php
Any pointers, would be great.
Second url:
http://davidcoshdesign.com/nea/lighting_functional_wall.html
This one appears not to be linking properly to the template? At leats, I think that's the problem. The template is in the correct folder and uploaded to the server.
I have noticed on this site that when I make a new page based on any of the site templates, when I look at the coding in DW, there are references to the local site 'root' folder.
Have I messed up the links to templates etc on site-wide basis? Do I need to go into 'Manage Sites' to sort this out?

No, just a reoccurring problem, for someone who constantly struggles witht the vagaries of html.
RP

Desperate help needed in understanding SPRY accordion CSS

hello everybody
like many out there im stumbling through some home/self tuition on DW. I've recently checked out the spry accordion. It all went well up to the part where I wanted to improve the outlook of the accordion. I luckily found some templates on the adobe site with an accordion with the general idea as to how I would like an accordion to look, or at least a platform for future ideas. (Design #2 at: http://www.adobe.com/devnet/dreamweaver/?view=samples )
I've had a look through the code and have found great difficulty understanding a few of the div classes that are contained within it, i.e. what they are attributed to etc.
Here is the HTML and the Spry CSS docs that I downloaded from the link above:
HTML code (my issues are highlighted in red)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>OurCompany.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Designed and developed by Codify Design Studio - codifydesign.com" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="bannerArea">
<div class="bannernav"><a href="#" >Privacy Policy</a> | <a href="#" >Contact Us</a> | <a href="#" >Site Map</a></div>
<div class="toplogo"><a href="#"><img src="images/transparent.gif" width="365" height="90" border="0" /></a></div>
</div>
<div class="contentArea">
<ul class="leftnavigation">
<li><a href="#" >This is definitely navigation item 1</a></li>
<li><a href="#" >Item 2</a></li>
<li><a href="#" >Item 3</a></li>
</ul>
<div class="content">
<div class="contentleft">
<h1>Lorem Ipsum dolor sit amet</h1>
<img class="imageright" src="images/content_photo_1.jpg" border="0" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sedpharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id <a href="#">velitvitae ligula</a> volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Lorem ipsum dolor sit amet. </p>
<img class="imageleft" src="images/content_photo_2.jpg" border="0" /><p>Consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<p>Nulla libero. Vivamus pharetra pos uere sapien. Nam consectetuer. Sed aliq uam, <a href="#">nunc eget euismod ullamcorper</a>, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
</div>
<div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab tabTop">
<div class="accordion_340_tab">
TELLUS PROIN EU ERAT
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">
UMA NON TEMPLUS NUNC
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non.</p>
<p>Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris.</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">
CONSECTETUER ADIPICING ELIT
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<img class="imageright" src="images/accordion_photo.jpg" border="0" />
<p>Cras tempor. Morbi egestas. Tempus, nunc arcu mollis enim, eu aliqu mam erat nullanon nibh consectetuer malesum adavelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl.</p>
<p>Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p>
</div>
</div>
</div>
</div>
<div class="AccordionBottom"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="footerArea">
<div class="copyright">© 2009 Our Company. All rights reserved.</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
I'n terms of the <div class="accordion_340_tab"> i'm really not sure what these mean. I know the label title is situated within them (at least i think they are!!) but i dont quite understand what they are doing or mean. There is no reference to them in any of the code/ CSS sheets i downloaded.
Plus, i'm not quite sure what the two <div style="clear:both;"></div> are clearing.
I know these will be really basic questions and I apologise for having to trouble you but any help would be really really appreciated
This is the spryCSS that came with the link to accompany the HTML file...
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
overflow: hidden;
width: 255px;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
.AccordionPanelTab {
color: #394867;
margin: 0px;
cursor: pointer;
padding: 10px 30px 10px 20px;
font-weight: bold;
-moz-user-select: none;
-khtml-user-select: none;
background-repeat: no-repeat;
background-image: url(../images/accordion_255_tab_normal.gif);
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(../images/accordion_255_tile.gif);
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
color: #d88a37;
background-image: url(../images/accordion_255_tab_down.gif);
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
background-image: url(../images/accordion_255_tab_over.gif);
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #000000;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #000000;
/* Custom AUC classes */
#accordion_255 {
background-image: url(../images/accordion_255_tile.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
.tabTop {
background-position: 0px 0px;
padding-top: 15px;
.middleTab {
background-position: 0px -151px;
.accordion_255_tab {
margin: 0px;
font-weight: bold;
.acontent {
height:200px;
width:220px;
overflow: auto;
padding: 5px 10px 10px 20px;
.AccordionBottom {
width: 255px;
height: 33px;
background-repeat: no-repeat;
background-position: 0px bottom;
background-image: url(../images/accordion_255_bottom.gif);
Thank you to anybody again who may be able to assist me with this. I'm very new to DW (and some may say not the brightest) so any low level explanations will be really appreciated.
Kind regards
Andrea x

Heya, I hope my response will help.
First off, I'd like to say that you are correct in being unable to find the " <div class="accordion_340_tab"> " anywhere in the project. I went through and checked all the code and couldn't find a reference anywhere. Also, I downloaded the project from your link, deleted the <div class="accordion_340_tab"> as well as the </div> right after the TELLUS PROIN EU ERAT" (as the opening div and closing div work together and must be added or deleted together) and it had absolutely no impact from what I could see in internet explorer 8 and firefox.
Therefore, I believe, that it was originally intended to do something or in fact did something but they took that out and then forgot to take out the div. Even within the internal .js file I couldn't find a reference. Maybe they forgot to upload a third stylesheet. Either way, it appears to work just fine without it.
"I'm not quite sure what the two <div style="clear:both;"></div> are clearing."
In regards to this, this div style tag is a less frequently used tag that can divide content. Do you know what the HR tag in html is? If not, try putting a <hr> tag (just like that, by itself) in your web page somewhere. HR stands for Horizontal Rule- it makes a horizontal line across the page. This div style clear both tag is basically an invisible HR that helps separate different divs or content or whatever else is on the page. Think of it as an invisible page break.
"I know the label title is situated within them (at least i think they are!!) but i dont quite understand what they are doing or mean."
You should check out some CSS tutorials for the basics, but in a nutshell I'll go ahead and explain what I believe you are having trouble with.
Let's put it this way:
HTML is the core of your web page. It is the content and substance.
CSS is the style of your web page. It is the color, alignment, and format of your page.
The "div" tag by itself is simply <div>. However, you MUST close a div tag somewhere on the page with a </div> A div tag by itself, however, will do absolutely nothing. How do you get it to do something? By making a CSS rule, the two most common of which are known as a "div id" and "div class".
The differences between div id and div class are pretty small- div id is mainly used for a div tag that will only be used once on the web page. Div classes are used for something that will be repeated, in this case, the accordion tabs.
Therefore, when you see something like <div id="content"> text blah blah blah </div>, then you know that the "text blah blah blah" is your content, and that content is being modified to the specifications of the id "content". Where is this "content" div? This is what you as the designer make (or there will already be one in a template) and can usually be found in an external STYLESHEET, which holds all of your css rules, and is then linked to the main web page's html document (where your content is) with a link tag in the header of the html, usually right after the title and before the end of the <header> tag. You will find <link href="example.css" rel="stylesheet" type="text/css" /> but with a different name in the part i put as "example.css"
Within that css document you have different things you can do. Let's say I want to make one div id and one div class. I want to name the ID "example1" and the class "example2". It would look something like this (note that you must ALWAYS start an ID with # and a class with a period)
#example1 {
width: 450px;
margin:auto;
color: #fff;
.example2 {
width: 900px;
margin: 10px;
color: #000;
I hope this helped.
-Matt

SPRY Horizontal Menu CSS control

I am using spry 1.6 (upgraded) on dreamweaver CS3. I created
a horizontal SPRY menu within a div and I want to center the menu
within the div using CSS. I can't seem to get this to work. I would
have thought applying "margin: 0px Auto;" to the ul.horizontalMenu
(sp?) class in the Spry CSS file would have done the trick but it
seems to ignore the auto. I can put say 0px 20% and it works but
this does not compensate for possible expanding menus. I know this
is a newbee question but that is what I am.
Thanks for the help in advance
Terry

Hi,
The original CSS has been very carefully composed so that it will work in all browsers. If you make any changes to the original and you do not know what you are doing, you are asking for problems.
When I look at your first set of rules and I see the following marked in red and a rules marked in green that are left out, then I know you will have a problem:
ul.MenuBarHorizontal
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    background-image: url(myImage.jpg); // rename the image to your own
    background-repeat: repeat;
    vertical-align: bottom;
    float: none;
    position: absolute;
    margin: auto;
Keep in mind that the original stylesheet has no browser issues. Any changes that you make are for your account and have basically nothing to do with Spry.
My suggestion to you is, make a copy of the modified stylesheet for reference, then put back the original stylesheet. Consequently, make a new stylesheet called myStyles.css or similar, and put your changed rules in the newly created stylesheet eg.
ul.MenuBarHorizontal
     background-image: url(myImage.jpg);
     background-repeat: repeat;
Then attach this stylesheet to your document after the original stylesheet.
If you cannot get the required result, merely play around with the rules within myStyles.css.
I hope this helps.
Ben

Css issues, caused by spry?

I am having some real problems getting css to function
properly. It seems that if I try and edit the spry menu then my
other css page (for my font styles) is no longer connected when
published. To make matters more frustrating it works fine in
Dreamweaver, only when i view in browser or publish it to the web
are the styles no longer available. Any suggestions?
site : applesenglish.com example the titles at the top of the
page are supposed to be large and red....thanks
Tim

One place to start would be to change your class selectors
.h1 and .h3 to
tag selectors - and then change the p tags to h1's and h3's.
So, instead of
<p class="H1">Welcome to Mr. Apple's English
Academy</p>
you'd have:
<h1>Welcome to Mr. Apple's English Academy</h1>
I don't think the Spry CSS is interfering here.
Best - Joe
Joseph Lowery
VP of Product Management, WebAssist -
http://www.webassist.com
Author, Dreamweaver CS3 Bible -
http://www.idest.com/dreamweaver/
"whatisgood" <[email protected]> wrote in
message
news:gj28lu$5hk$[email protected]..
>I am having some real problems getting css to function
properly. It seems
>that
> if I try and edit the spry menu then my other css page
(for my font
> styles) is
> no longer connected when published. To make matters more
frustrating it
> works
> fine in Dreamweaver, only when i view in browser or
publish it to the web
> are
> the styles no longer available. Any suggestions?
>
> site : applesenglish.com example the titles at the top
of the page are
> supposed to be large and red....thanks
>
> Tim
>

Spry Menu Bar acting weird in IE

Hello,
I am relativley new to Dreamweaver and I built a website using CS4. I never did a spry menu bar and I have one on my site. The menu bar works fine in firefox, in safari it seems to work as it is aligned right, but my flash player doesn't. But the main problem is in IE. The grey background I have for the spry bar is in the right spot but the actual links are offset, and when you role over them the submenus are on the left and also offset. I tried messing around with the hack IE in the spry css but not really sure what I am doing as I don't know code too much. I also am Mac based and the problem in IE is on the PC. Also I built all the pages in Illustrator and inserted them in and used hot spots. I am not sure if that may have something to do with it.   If any one can help I would really appreciate it. The website I created is http://www.menaceaudio.com.
Also if this helps here is my SpryMenuBarHorizontal.css
@charset "UTF-8";
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: auto;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 41.25em;
    padding: 0px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    list-style-type: none;
    font-size: 14pt;
    position: relative;
    text-align: center;
    cursor: pointer;
    float: left;
    padding: 0;
    color: #FFF;
    background-color:#ccc;
    width: 8.23em;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    float: left;
    left: -1000px;
    width: 8.23em;
    position: absolute;
    background-color: #CCC;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.23em;
    background-color: #CCC;
    position: relative;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-repeat: repeat-y;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal a
    left: -20px;
    top: 30px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    cursor: pointer;
    text-decoration: none;
    font-family: eurostile;
    font-size: 14px;
    background-repeat: no-repeat;
    padding: 0.5em;
    margin: 0.5px;
    display: block;
    color: #036;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #333;
    border-right-color: #333;
    border-bottom-color: #333;
    border-left-color: #333;
    border-right-style: solid;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-repeat: repeat-x;
    font-family: eurostile;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position:absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    ul.MenuBarHorizontal li.MenuBarItemIE
    ßfloat: left;
    position: relative;
    display: inline;

I'm using IE8, and I don't see the offset errors of which you speak. I do recommend restoring the IE hacks at the bottom of the stylesheet to the original, however.
I also notice that the width of the individual menu items (top level) is forcing "CONTACT" to a second line. You can safely remove the pixel width on the containing div, returning to 100%. But your paddings and widths of top level menu items may be the forcing issue here.
Beth

Spry CSS

Similar Messages

Maybe you are looking for