Spry widget menu bar background image help

Does anyone know of a good tutorial for putting a background image behind the whole menu bar, not just each button, and a tutorial for putting images behind each button.
Also, does anyone have a good tutorial on creating some sort of gallery, with thumbnails, in dreamweaver.
Thank you, using cs4

You can start here for your spry menu.
http://livedocs.adobe.com/en_US/Spry/SDG/index.html
You can also use a background image in the container that you have your SM in. You can use in in conjuction with, or in place of images for the menu.
For the gallery, I would look at third party products.
gary

Similar Messages

Spry Horizontal Menu Bar background image IE8 not visible.

I have a slight problem with a horizontal menu bar that I have placed on my site and am hoping someone can help me. It views fine in Firefox, however in IE8 the top menu background image is white instead of the image I specified. Firefox image is below.
Below is IE8 image lacking top menu background:
I am a novice and this is driving me nuts. How can something view fine in Firefox and loose the image in IE explorer? I must have a code incorrect, I know it. Any help is greatly appreciated.
Thank you,

At the bottom of SpryMenuBarHorizontal.css, you will find
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background-color: #FFF;
Change the background colour to transparent and all is well.

Spry Horizontal Menu Bar background image

Hello,
I am trying to insert a .gif file into the background of the
spry menu bar items, I believe the default was grey.
I changed it to dark grey and it worked fine but then I
decided it would look better with an image in it.
Therefore I created a .gif image that fit the menu and
inserted it into the css page for the spry menu.
However, this creates the drop down (sub) menus to be
transparent. This does not happen when I change the background back
to just a solid color. Is there a way around this?
The code that I entered was something like this:
.(other style codes)
background-color="#EC0000" url="images/image09" repeat-x;
thanx

At the bottom of SpryMenuBarHorizontal.css, you will find
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background-color: #FFF;
Change the background colour to transparent and all is well.

Spry widget menu bar as a library item - problems

I created a spry vertical menu bar and made it a library item. The original works great, however when I insert the library item into its own div tag on another page, the submenus will not pop out, either in DW or the browser view. The div tag is the correct size and I made the z index high enough. Here is the code of the page that works properly:
<!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>DM Consulting Dry Dock Training</title>
<link href="css styles/drydock2.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/header_title_white.png" width="645" height="116" alt="header" /></div>
<div id="logo"><img src="images/drydock_logo_blktxt.png" width="154" height="119" alt="logo" /></div>
<div id="mainContent">
    <div id="content">
      <p><span class="bolder1">D</span><span class="bolder1">M Consulting </span><span class="lineheight">provides Dry Dock Training, Dry Dock Conferences,<br />
        Dry Dock Software and Dry Dock Consulting      for:</span></p>
      <ul>
        <li class="lineheight"> Dock Masters</li>
        <li class="lineheight">Docking Officers</li>
        <li class="lineheight">Dry Dock Crews</li>
        <li class="lineheight">Engineers</li>
        <li class="lineheight">Naval Architects </li>
        <li class="lineheight"> Port Engineers</li>
        <li class="lineheight">Program/Project Managers</li>
        <li class="lineheight">Marine Surveyors</li>
        <li class="lineheight">Owners' Representatives</li>
        <li class="lineheight">On-site Representatives</li>
        <li class="lineheight">Consultants</li>
        <li class="lineheight">Others Involved or Interested in
          the <br />
          Dry Docking of Ships and Vessels</li>
      </ul>
      <div id="testimonials">"The course was excellent, straight forward and comprehensive. Instruction was great, expected <br />
        "death-by-power point" but was pleasantly surprised.
        I am better acquainted w/dry dock basics after the
        course and can trust the accuracy of the training
        based on the extensive experience of the instructors. Thank you!
        Very informative, very thorough."
          - David, Australia<br />
      </div>
      <div id="movie">
        <object width="560" height="340">
          <param name="movie" value="http://www.youtube.com/v/qLGUZEkbAwA?fs=1&hl=en_US&rel=0" />
          <param name="allowFullScreen" value="true" />
          <param name="allowscriptaccess" value="always" />
          <embed src="http://www.youtube.com/v/qLGUZEkbAwA?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed>
        </object>
      </div>
      <div id="moreTestimonials">»»» click here for more testimonials «««</div>
      <div id="footer">© COPYRIGHT 2010 DM CONSULTING</div>
    </div>
    <div id="navbar">
      
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a href="#index.html" title="DM Consulting home page">HOME</a></li>
        <li><a href="#" class="MenuBarItemSubmenu">TRAINING</a>
          <ul>
            <li><a href="#outline.html" title="Outline of our Training Course">General Information & Outline</a></li>
            <li><a href="#train_sched.html" title="Locations & dates of our Training Courses">Training Course Schedule</a></li>
            <li><a href="#drawings.html" title="Dry dock course drawings">Course Drawings</a></li>
            <li><a href="#testimonials.html" title="Read what our clients have to say">Testimonials</a></li>
          </ul>
        </li>
        <li><a href="#conference.html" title="Dry Dock Conference information">CONFERENCE</a></li>
        <li><a href="#software.html" title="Shop our software">DOCKMASTER SOFTWARE</a></li>
        <li><a href="#consulting.html" title="Dry Dock Consulting">CONSULTING</a></li>
        <li><a href="#clients.html" title="List of current and past clients">CLIENTS</a></li>
        <li><a href="#about.html" title="Learn about our company">ABOUT</a></li>
        <li><a href="#contact.html" title="Contact us">CONTACT US</a></li>
      </ul>
    </div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Here is the code for the page that DOESN'T work:
<!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>Training Course Schedule</title>
<link href="../css styles/drydock2.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="header"><img src="../images/header_title_white.png" width="645" height="116" alt="header" /></div>
<div id="logo"><img src="../images/drydock_logo_blktxt.png" width="154" height="119" alt="logo" /></div>
<div id="mainContent">
    <div id="content">
      <h2><span class="bolder1">Training Course Schedule</span><span class="bolder1"></span></h2>
      <p><br />
      Class sizes are limited so please register early. Early registration and payment provides the best value.<br />
<br />
      </p>
<p class="underline"><strong>4-7 October 2010 •   Honolulu, HI, USA </strong></p>
      <div id="schedulephoto"><img src="../images/conference-rm_train_s.jpg" width="250" height="123" alt="image" /></div>
      <p>The training will be held in Pearl Harbor, Hawaii, USA. <br />
        <a href="Registration_Hawaii.html">Registration form</a><br />
        <br />
      </p>
      <p class="underline"><strong>15-18 November 2010   •   Virginia Beach VA, USA</strong></p>
      <p>The training will be held in Virginia Beach, Virginia, USA. <br />
        <a href="Registration_Virginia.html">Registration form</a><br />
        <br />
      </p>
      <p class="underline"><strong>11-14 May 2011 •   London, United Kingdom</strong></p>
        The training is held in conjunction with the Royal Institution of Naval Architects (RINA). Registration and payment will be made directly to RINA. <br />
        Visit RINA's <a href="http://www.RINA.org.uk" target="_blank">website</a> and go to "Events" or call +44 (0) 20 7201 2401.<br />
<br />
      </p>
      <p><strong>Your Location</strong></p>
      <p>Training tailored to your organization's needs, including training at your facilities, <br />
        is also available.    </p>
    </div>
    <div id="nav3">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#index.html" title="DM Consulting home page">HOME</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">TRAINING</a>
        <ul>
          <li><a href="#outline.html" title="Outline of our Training Course">General Information & Outline</a></li>
          <li><a href="#train_sched.html" title="Locations & dates of our Training Courses">Training Course Schedule</a></li>
          <li><a href="#drawings.html" title="Dry dock course drawings">Course Drawings</a></li>
          <li><a href="#testimonials.html" title="Read what our clients have to say">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="#conference.html" title="Dry Dock Conference information">CONFERENCE</a></li>
      <li><a href="#software.html" title="Shop our software">DOCKMASTER SOFTWARE</a></li>
      <li><a href="#consulting.html" title="Dry Dock Consulting">CONSULTING</a></li>
      <li><a href="#clients.html" title="List of current and past clients">CLIENTS</a></li>
      <li><a href="#about.html" title="Learn about our company">ABOUT</a></li>
      <li><a href="#contact.html" title="Contact us">CONTACT US</a></li>
    </ul>
    </div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
I understand about having the script and link element that connect my page to the dependent files in the SpryAssets folder in the header and the JavaScript function cal at the bottom on each page. I don't know what else to do - HELP!

Welcome to the Dreamweaver world!
Well, having your index.html page at the top/root level is important, as that is the default page by which people will enter your site.
Having other pages in folders is fine...I do it all the time in order to keep departments or categories of information sorted.
One characteristic of having pages in folders is that the hierarchy of files in folders (perforce) puts them at different depths in the site.
This is not inherently a bad thing! Just one to remain aware of. When you look at your site files in the Files Panel, you can see a graphical representation of those different levels.
But the nature of a library item is that it is identical in all its instances, which is what makes it useful...change it in the library, and it changes site-wide. The down-side of that identity is that when your files are at different depths in the hierarchy, their links back to, say, home (or any other same file) will change depending on the depth. You can see this if you make a link on a page, then drag the page (in the Files Panel) to a different depth...say, into a folder when it started at root level, or vice versa. Check the link, and you will see that it automatically adapted to the new path.
Library items do not do that; they do not change, so some of your links will be 'wrong' when you refer to pages that have different paths than the ones originally set up in the library item... because of the change in hierarchy.
All this is, of course, reliant on your creation of the site in the first place, as defining the root folder's location on your computer gives Dreamweaver a starting point for handling (juggling?) all the location-information for your site's files.
Beth

Question on spry vertical menu bar backgrounds

I have a spry vertical menu bar. The menu branches off to 3 or 4 levels in some cases. When you mouse over the menu structure the menu path that you have selected turns a different color. I acheived this by giving
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
a different text color and also a different background color using CSS. The thing I want to acheive now is to somehow make listings within my menu structure that are clickable links a slightly different color. This is to signal that a menu selection that is currently being hovered over is indeed clickable (and linked to another page). For example, most of my clickable menu listings are at the end of a menu branches. That is to say the menu listing at the 1st and 2nd level are not clickable (linked to another page) but the listing that falls at the end of the menu branch is clickable.
How can I make the menu listings that link to other pages a different color then the other menu listings that do not link anywhere but are instead just the preceding struture to get you to the end of the menu structure?
Currently menu listings which merely branches off and do not link to a clickable page have a reference of "#" as shown below.
<li><a href="#">Menu_1</a>
This "#" was put there by Dreamweaver so I just followed the pattern. Clickable menu listings reference another HTML page as you would expect.

Nancy,
Thanks for the reply (it helped me know how to approach it). It looks like editing
ul.MenuBarVertical a.MenuBarItemSubmenuHover
will give me the behavior I was looking for. I don't know if that is what I want to do now that I look at it though. Using different colored backgrounds when hovering over links seems to contrast too much (even though some are clickable and others are not). Perhaps I didn't have the right color choice.
Instead I thought about emphasizing links that are clickable (with some type of visual variation) as opposed to making the hovering background color path to those clickable links different. I experimented with placing a 1 inch border around links in the menu that can be clicked but I am not sure if I like it or not.
I am using a background color of #7D120C for the hover. Any suggestions are welcome and appreciated.
http://www.indiana.edu/~iutreas/index.html
Thanks,
JTB

How to show active page in Spry Menu Bar using images

Hi,
I have already read this answer "how to show active page in spry menu bar" but I am using images, not text. I have mouse-over and mouse-out working in the Spry Menu Bar using image.png and image-over.png, but I cant' figure out how to get the image-over.png to appear on the active page since the spry menu bar is locked on the individual pages. (I tried to put it in an editable comment, but spry wouldn't go for it. :-)
Any ideas. Here is the code:
<ul id="MenuBar1" class="MenuBarHorizontal">
       <li><a href="../index.html" id="home" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images/all_pages/home-over.png',1 )"><img src="../images/all_pages/home.png" alt="Home Page" name="home" width="58" height="20" border="0" id="Image8" /></a></li>
       <li><a href="../show.html" id="show" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('show','','../images/all_pages/show-over.png',1)"><img src="../images/all_pages/show.png" alt="The Show" name="show" width="101" height="20" border="0" id="show" /></a></li>
        <li><a href="../team.html" id="team" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('team','','../images/all_pages/team-over.png',1)"><img src="../images/all_pages/team.png" alt="The Team" name="team" width="97" height="20" border="0" id="team" /></a></li>
        <li><a href="../company.html" id="company" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('company','','../images/all_pages/company-over.png',1)"><img src="../images/all_pages/company.png" alt="The Company" name="company" width="139" height="25" border="0" id="company" /></a></li>
        <li><a href="../beatles-tickets.html" id="tickets" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tickets','','../images/all_pages/tickets-over.png',1)"><img src="../images/all_pages/tickets.png" alt="Tickets" name="tickets" width="75" height="20" border="0" id="tickets" /></a></li>
        <li><a href="../media.html" id="media" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','../images/all_pages/media-over.png',1)"><img src="../images/all_pages/media.png" alt="Media" name="media" width="61" height="20" border="0" id="media" /></a></li>
        <li><a href="../news-reviews.html" id="news" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news_reviews','','../images/all_pages/news_reviews-over.png',1 )"><img src="../images/all_pages/news_reviews.png" alt="News-Reviews" name="news_reviews" width="149" height="20" border="0" id="news_reviews" /></a></li>
        <li class="MenuBarHorizontal"><a href="../contact.html" id="contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/all_pages/contact-over.png',1)"><img src="../images/all_pages/contact.png" alt="Contact Us" name="contact" width="79" height="20" border="0" id="contact" /></a></li>
     </ul>
Thanks so much for helping!
Cheers,
Janell

Just found this page:
Persistent Page Indicator
Update: Drat, it is for text menus only not using images. :-(
Cheers,
Susan

*Help* Spry Horizontal Menu Bar wont show and cant seem to center it with rest of content

Hey,
I am a newbie to Dreamweaver and was wondering if someone can
help me with the Spry Horizontal Menu Bar....
http://www.djdanmatthews.net
1) After moving mouse over diffrent areas of Spry menu bar
the text seems to disapear or not show up?
2) I can't seem to center content of Spry menu bar with rest
of website?
3) How do I ad a image (where also can I get it) to the Spry
menu bar so it looks more professional &3d?
Thanks so much,
Dan

*Bump

Spry Horizontal Menu Bar not working in IE

Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
I appreciate any help I can get with this as I have tried everything I know.
This is the link to my site: www.digitaldesignsbymargee.com

Hi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
w@charset "UTF-8";
/* 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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
/* 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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 14em;
    float: left;
    border-color: white;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: none;
    border-right-width: 1px;
/* 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: 14em;
    position: absolute;
    left: -1000em;
/* 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 same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 14em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 99%;
/* 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
/* 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
    display: block;
    cursor: pointer;
    padding: 0.9em 0.75em;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    text-decoration: none;
    color: white;
/* 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
    color: #FFF;
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: 10px 85%;
/* 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
    b/ackground-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 10px 85%;
/* 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
    b/ackground-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;
    filter:alpha(opacity:0.1);
/* 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;
        float: left;
     /* I have updated and checked the code as mentioned in the forum topic but still it is not working */
ul.MenuBarHorizontal a:visited { color: white;}
ul ul a { background-color: #436d9c; }
ul a.MenuBarItemHover { background-color: #19385a; }
ul .MenuBarItemSubmenu ul li a { border: none; }
ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
ul.MenuBarSubmenuVisible li { border: none; }
I appreciate any help I can get with this as I have tried everything I know.

Spry Horizontal Menu Bar in IE

Hello,
I had looked at the forums for a possible solution to this, and none of the answers I have found work for me. I have a spry horizontal menu bar with a background image. It works in Safari, Chrome, and Firefox but on IE the background image does not show. There is only a white background. I have changed ul.MenuBarHorizontal li.MenuBarItemIE to have a background image but it still doesn't show in IE.
This is the website: fwmedpeds.net
I am very new to this and any help is appreciated.

If you go to your online SpryMenuBarHorizontal.css which can be found here http://fwmedpeds.net/SpryAssets/SpryMenuBarHorizontal.css, you will see the last few lines as I have previously quoted.
You will also see what Ken Binney has said
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #000;
text-decoration: none;
background-image: url(../../../../../../../../My%20Documents/Fort%20Worth%20Med-Peds%20Website/MySite/Image s/button.jpg);
padding-top: 0.5em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
/* 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
color: #000;
background-image: url(../../../../../../../../My%20Documents/Fort%20Worth%20Med-Peds%20Website/MySite/Image s/button.jpg);
font-weight: bold;
Gramps

Spry Vertical Menu Bar Styling Issues

Hello all,
I'm having CSS issues with a spry vertical menu bar. The Menu
is fairly basic but, it has some odd sizing requirements specified
by it's designer. The designer would like the sub menu items to all
have different widths that correspond to the actual content within
them. Here is sample.
http://staging.rm306.com/cycle/
The menu seen at the page above was not build with Spry. It
was build with another tool and has considerable problems with
consistent browser display.
Can anyone give me a short list of styles and where they
should be applied that might help me achieve this reletively simple
effect?
I've tried to use Spy menu bars in my projects in the past
but, there was always some sticking point. I'd like this time to be
the winner if possible.
Thanks for your time and patience in advance,
Kevin

The sample page I posted came after searching for an easy
"how to do it". The closest I found to a tutorial was this:
http://www.adobe.com/devnet/dreamweaver/articles/spryte_menu.html
The author designs and implements a spry menu with Fire Works
graphics. The last section describes how to modify the existing CSS
for multiple levels. Yet I found the sample page easier to follow.
I hope this helps though.

I have an iPod Nano that is synced to my mac, but it is sent in for the battery issue. Anyway, I have bought a 2nd gerneration Ipod touch and I want to now sync it to my mac, but it does not show up in the left menu bar. Please help. Thanks All!

I have an iPod Nano that is synced to my mac, but it is sent in for the battery issue. Anyway, I have bought a 2nd gerneration Ipod touch and I want to now sync it to my mac, but it does not show up in the left menu bar. Please help. Thanks All!

http://support.apple.com/kb/TS1591
There have been some problems accessing pages on the Apple web site. If the hyperlink gives you a "We're sorry" message, try again.

Spry Horizontal Menu bar - submenu position

I'm new to spry so apologies in advance if this has been
posted before.......
I'm putting together a new site using the spry horizontal
menu bar - I've managed to put together a CSS format which works
well in both FireFox and IE7 EXCEPT for the position of the
sub-menus below the main menu bar. IE7 seems to position the sub
menu relative to the top right corner of the parent menu item.
Firefox seems to position it relative to the bottom left corner -
and I can't find a solution which works for both browsers. Any
ideas?

You must have fixed it in the meantime as I see no problem.
Gramps

Why does Spry horizontal menu bar displays as a list?

I createda spry hoizontal menu bar which looks great on my workspace but when I preview it in a browser, it displays as an unordered list.Does anyone have an explanation for what has happened and how to correct it?

It sounds like the path to the support files - SpryMenuBar.js and/or SpryMenuBarHorizontal.css - is not correct.
Gramps

Spry Menu Bar issue, NEED HELP...???

Here is the coding for a menu bar that i created with CS3, for some reason i am having an issue when i open the web page in IE, on firefox and safari it looks fine, the menu drops down to sub menu's fine, but for some reason when i open it in IE, the submenu's show on the very top of the page rather than right below the menu itself, please check my coding and see if there is an issue???
i ran compatability and there are no issues shown.
@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;
    width: auto;
/* 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: 10.4em;
    float: left;
    background-image: url(tab2.png);
/* 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: 8.2em;
    position: absolute;
    left: -1000em;
    text-decoration: underline;
/* 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;
    background-image: url(../tab1.png);
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
/* 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
/* 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
    display: block;
    cursor: default;
    padding: 0.5em 0.75em;
    color: #FFFFFF;
    text-decoration: none;
    border-left-color: #0063bd;
    border-right-color: #0063bd;
    border-right-width: 3px;
    border-left-width: thin;
    font-family: Calibri;
    font-weight: bold;
    font-size: 19px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #000000;
/* 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
    color: #000000;
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-block;
    f\loat: left;
    position: relative;

Hey gramps, thanks for the info, i have updated my spry framework to 1.6.1 but the problem is still the same, i recreated my menu with the new 1.6 and it still doing the same thing, the submenu's are like vertically reversed... ugh need help.
here the new code
@charset "UTF-8";
/* 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: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
/* 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: 10.4em;
    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: 8.2em;
    position: absolute;
    left: -1000em;
/* 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;
    background-image: url(../tab1.png);
    line-height: 18px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
/* 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
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 19px;
    font-family: Calibri;
    font-weight: bolder;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #000000;
/* 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
    color: #000000;
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: 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-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-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-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;

Having Trouble with Spry Menu Bar Hover Image

I added a hover image to the spry menu bar, however, whenever I roll my mouse over the buttons all, but one of the buttons' fonts grow in size, also increase the size of the button. Can someone please help me with this?

Hello,
the culprit must be in your (horizontal or vertical) "SpryMenuBar.........al.css". Please send us a link to your website in question, so we can better analyze.
BUT, and I quote from different contributions of the forum:
"Spry has been deprecated and is no longer officially supported by Adobe", “Adobe abandoned Spry late last year after CS6 came out. Future products will probably not contain any Spry so learning to use jQuery is a valuable skill to have for the future.” “The news was released in August last year: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l”.
I'd recommend you switch to a jQuery library for your further requirements.
If you have a budget to work with, look at PVII's Pop-Menu Magic3:
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish (free): http://users.tpg.com.au/j_birch/plugins/superfish/ aso.
Hans-Günter

Spry widget menu bar background image help

Similar Messages

Maybe you are looking for