Images and Spry menus

I don't want to use text for my main menu -- I want to use images so my main menu tabs will be a set size.
Can I do this using the Spry (horizontal) menu I've already set up?
If so, I don't know how to do this.
What specifically do I need to change, in the html and/or the css? I don't understand the Spry menu CSS enough to be able to figure this out.
Can someone explain?

Have a look at the answer to your other post http://forums.adobe.com/message/3227999#3227999

Similar Messages

Using images in Spry menus

Can someone please point me to instructions on how to incorporate button images in horizontal Spry menus?

Here's the working model for the menu I created using images for the main menu tabs: http://mmfc.org/HomePage_CleanUp/index_working.html. And here is the style sheet: http://mmfc.org/HomePage_CleanUp/SpryAssets/working.css.
I have one remaining problem, and hope someone can help.
There are three states/images for the main menu tabs: normal state, hover state (when the cursor is over the tab), and visible state (when a submenu is open and the cursor is over a submenu item).
In OS10.6.4/Safari, it works correctly:
Normal state
Hover state
Visible state
In Windows XP/IE 6, the 3rd state works incorrectly -- the hover state doesn't get replaced by the visible state:
In OS10.6.4/Opera and OS10.6.4/Firefox, it also works incorrectly -- but this time the hover state gets replaced by the hover color, not the visible state image:
For reference, I've copied the CSS below.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* 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: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
float: right;
/* 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;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* 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;
width: auto;
position: absolute;
left: -1000em;
background-color: #FDE9BB;
/* 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: auto;
/* Menu item containers are variable width according to submenu item text */
ul.MenuBarHorizontal ul li {
width: auto;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul {
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* No borders on all sides */
/* ul.MenuBarHorizontal ul
border: 1px solid #666666;
/* Menu items are a light colored block with no padding and no text decoration */
ul.MenuBarHorizontal a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
white-space: nowrap;
text-decoration: none;
display: block;
cursor: pointer;
color: #000000;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 11px;
/* For setting the background color of the spry menu you need to edit the background in the CSS pane. Click on the spry menu bar and then open up the CSS pane. Window > CSS Styles. There's a few CSS items that set the background by default. The "a" item sets the background for the items that don't have a dropdown and the MenuBarItemSubmenu sets the background for the items that have a dropdown. You can set the background to an image just like you would any other element in your HTML. */
/* The following selectors define images for the (orange) normal state of tabs */
ul.MenuBarHorizontal a #AboutUs {
background-image: url(../img/DropDownMenu_aboutus.gif);
ul.MenuBarHorizontal a #Missions {
background-image: url(../img/DropDownMenu_missions.gif);
ul.MenuBarHorizontal a #Help {
background-image: url(../img/DropDownMenu_help.gif);
ul.MenuBarHorizontal a #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents.gif);
ul.MenuBarHorizontal a #Media {
background-image: url(../img/DropDownMenu_media.gif);
ul.MenuBarHorizontal a #PatientStories {
background-image: url(../img/DropDownMenu_patientstories.gif);
ul.MenuBarHorizontal a #ContactUs {
background-image: url(../img/DropDownMenu_contactus.gif);
/* The following selectors define images for the (bright) active state of tabs.*/
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #AboutUs, ul.MenuBarHorizontal a.MenuBarItemHover #AboutUs, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #AboutUs {
background-image: url(../img/DropDownMenu_aboutus_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Missions, ul.MenuBarHorizontal a.MenuBarItemHover #Missions, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Missions {
background-image: url(../img/DropDownMenu_missions_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Help, ul.MenuBarHorizontal a.MenuBarItemHover #Help, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Help {
background-image: url(../img/DropDownMenu_help_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #NewsAndEvents, ul.MenuBarHorizontal a.MenuBarItemHover #NewsAndEvents, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Media, ul.MenuBarHorizontal a.MenuBarItemHover #Media, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Media {
background-image: url(../img/DropDownMenu_media_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #PatientStories, ul.MenuBarHorizontal a.MenuBarItemHover #PatientStories, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #PatientStories {
background-image: url(../img/DropDownMenu_patientstories_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #ContactUs, ul.MenuBarHorizontal a.MenuBarItemHover #ContactUs, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #ContactUs {
background-image: url(../img/DropDownMenu_contactus_vis.gif);
/* The following selectors define images for the (red) hover state of tabs.*/
ul.MenuBarHorizontal a:hover #AboutUs, ul.MenuBarHorizontal a:focus #AboutUs {
background-image: url(../img/DropDownMenu_aboutus_hover.gif);
ul.MenuBarHorizontal a:hover #Missions, ul.MenuBarHorizontal a:focus #Missions {
background-image: url(../img/DropDownMenu_missions_hover.gif);
ul.MenuBarHorizontal a:hover #Help, ul.MenuBarHorizontal a:focus #Help {
background-image: url(../img/DropDownMenu_help_hover.gif);
ul.MenuBarHorizontal a:hover #NewsAndEvents, ul.MenuBarHorizontal a:focus #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents_hover.gif);
ul.MenuBarHorizontal a:hover #Media, ul.MenuBarHorizontal a:focus #Media {
background-image: url(../img/DropDownMenu_media_hover.gif);
ul.MenuBarHorizontal a:hover #PatientStories, ul.MenuBarHorizontal a:focus #PatientStories {
background-image: url(../img/DropDownMenu_patientstories_hover.gif);
ul.MenuBarHorizontal a:hover #ContactUs, ul.MenuBarHorizontal a:focus #ContactUs {
background-image: url(../img/DropDownMenu_contactus_hover.gif);
/* Menu items that have mouse over or focus have a dark background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background-color: #bf2e1a;
color: #FFFFFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a dark background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
background-color: #bf2e1a;
color: #FFFFFF;
/* Sets width of submenus and makes text non-wrapping */
ul.MenuBarHorizontal ul li {
display: block;
float: none;
width: 12em;
white-space: nowrap;
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-image: url(SpryMenuBarDown.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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-image: url(SpryMenuBarRight.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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 {
/* background-image: url(SpryMenuBarDownHover.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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 {
/* background-image: url(SpryMenuBarRightHover.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
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;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
display: inline;
/* f\loat: left;
background: #FFF; */

Getting rid of gap between title banner image and Spry Menu bar?

Hi,
Here's what I have so far :
http://www.artbywaqas.com/TEST/index.html
How can I get rid of the gap between the banner image and the menu below it?

Please explain, what is the center element as in line 43 with the closing tag on line 94?
Also, wrapping the banner image in a paragraph element ensures that you will have a margin and/or padding above and below the element unless you specifically change the style rules to eleminate the marging and/or padding.
The quickest solution is to remove the center element (which does not exist) and change the paragraph elemnt to a div element.
Gramps

Images in spry menus

I'd like to use small images/icons in my vertical spry menu
bar. this works ok, exept that the white separation line (border)
between the menu items disappears in those spesific cells. The
cells containing just text keep their white line, and I simply
can't find out where I manually can create this for the others.
Anyone understand what I'm talking about?
If you take a look at my site , and the spry menu on the
left, you'll see. The white line between menu item 1 and 2 is
missing...

The security settings only apply when you view the file
locally in IE, won't
have any effect when you load the page.
I don't have time to check/test the code right now, maybe a
quick visit to
the spry forum may get you some help - I believe you may need
to set up a
separate class so that you only get the one divider border on
the top level
and a different one on the sub menu (from memory :), it's
been a while since
I worked with the spry menu.
Forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Hope they can help you pretty quickly - sometimes there is a
bit of a wait
I'm afraid.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/
~ Forum Posting Guidelines ~
http://www.adobe.com/support/forums/guidelines.html
CSS Tutorials for Dreamweaver:
http://www.adobe.com/devnet/dreamweaver/css.html
"sykkeltyv" <[email protected]> wrote in
message
news:[email protected]...
> Thnx for answering, Nadia!
>
> Well, now I got my thin black line around each cell of
the menu, in
> addition
> to the white separation line between the items
containing text. I only
> want one
> of these to show, regardless of wich one. So, can I
remove the white line
> already there, in some way?
>
> (one more clue that might help: When I preview this
page, I have to accept
> to
> run active content (only due to security settings here
at work). The white
> line
> between menu items only appear after I have accepted the
activce content.
> Does
> this tell you anyting in order to find out where these
settings can be
> done?)
>
>
quote:
Originally posted by:
Newsgroup User
> Try adding the border to the following rule:
>
> /* Menu item containers, position children relative to
this container and
> are same fixed width as parent */
> ul.MenuBarVertical li
> {
> margin: 0;
> padding: 0;
> list-style-type: none;
> font-size: 100%;
> position: relative;
> text-align: left;
> cursor: pointer;
> width: 12em;
> height: auto;
> border: 1px solid black; <--------- added this line
here
>
>
>
>

Help with images in Spry menus

I need help making this work: I want my menu buttons and
submenu buttons to be images rather than text. I've been able to
set it up to use different images for each of the main and
sub-level buttons, but only for the active state. I cannot figure
out how to use a different set of "hover images" for the hover
state. Note-- Each button and submenu button in the entire menu are
different images, so I suspect I need to use different ID's for
each, but I am not sure how to set that up in the
SpryMenuBarHorizontal.css file for each different button in, at
least, the active and hover states. Can anyone offer some help with
this?:

V1 - Thank you for the suggestion, but this does not exactly
solve my dilemma. In its simplest terms, this is what I want to do:
Create a single drop-down menu where there is "Item 1" with
submenus "Item 1.1", "Item 1.2", and "Item 1.3". But, I want to use
different images for each item and subitem in their Active and
Hover states. So, in this example, there would be 8 different
images... An Active and a Hover image for each of Item 1, Item 1.1,
Item 1.2 and Item 1.3.

Spry menus - using images for buttons

A search of the forums shows two approaches, to use an image
for a button in a Spry menu.
One of them uses HTML to put an <img> into the
<li>. Here is the example I found cited [contributed by
arandlett - though said there not to work in IE7].
<ul class="MenuBarVertical" id="MenuBar1">
<li><img src="images/bullet.png" align="left"
/><a class="MenuBarItemSubmenu"
href="index.htm">home</a></li>
<li><img src="images/bullet.png" align="left"
/><a href="#">About</a> </li>
</ul>
The other advises "find "background-color" and change it to
"background-image: url(link/to/image)" " [contributed by The only
RaM].
Underlying of course, is the question, how does the HTML
interplay (or not!) with the Spry javascript?
By this time, there must be pretty wide experience. After
all, putting interesting buttons in the popups/dropdowns is in many
ways what this is about.
We would be quite appreciative to learn what experience
indicates, now, is best practice. Or, does it depend, on ... ?
Thanks in advance for your help, David Allen

Let me add a note to my own post.
We would still be delighted to hear others' experience, with
images in Spry menus. One thing does emerge with a little further
look: The Spry menu is suited to using the _same_ image for each
button. If the desire is to vary that image (such as to use an
unusual font, so that the text changes on each image), then
Fireworks clearly is the tool of choice.
Again, we would be pleased to hear other experiences, David
Allen

Images and styles not showing in Design view on CS3

Hi all,
I am playing around with a CSS website template that I downloaded and
opened in DW-CS3. I am just using this to learn and play around with. It
came with the style sheet, jpg images etc.
I just noticed that when in Design view for the index page, that the images
and styles, menus are not displaying, only the html text is visible in Design view.
When I preview the site with a browser like IE or FF, it displays fine along with
any changes I have made.
Does anyone have any ideas?
Regards,
dano

In DW, View > Style Rendering > Display Styles on?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Using Images in Spry Dropdown Menus??????

I am in the middle of making a web site that needs a drop down menu for one of the top navigation menu buttons, when I designed the web site I created my own buttons (images) in photo shop. When I went to create me navigation bar I tried to insert images in the spry menu bar, so that I can have my imaged and have the drop down menu but that didn't work, so then I tried to use a table and insert the images there and in the cell that needs the drop down bar I put in a spry menu bar but that through the whole navigation bar off. Can anyone help or does anyone know how to use images in spry drop down menus that can help me have the look I want and the drop down menu?

Have a look here http://www.adobe.com/devnet/dreamweaver/articles/spry_widgets_design_04.html
I hope it helps.
Ben

Ad link and image to spry dynamic table

hello,
i create a simple spry dynamic table i want to add a column
with image (link to a photo gallery) and another one whose linking
to pdf files. How i can do this.
my html code:
<!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>tableau choix séjour raquette: Bauges,
Chartreuse</title>
<style type="text/css">

</style>
<script type="text/javascript"
src="xpath.js"></script>
<script type="text/javascript"
src="SpryData.js"></script>
<script type="text/javascript">
var dsMassifs = new Spry.Data.XMLDataSet("tab_raquette.xml",
"massifs/massif");
</script>
</head>
<body>
<div spry:region="dsMassifs">
<table width="950" height="294" border="1"
align="center">
<tr>
<th width="78" scope="col"spry:sort="@id"><div
align="center" class="Style49">Massif</div></th>
<th width="84"
scope="col"spry:sort="durée"><div align="center"
class="Style49">Durée</div></th>
<th width="164"
scope="col"spry:sort="thème"><div align="center"
class="Style49">Thème</div></th>
<th width="77" scope="col"spry:sort="niveau"><div
align="left" class="Style49">Niveau</div></th>
<th width="77" scope="col"spry:sort="niveau"><div
align="center">Fichiers</div></th>
</tr>
<tr spry:repeat="dsMassifs">
<td><div
align="center">{@id}</div></td>
<td><div
align="center">{durée}</div></td>
<td><div
align="center">{thème}</div></td>
<td><div
align="left">{niveau}</div></td>
<td><div
align="left">{fichier}</div></td> </tr>
</table>
</div>
</body>
</html>
my xml code:
<?xml version="1.0" encoding="utf-8"?>
<massifs xmlns="
http://www.foo.com/employees">
<massif id="Bauges">
<durée>Week end</durée>
<thème>raquette et bien
être</thème>
<niveau>1</niveau>
<fichier>Fiche circuit.pdf</fichier>
</massif>
<massif id="Chartreuse">
<durée>4 jours</durée>
<thème>raquette et gastronomie
</thème>
<niveau>2</niveau>
<fichier>Fiche circuit.pdf</fichier>
</massif>
</massifs>

"David Powers" <[email protected]> wrote in message
news:fapkm4$cjt$[email protected]..
> Joris van Lier wrote:
>> Does Dreamweaver CS3 contain such a "Live Object"?
>> (one that generates XML export and Spry DynamicTable
code from a
>> Recordset?)
>
> One of the registration gifts for CS3 is an XML Export
extension, which
> generates XML on the fly from a recordset.
Thanks for you reply David,
since I posted I've found the the Spry documentation for
Dreamweaver 9, and
the info at
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WS48C07A61-5107-48d0-AC6 2-D96B7A008F01.html,
seems to suggest that inserting a spry DynamicTable is a
multi step process,
so the Live Object may still be useful in other servermodels,
but I'll focus
my efforts on duplicating the existing Spry integration for
the PHAkt
servermodel.
Joris

Double vertical spry menus and IE8

I am trying to use two vertical spry menus on one page. This works in Chrome and Firefox, but the fly outs will not work in IE8. I am using Dreamweaver CS4, Operating System is XP Pro. Is there a fix for this issue? Bushmom

I am trying to use two vertical spry menus on one page. This works in Chrome and Firefox, but the fly outs will not work in IE8. I am using Dreamweaver CS4, Operating System is XP Pro. Is there a fix for this issue? Bushmom

Accessibility for spry menus and tabs?

How do you activate key navigation for accessibility for spry menus and tabs? What needs to be done in order to use menu for persons with screen readers to tab through?

Have a look here http://labs.adobe.com/technologies/spry/articles/data_api/apis/menubar.html inparticular the section on Constructor Options.
I hope this helps.
Ben

Background image in Spry dropdown menu

Hey everyone,
I am at my wits end. I am converting an old table-based page to a css standards-compliant page and need to use a spry drop-down menu but can't get a background image to show up in the menu. If the top-most level has no submenu, then the background image shows up fine. But if I have a submenu, then no background image will display. I have put a background image in every place I can think of in the css for the menu, but it won't show up. I have googled for a solution, read the documentation on the spry menus, as well as searched through the Dreamweaver forum to no avail.
Does anyone know how to do this? If it is not possible, can someone let me know that?
Here is the page: http://www.sportplanesflorida.com/index_css.php (notice how the "Learn to Fly" tab has no background image).
Thanks for your help.
Mike

remove the background-position:95% 50%; from your css.
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
background-position:95% 50%;
background-repeat:no-repeat;

CS6, Fluid Grid Layouts, and Spry Menu - sizing issues

Hi. I am a full-fledged nubie to Dreamweaver, so please forgive my ignorance. But I really need to build a new site, and I really like DW so far (much better than what I was using).
I am building a site with fluid grid layouts so it is properly sized across all decices. I have inserted a spry horizontal menu as my primary navigation. I got the menu to look like I want it as far as formatting goes.
But when I view the page live and change the size of my browser, the menu wraps around to the next row, even with fairly large browser windows.
Can anyone tell me how to scale the spry menu bar the same as an image does in a fluid grid layout?
Thanks,
Steven

Don't use Spry Menus. #1 they're not Responsive. #2 They don't work all that well on Touch Screen devices. #3 Adobe abandoned the Spry framework last year. Is that enough to convince you? See links below for alternatives.
Pop-Menu Magic2 by PVII (commercial DW Extension)
http://www.projectseven.com/products/menusystems/pmm2/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery Mega Menus http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
CSS3 Dropdown Menus
http://www.red-team-design.com/css3-dropdown-menu
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Troubleshoot Main Image for spry photo gallery

Hello, I am modifying some spry files to see if I can get the
hang of it using my images. I have taken the photo gallery files
gallery.js
SpryData.js
SpryEffects.js
xpath.js
The folder structure contains images and thumbnails on the
root folder as well as the ap.css sheet and photos.xml
The page is
http://www.proximita.com/learning/index.html.
Since I only have 1 photo gallery (and I did the getting
started tutorial and worked fine I wanted to add the slideshow
effect in the spry demo functionality) I only have one xml doc and,
as mentioned, the both image folders and the css sheet are on the
root, and the all the js files are in an includes folder.
The thumbnails show up fine, but, the main image does not
show up at all. I am almost sure this is a bad reference somewhere
or a begginners mistake but I cant find it.
I did modify the gallery.js because it referenced 2 or three
variables (like dsPhotos and dsGalleries that are used for the demo
I only have dsGallery) and I cahnged all of the other refrences to
dsGallery.
I think I am having problems here:
function ShowCurrentImage()
var curRow = dsPhotos.getCurrentRow();
SetMainImage("galleries/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
you can check out the whole code here:
http://proximita.com/learning/includes/gallery.js
Im unconcerned with appearance for the moment, and would just
like to see the main image and the slideshow functionality.
If you can help, please do. Thanks, Mario.

yes, I suspect that is because the tutorial talks about
building this from scratch and uses that name for the "thumbnails"
div rather than what they actually use in the demo files...
confusing, to say the least.
It would be nice if there were a simple document with demo
files that didn't include other stuff unrelated to JUST the slide
show (gallery)... and if the whole layout were more simple,
css-layout-wise...
or, if the demo files were commented with what each bit is
for and how to modify it.
quote:
Originally posted by:
Dragos GEORGITA
Hi Mario,
I took a look at your sample and I've noticed you change the
ID of the container that holds the thumbnails (it was called:
"thumbnails". now it's "thumbContainer").
You need to open gallery.js and change the observer to point
to the new container:
Change
Spry.Data.Region.addObserver("thumbnails", function(nType,
notifier, data) {
To
Spry.Data.Region.addObserver("
thumbContainer", function(nType, notifier, data) {
Regards,
Dragos

CSS and Spry not displaying

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

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

Images and Spry menus

Similar Messages

Maybe you are looking for