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

Similar Messages

DW CS3 and DW CS3 with CSS

Hello and thanks in advance for your input. Years ago I
taught myself GoLive and am now making the change to Dreamweaver
CS3. I purchased it before CS4 was released so will have to upgrade
later. My question is this: I signed up for the Lynda.com online
classes to learn CS3 and notice that there are two different
tutorial categories, CS3 dated 4-07 and CS3 with CSS dated 3-08.
Are these two different programs? I purchased the design premium
suite and it lists Dreamweaver as CS3 and does not mention "with
CSS" in the title. I am not sure which tutorial program to use to
begin building my website and because it's Sunday they are not open
today. I am anxious to get started today, so would greatly
appreciate your insight. Thanks very much.

Thanks for your reply.
Yes, they are two different tutorials and from what you
mention, I am assuming that the more recent tutorial simply focuses
on utilizing CSS to build the site more effectively than what is
probably taught with the first tutorial. From what you said, it
seems like I should first take the CSS tutorial to get the
foundation of my site as uniform as possible and then perhaps go
back and study the basic DW CS3 tutorial to help fill in the gaps.
The reason why I am making such a big deal with asking is
because I know the laying of the foundation on a site going in is
so important. Each tutorial is about 11 hours, so I just wanted to
spend my time efficiently. Thanks for the suggestion of going the
CSS route first.

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

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

Beginner CSS questions

I previously designed an html website in Dreamweaver MX 2004
that I need to switch over to CSS. I've been studying pages and
pages of tutorials, and have some questions that haven't really
been addressed, or else I've been missing the point!
So far, I've successfully created a simple, external .css
file that had paragraph and heading rules, linked it to an
existing, table-based, html test-page, published it, and it worked
fine.
Now I want to get away from using tables to using divs, and
there's a sample layout in DW that I selected: Two column, elastic,
with header and footer. Now I'm confused.
In the sample page, along with css rules and instructions,
there are paragraphs of content:
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus,
fermentum id, molestie in, commodo porttitor, felis. Nam blandit
quam ut lacus. </p>
Question #1: Does this mean this isn't supposed to be an
external style sheet? Because I'm pretty sure one doesn't put any
content on an external style sheet. Can I turn this into an
external style sheet, and what do I need to do in order to
accomplish this?
Question # 2:
As mentioned above, my first foray into an external style
sheet worked fine with one of my table-based html pages. What I
fail to grok is when you set up an external style sheet with divs
how exactly do you put your content on your page in design view? Do
I need to convert tables to divs, which would be on each individual
page? Then am I giving up having the divs controlled by an external
style sheet? I don't mind making all new html pages to be
controlled by the divs on a css, but then I'm back to the first
question - how do you place content on an html page, when the divs
are supposed to be controlled by the external ss. This seems to be
a never-ending loop in my mind!
Many thanks in advance for trying to straighten this out!

> Dreamweaver the Missing Manual - a good overall
reference to the whole
> of Dw - but don't follow everything as it teaches you
about the bad
> bits such as frames - and nested templates.
Not so much the one on CS3....
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
==================
"Malcolm N_" <[email protected]> wrote in message
news:[email protected]...
> On Sun, 30 Dec 2007 23:44:45 +0000 (UTC), "mindi-1"
> <[email protected]> wrote:
>
>>Malcolm M,
>>
>> Thank you for your reply! I'm starting to get more
comfortable in code
>> view.
>>I appreciate your letting me know about moving the
styles from the page to
>>the
>>external style sheet. Good idea to get some books -
do you have any to
>>recommend?
>>
>> Kim,
>>
>> Thank you for the link - I'll do the tutorials, as
they are ones I
>> haven't
>>seen before.
>>
>> Happy new year to you both!
>> Mandira
>>
>>
>
>
> Yes the cssmax tutorial are good - and a good place for
css controlled
> navigation list
>
>
> My recommended library:
>
> HTML,XHTML & CSS by Elizabeth Castro - very
comprehensive, readable
> and attractive book explains all - ( or most at least )
>
> HTML Mastery - Semantics, Standards , and Styling by
Paul Haine - an
> excellent guide to how to really use html, including a
comprehensive
> guide to styling tables used for data.
>
> CSS Mastery - Advance Web Standards Solutions - by Andy
Budd - an
> excellent companion to HTML Mastery - which really
guides you into
> using CSS correctly with valid code.
>
> These two Mastery books compliment each other extremely
well.
>
> CSS - The Definitive Guide - by Eric Meyer - an
excellent reference -
> perhaps a little more difficult style to read - but
clearly the author
> is one of the top experts on CSS.
>
> Dreamweaver CS3 with CSS, Ajax and PHP by David Powers -
another
> excellent book, very readable style on how to produce
good websites
> with Dw. It is NOT like your typical guide to Dw - just
regurgitates
> the help files - including the bits of Dw that should
have been binned
> - David guides you on best practise and the parts of Dw
to avoid.
>
> Dreamweaver the Missing Manual - a good overall
reference to the whole
> of Dw - but don't follow everything as it teaches you
about the bad
> bits such as frames - and nested templates.
>
>
>
> --
>
> ~Malcolm N....
> ~

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/

CS3 Spry Accordion Link Color

Greetings:
I am attempting to change the link color to "none" within a
Dreamweaver CS3 Spry Accordion navigational element and I am unable
to make the changes I need. I have tried to change the internal
link page properties within my HTML document and also set the "a"
properties in the linked CSS file to "text-decoration: none" and
the link color still remains in the Accordion navigational element.
Do you have any suggestions on how I can fix this?
Thanks for your help!

in your spy accordian css file, put:
a:link
text-decoration:none;
or, even better
.nolinkunderline
text-decoration:none;
and then apply the style to your accordians hyperlinks
i am assuming it's the underline element that you want
removed

Newbie alert spry conditions question

I am trying to use an XML dataset to draw data for my
application pages. I have some XML fields, (in this case {helpurl}
and {moreinfo} ) which may or may not have a value assigned to them
in each record.
My question is simple, but I can't find the answer... where I
originally would write it this way in CF, what is the equivalent in
CS3/Spry?
<cfif (#helpurl# is not "")>
<a href="#helpurl#">HELP</a>
</cfif>
<cfif (#moreinfo# is not "")>
<a href="#moreinfo#">MORE INFORMATION</a>
Thanks so much!!

You need to use Spry:if like below
<p> {Description} <a href="{Link}" target="_blank"
spry:if="'{Link}' != ''">MORE..</a></p>
Regards
Phil

2 CSS Questions on my layout

Hi everyone, I have two CSS questions regarding my layout.
First off, it is located at:
http://robles.clunet.edu/~ssmi/tsr9/tsr9template.html
The CSS is embeded in the file (it will linked from a
different file once I am done with this design, but beside the
point)
My first question is about how I can keep the right top image
from being bumped down to the next line when the window is resized.
I want it to squeeze into some, but then at a point have the scroll
bars kick in.
My other question is how I could make the title image "The
Scott Report" centered between the two left and right images up
top.
Could anyone help out?
Thanks a lot!

Check the AppleCare number for your country here:
http://support.apple.com/kb/HE57
Call them up, and let them know you would like to be transferred to the Account Security Team.

Quick Spry Menu Question

I am having CSS issues trying to center a basic horizontal spry menu inside a div tag.
To keep it simple:
I have a 990px wide x 40px high Div Tag for my mainNav menu.
I created a quick horizontal menu using the spry widget... with 7 boxes.
The menu of 7 boxes is currently left justified within the Div. I want it to auto center within the Div. I have tried changing almost every pre-CSS ID in the Spry horizontal menu using AUTO margins for the left and right and I can't get any of them to center then entire menu within the overall Div Tag.
Please help.
ul.MenuBarHorizontal.li is floated left so the boxes are side by side... but no matter which CSS ID I change the margins to auto on left and right nothing seems to work.
Do I need to create a new CSS rule targeting something different to get the entire menu to center properly?
Thanks for the help
Tim

Alter the spry css. If you declare a width of 700px and set margin: 0 auto; (as shown below) then each of your 7 links will be 100px wide and you'll have 145px either side. 990px - 700px = 290px /2 = 145px.
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 700px;
margin: 0 auto;
Updated: You should also set the below selector to 100px (or whatever you require. But obviously make sure the total width of all the links adds up to the width you set the above css selector to. In this case 700px). This determines the width of your links.
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 100px;
    float: left;

Have a CSS question

I have a picture i am trying to put inside a div that has a class already which makes pictures have a frame around them when i insert them into it, which is fine for the main image but i am trying to add an extra image in there and i dont want that frame to be there.
I will attach a picture and a link to the site i am talking about.
If anyone can help me with this CSS question or how i can go about getting rid of the frame around the step 1, step 2 and step 3.
eWeb Solutions Website Development
Thanks!

Take the frame class out the div and apply it to select images like this:
<div>
<img class="frame" src="step1.jpg">
<img src="picture1.jpg">
</div>
<div>
<img class="frame" src="step2.jpg">
<img src="picture2.jpg">
</div>
Nancy O.

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.

DW CS3 Spryアコーディオンについて

DW CS3のSpryアコーディオンの設定ですが、デフォルトでは、クリックをすると、ウィンドーが開きますが、マウスオーバーでウィンドーを開くにはどのようにすればよいでしょうか？

SpryAccordion.js の283行目（spry1.4の場合）
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
を
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabClick(e, panel); }, false);
に変更すれば可能です。
"click"を"mouseover"にすればよいわけです。
私もあまりJavascriptはよくわかりませんが、こうやってすでに２サイトで導入してます。

CheckboxDatagrid (extended) CSS question

Hello
In our application we make use of the CheckBoxDataGrid, which rocks.
We are playing with the CSS and noticed that we arent able to change the "chromeColor" property, in CSS. Only in the MXML.
I would like to set the style in the CheckBoxDataGrid super class, but I do not see a way to specify "headerStyleName".
How and where would that occur in an extended class? Would it need to happen in the constructor?
Also, how would you re-assign the CSS, in ActionScript, in this extended DataGrid class? Any ideas?
Any help is appreciated, thanks folks!

kumar wrote:
Browser: IE 7 (** Is it the browser issue**)Yes. Interactive Report CSS question.. expands the page width to accommodate the IR, with a scrollbar on the viewport that allow the user to view the full width.
Remove
#apexir_DATA_PANEL {
margin-bottom: 10px;
overflow: auto;
}The IE7 bug can be addressed by feeding it the following CSS fix targeted at pre-IE8 browsers with a conditional comment in the page HTML Header:
Specify the <tt>too-wide</tt> static region ID on the IR region for use as a CSS selector.
However, presenting information in a way that requires users to scroll the viewport horizontally is clunky. This will be particularly true in combination with an IR. Think about the user experience: is there an alternative way of displaying this information?

CS3 Spry css question

Similar Messages

Maybe you are looking for