Spyr Menu Background Image

Hello
I'm building my first site in Dreamweaver (now CS6). It's been an education and one step forward/ one step back kind of thing.
I have a good little spry menu that changes background colour from black to grey when I hover over the various page titles but I think it would look better if I had a gradient effect instead of a solid colour.
So I thought I could do that by making a small image in Photoshop and adding that as a background to one of the Spry properties; is this possible? If so, which of the Spry property would I add the image to?
Cheers,
Ossie

Depends on which of the Spry Menus you are using. 
Spry Menu 2.0 has greater latitude for customization than the Spry pre-release 1.6.1 had.
Can you show us a link to your page?
Nancy O.

Similar Messages

  • Menu background image size

    Hi...if I follow this link http://docs.info.apple.com/article.html?path=iDVD/6.0/en/17.html and the instructions for preparing menu background images. My images still get cropped. Does anyone know the real sizes that will fit perfectly?
    From the Apple link:
    "If you want your images to fit the DVD window exactly, use an image-editing application to crop and resize the images to the following dimensions:
    720 x 540 pixels for standard video in NTSC format
    854 x 480 pixels for widescreen in NTSC format
    768 x 576 pixels for standard video in PAL format
    1024 x 576 pixels for widescreen in PAL format"
    Many thanks in advance

    Shingy,
    Today there is an update to iDVD (as well as other iApps) that you should make.
    After doing the update this is what I found:
    I'm not sure if the things I'm seeing are a result of the update, but after updating I have further defined the problem.
    The problem now seems to be in figuring out the proper background size when using a widescreen theme converted to 4:3
    Widescreen as widescreen and 4:3 as 4:3 work as expected in PAL.
    So, if you stick with the originally discussed image sizes for PAL you will be OK AS LONG AS you don't try to use a widescreen theme as a 4:3 theme. (I didn't try using a 4:3 theme as widescreen.)

  • Spry Menu Background image not working in IE

    I have created a website using Dreamweaver CS5 and having trouble with my Spry bar in internet explorer. It looks great in chrome, firefox, etc, but in IE there is a white background instead of my background image and the submenus have moved WAY right.. can someone help me!
    SpryMenuBarHorizontal.CSS is below:
    @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: 800px;
    /* 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: center;
    cursor: pointer;
    width: 160px;
    float: left;
    background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
    ul.MenuBarHorizontal li a{
    color:#FFF;
    ul.MenuBarHorizontal li li{
    background-image: url(../images/menu_background1.jpg);
    ul.MenuBarHorizontal li li a{
    color:#000;
    ul.MenuBarHorizontal li li li{
    background-image: url(file:///E|/MAIN_website/images/index_06.jpg);
    ul.MenuBarHorizontal li li li a{
    color:#FFF;
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
    ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
    color:#33CCFF;
    /* 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;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 160px;
    /* 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: #FFF;
    text-decoration: none;
    font-family: Cambria, Arial, sans-serif;
    font-size: 14px;
    /* 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;
    text-decoration: underline;
    /* [disabled]background-image: url(file:///E|/MAIN_website/images/menu_background.jpg); */
    /* 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
    background-color: #33C;
    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: 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;
    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;
    f\loat: left;
    background: #FFF;

    Because I can't see your site and code in context, I will make a guess that this style is throwing off your alignment:
    /* 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: center;
    cursor: pointer;
    width: 160px;
    float: left;
    background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
    Remove the text-align:center; from the above style.
    Instead of centering your list element (li), center the link text (a) itself:
    /* 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: #FFF;
    text-align: center;
    text-decoration: none;
    font-family: Cambria, Arial, sans-serif;
    font-size: 14px;
    If you don't want the submenu text to be centered, do this immediately after the previous style:
    ul.MenuBarHorizontal ul a {text-align: left;}
    The sub-submenus are also set up by default to be jogged a bit to the right. You can adjust this style:
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    that causes sub-submenus to fly out to the right of the submenus to which they attach.
    Submenus themselves (not the sub-submenus) should fall directly under the top menu item by default, once you remove the text-align: center; on the li item (above).
    Beth

  • Why won't FCP X burn the menu background image when sharing directly to DVD?

    At one point recently I was able to drop in a jpg file so that FCP X would display this image in the menu background when a disc is burned directly out of FCP X when sharing directly to DVD. It worked at first, and then I decided I needed a higher quality image, but this one won't burn. My DVD now just has a black menu background. I can't figure out why this is happening. Please help! I'm using a late 2008 MacBook Pro 2.4Ghz 15" with OS 10.8.4. FCP X is up to date as well. My harddrive is fairly full in case that might cause some errors. Are there any specs on what type and size an image FCP wants for this function? Thanks for any help!
    Gregg

    Thank you, reducing the image size worked! I had used a low res file before, and with success decided to increase the resolution/size, and then it didn't work. the image did appear in small preview in the export panel, but wouldn't burn when all was said and done. the dimensions you gave worked fine. unfortunately, it makes the image a little bit fuzzy, but i dont think i can do anything about this. at least it burned it in there. thanks!

  • Menu Background Images - distorted for some reason...??

    Hi again,
    posted this problem a while ago, thought i had discovered a fix, but haven't had time to work on it in a few weeks. i have a high quality .tif image file 720x576 in size to use for my background image on a menu, but when it is placed in, the diagonal lines become jagged as if DVDSP was stretching the image in some way. i have tried a number of different dimensions (going by what i found in the help files) and nothing seems to work. the 720x576 .tif seems to be the closest so far...
    any ideas why this is happening? the aspect ratio is set to 16:9 anamorphic and the image is the exact size of the canvas, so i don't understand why it is distorting.
    any help much appreciated.
    thanks
    Harry

    Glad you got it sorted...
    But that actually makes no sense based on the information you gave.
    If you are creating PAL menus then you can either use the latest versions of Photoshop which use Pixel ration Compensation (or something like that) to show you in Photoshop what a 16x9 menu would look like at 1024x576 when the actual file is really 720x576. If it's a 4x3 menu it will appear as 768x576 when it's actually 720x576
    The other alternative is to create your menu at 1024x576 (as you said you had it as 16x9) then save out the menu from Photoshop as a 720x576 file and bring it into DVD-SP and flag it as 16x9 - which is what you said you had done...
    So I am intrigued how you have now fixed it... when you started with a 720x576 file

  • My menu background images are not working in IE

    Hi,
    I've tested my site on multiple browsers and everything seems fine, apart from IE - which only displays the menu's background image when the user is on that current page. Can anyone help me out, please?
    Thanks in advance.
    http://millennium-blinds.co.uk/

    I'm not sure but I did find two things you should change:
    In your html change:
    <li><a href="index.html">home</a></li>
    to
    <li><a href="/">home</a></li>
    And in your CSS add this:
    html { height:101%; overflow:scroll; } 
    That will force a vertical scroll bar and keep the shorter pages from jumping around.
    Bob

  • Spry tab menu background image is not displaying on remote server

    Hello All,
    I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
    Here is the link
    http://www.geftas.com/temaritestpage/about.html
    Also I am uploading Css and html code below
    Any help would be exteremely appreciated.
    Thanks
    <!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=utf8"/>
    <meta http-equiv="content-type" content="cache" />
    <meta http-equiv="robots" content="INDEX,FOLLOW"  />
    <meta http-equiv="keywords" content="Enter Keywords"/>
    <meta http-equiv="description" content="Description Here" />
    <title>TEMARI&CO. | Business Strategists</title>
    <link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
              <div id="header"></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a></li>
          <li><a href="about.html" class="current">ABOUT</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
            <ul>
              <li><a href="#">Business Plan</a></li>
              <li><a href="#">Marketing Plan</a></li>
              <li><a href="#">Incorporation</a></li>
              <li><a href="#">Accounting System</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#">OUR PROCESS</a></li>
          <li><a href="#">CAREERS</a>      </li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    <div class="shadow" id="content">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">values</li>
          <li class="TabbedPanelsTab" tabindex="0">people</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
                    <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
            </div>
          </div>
          <div class="TabbedPanelsContent">
                      <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem n, </p>
                                <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, , </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit a, </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet,  </p>   
            </div>
          </div>
        </div>
      </div>
    </div>
      <div id="footer">
    <div id="legal">
                          <ul>
                              <li>Copyright © 2012 Temari&Co</li>
                        <li>| Privacy Policy |</li>
                        <li>Terms of Use</li>
                    </ul>
        </div>
                <div id="socialmedia">
                          <ul>
                              <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                        <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                        <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                        <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
                  </ul>
          </div>   
      </div><!-- end footer-->   
    </div><!-- end wrapper-->
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    @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.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%;
              height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTab {
              position: relative;
              float: left;
              background-color: #FFF;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              font-weight: normal;
              color: #666;
              height: 30px;
              width: 116px;
              text-transform: uppercase;
              text-align: center;
              line-height: 30px;
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #FFF;
              height: 100%;
              width: 824px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              color: #666;
              border-top-width: 1px;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-top-style: dotted;
              border-top-color: #CCC;
              border-right-color: #CCC;
              border-bottom-color: #CCC;
              border-left-color: #CCC;
    .TabbedPanelsContent {
              height: 100%;
              width: 100%;
              overflow:hidden;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              background-color: #EEE;
              position: relative;
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
    .TabbedPanelsContent {
              clear:both !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
              width: 744px;
    .TabbedPanelsTab {
               overflow: visible !important;
               display: block !important;
               clear:both !important;

    Assuming these are the images you're trying to display:
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    You have 2 root paths in your URL code. I think this is how your file structure looks like on your local computer. However, on a remote server, ../ by itself means you're pointing to the root folder of your website. Your URL linkage should be corrected based on the relativity and your background will work without a problem.

  • Builds warns for missing menu background image

    Hi guys,
    I'm having trouble with building a project. I have four menus; two for each language.
    The first one (Swedish) works fine, scripting and branching is OK.
    The second one (English) does not work at all. Even though I have set background and overlay image in the English menu(s), build warns that no image is set.
    What should I do?
    In my other post the English branch is not run at all, even if everything seems to be correct in Simulator, it does not work in DVD player.

    I'm using the UB version. The assets are all there, have double-checked.
    I always use TIFFs for backgrounds and overlays, since layered menu could cause problems. (If not, they are at least slower on playback).
    Alternate language menus? You must be joking, right? I would NEVER trust the viewer to set up their stand-alone DVD or computer to match language settings. Nope, plain old "duplicate" menus, with different graphics and scripting to stay in either menu branch.
    I did the whole thing from scratch, using all the same assets. Now it works just fine.
    This is a first time for me.... hopefully the last, too!

  • Menu background image possible on default theme of...

    Just wondering is it possible to enable or put a image background on MENUS in nokia 5800 xpressmusic phone's default theme, as i have seen in many custom themes??

    The background is all determined by the theme, so in order to put a background in all screens you need to create a theme. You can do this using Carbide UI from forum.nokia.com, but this requires detailed knowledge of the phone software to use effectively. There are similar theme creators at websites like www.zedge.net, but there is a very real chance that they might not be up to date with the 5800's OS yet.

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

  • Shrinking down a background image to make it fit

    I want to use a vertical-shaped .jpg as the menu background image in DVDSP.
    How do I shrink it down so it fits within the title-safe area, when I'm creating my menu? I've imported it, and dragged it, but can't find where I can alter its size.

    Your best bet is doing all resizes outside DVD SP, if you have Photoshop there are templates in the recent versions for proper title/action safe in normal, wide screen etc.

  • Unable to use an image in a DVD menu background

    I've been unsuccessful in using an image as the background in the DVD main menu in PE 9.  The image shows up correctly in the preview, but not in the burned DVD.  I'm a long time user of PE 2.0 and never had this issue.  I've tried different image sizes (720x486, 720x480, 640x480), different image formats (jpg, bmp, psd), and different menu templates with no success.  The only thing that worked was specifying a frame out of the video.  Please help so I don't create any more drink coasters!

    Barry,
    Welcome to the forum.
    This appears to be a Bug in PrE 9, and there are several threads on the same issue. It seems that some Menu Sets perform OK, some will not accept a new background image, and some will accept it for either the Main, or the Scene Selection Menu, but not both.
    I'll find a few of those, and link to this thread, for your reading. In the meantime, I would suggest filing a Bug Report with Adobe, so that they will know to work on correcting this problem.
    Good luck,
    Hunt

  • Spry Menu Bar using CSS background image without losing submenu ( V) indicators

    Spry menu bar sets the down and side submenu indicators using
    a positioned background image. I have a requirement to use a
    specific background image yet must retain the > and v submenu
    indicators. Without having to generate full width custom background
    images for each of the menu item types to include the side and down
    menu indicators, is there anyway to use a generic background image
    and show the indicators using just CSS?

    Don't use reserved words in JS
    var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
    event is such a reserved word. If you change this to event1 then all is well.
    I hope this helps.
    Ben

  • Background Image in Spry Menu

    Hi everyone,
    I'm really struggling with this Spry Horizontal Menu thing. I tried to read thru some other people's duscussions but I got lost.
    I just want to add a gradient image instead of a plain color background.  Now, I did achieved that on the main level items but as soon as I add submenus, the background image dissapear from the main items and shows on the submenus. That's it.  I hope this is easy enough to fix.
    I'm not that familiar with CSS and by looking at some samples, the CSS code is embedded in the same HTML page where the menu bar is.  Isn't supposed to be on it's own CSS page? And one more thing, can the horizontal menu be inside a table? And if not, how can I center it on the page?
    I'm a beginner so please be gentle... : )
    Thanks

    This is good but my problem is that my background image dissapear from the main menu item as soon as I add a submenu item... everything else seems to work just fine.  About the question if the menu could go inside a table or if has to be out side of it, how can I centered it on the page?
    thx

  • Spry Menu Bar - Different Background Image Wanted for menu items

    Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
    I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
    It's a simple one level list with no sub-levels.
    Everything is good, except I can only set one background image for all the menu items at this level.
    I want the first, last, and all the middle, menu items to use different background images.
    I have no idea where or how to insert the code to set a different background image for each individual menu item ...
    I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
    Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
    They've got funky indenting of the text as well.
    ~~~~~~
    This is the code for my menu list ...
      <div class="sidebar1">
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="#">Home</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Groups</a></li>
          <li><a href="#">Events</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
             <li><a href="#">Help</a></li>
        </ul>
      </div>
    This is how I set the background image (but I can only define one image) ...
    I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
    CSS Styles
    SpryMenuBarVertical.css
    ul.MenuBarVertical a
    I then select the background category
    and browse to the image file.
    doing this changes my CSS code as follows ...
    ul.MenuBarVertical li
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 170px;
        margin-top: 4px;
        margin-bottom: 4px;
        background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
    ul.MenuBarVertical ul
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: absolute;
        z-index: 1020;
        cursor: default;
        width: 170px;
        left: -1000em;
        top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 95%;
        background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
    ul.MenuBarVertical a
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        color: #0000;
        text-decoration: none;
        font: normal 12px Verdana, Geneva, sans-serif;
        background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
    ~~~~~~
    These are the three images I want to apply to the top middle and bottom menu items :
    Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
    Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
    Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
    ~~~~~~
    As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
    ~~~~~~
    So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
    I'd really appreciate any help on this as I'm out of ideas.
    Thank you.

    The easiest way is to use pseudo elements.
    To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
    <style>
    ul.MenuBarVertical li:first-child a {
        background-color: red;
        color: white;
    ul.MenuBarVertical li:last-child a {
        background-color: green;
        color: yellow;
    </style>
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    In your case, in liue of the background colour, you would have an image.
    Gramps

Maybe you are looking for