The Spry menu bar personalized with background Images

Hello

Is there a way to make a spry menu horizontal bar by using an image of different background of a different width for each item?  In other words, the format individually each menu item.  I'm doing a bar with drop down menus using custom images, that I created in Photoshop, but have only been able to use the same image for all the items in the menu.  Thank you.

Each menu item will require that this is the style and the name of the class of its own.

Each class will have to be applied to each following anchor tag:

http://ALT-Web.com/demos/multi-colored-list-menu.shtml

Nancy O.

ALT-Web Design & Publishing

Web | Graphics | Print | Media specialists

http://ALT-Web.com/

Tags: Dreamweaver

Similar Questions

  • Background of the Spry menu bar problem

    Hello
    I tried to search for this problem, and although I found others with the same problem, there has been no response (probably so obvious I missed it and they understood.) And I update the Spry menu bar to the latest version.

    The Horizontal Spry menu bar works fine on Firefox and IE 7, the background is white and the submenus, not the intention. Alignment and size is fine, just designed background colors do not work (on the menu itself, I want a transparent background on submenus, #777079.)
    Website: September Entertainment Site
    Style sheet Spry: Spry CSS

    Thank you in advance for any help you can give me.
    See you soon,.
    Janell

    Hello
    Just found the problem for someone who is having the same thing happen. This is the cut down "Sections":

    /*******************************************************************************

    BROWSER HACKS: hacks below should not be changed, unless you are an expert

    *******************************************************************************/

    / * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
    UL. MenuBarHorizontal iframe
    {
    position: absolute;
    z index: 1010;
    Filter:alpha(opacity:0.1);
    }
    / * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.
    @media screen, projection
    {
    UL. MenuBarHorizontal li. MenuBarItemIE
    {
    display: inline;
    f\loat: left;
    background: fff;
    }
    }

    Where it says: "background: fff;" change to everything that you need, in my case, "background: transparent;"

    Voila!
    See you soon,.
    Janell

  • Dreamweaver CC: Layouts start CSS & missing of the Spry menu bar

    • I preset web training and our client updated for Dreamweaver CS4 Dreamweaver CC 2015. That are the CSS Starter layouts in Dreamweaver, for example the column 2 fixed, header and footer layout? I don't find it in Dreamweaver CC 2015. It was a good starting point to teach students to create a web page using one of these start CSS page layouts and then customize.
    • I also can't find the Spry menu bar to create a menu (up to three levels) bar.
    • What is the best options for me to use instead the CSS starter layouts & the Spry menu bar? Students know nothing about web design when they start with the course.

    It is more a spry menu bar, which was crap anyway. You can learn how to make a simple CSS - only menu or a menu jQuery.

    The new version of DW includes a starter starter site, which is how many sites asre built these days. Bootstrap also contains a navigation pane.

  • change the spry menu bar

    Just opened my page in the new Dreamweaver 20141. What happened to the easy edit function for the Spry menu bar? I'm sure he's here somewhere, I just can't find it. It was so easy in the previous version. It just appeared at the bottom of the screen when I clicked on the bar. Where is he now?

    Never mind. I found it. Window > properties

  • The Spry menu bar navigation

    I am using the Spry menu bar and have several menu on my home page items that have incorporated under them. For example, I have an element of menu 'navigate' on the home page, and the slot 'Browse' 'saw inventory"and"wish list ". I want users to be able to access the sub through the menu item "Browse" items but does not allow users to open "Browse."

    I would like suggestions.

    Thank you

    Iain

    Just put a # where otherwise the URL would go as a

  • Browse
  • GRAMPS

  • problem with the spry menu bar

    Hello. I'm having a problem with the submenu appears at the top of the page instead of the sub menu. I have added settings and changed % to the "ems", but still does not work. I think it has something to do with being right under the menu spry flash movie. Can anyone help? Thanks in advance.
    Here is the link to the site:
    link to the site

    Hello

    The problem is due to the

    Tags that you added all through
    the spry menu.
    In IE, which not only align text Center but it also aligns the
      which
      are drop down menus in the center of the
    • who owns.
      This changes things.

      First of all, change this:

      To do this:

      So, if you want your text aligned to Center:

      Change this in the sections file:

      UL. MenuBarHorizontal a {}
      display: block;
      cursor: pointer;
      background-color: #000000;
      Padding: 0.5em 0.75em;
      color: #FFFFFF;
      text-decoration: none;
      }

      To do this:

      UL. MenuBarHorizontal a {}
      display: block;
      cursor: pointer;
      background-color: #000000;
      Padding: 0.5em 0.75em;
      color: #FFFFFF;
      text-decoration: none;
      text-align: center;
      }

      I hope this helps.

      Take care
      Tim

      "rio333" wrote in message
      News:ft6src$RHS$1@forums. Macromedia.com...
      > Hi. I'm having a problem with the submenu appears at the top of the page
      > instead of the under the menu. I've added parameters and modified % to
      > "ems".
      > but still does not work. I think it has something to do with flash
      > film
      > under the spry menu. Can anyone help? Thanks in advance.
      > Here is the link to the site:
      > http:www.fidoandcompany.com
      >

  • Text in bold Safari causing problem with the Spry menu bar

    I made a web site using a Spry menu bar. It worked fine in all browsers, as far as I knew. I was just alerted by owner esite th that the menu bar was the last link off position seen in Safari. I don't know when this started happening. I noticed that the text in Safari is more bold than firefox or IE. My guess is that this is the problem. I searched on google for help and found this

    Add-text-shadow: 0 0 0 #000; to the css.

    I tried but it don't seem to have any effect.

    the site is here:

    http://www.telluridegravityworks.com/

    Can anyone offer advice on how I might solve this problem? Thank you!

    I don't see the problem under Win 7/Safari (guess it's a question of Mac) but I see it in Win 7/IE9.

    In the CSS file, http://www.telluridegravityworks.com/css/gravity-works-winter.css

    set the width of the container navbar fix here

    {#nav - menu
    Width: 455px; / * adjusted to 445px * /.
    padding: 0px;
    overflow: hidden;
    float: left;
    margin left: 515px;
    }

  • Cannot change the color of hover in the Spry menu bar

    I try to customize my horiztonal Spry menu bar and managed to almost I want, except the point State. It should be easy enough since I want all (top of page menus and submenu items) to go to the image background even when red flew over (as well as having the top red menu item when its submenu is open).

    Currently I have while hovering to the correct color, with the exception of the top Menu of the page that contains submenus (even if their submenus are fine, but also high Menu with no submenus items).

    I thought that I had put my finger where to change this in the CSS Spry, but something can be in conflict, since change it doesn't seem to work as it has in other menus, I tested it on that...

    Here is the project of the site- http://beta.deltsig.com/

    (Notice that the elements of the first menu 4 goes to red when hovered on)

    Here's the section of the CSS where I think it should be - I can post more of it if necessary:

    /*******************************************************************************

    INFORMATION DESIGN: Describes the set of colors, borders, fonts

    *******************************************************************************/

    / * Submenu containers have borders on all sides * /.

    UL. MenuBarHorizontal ul

    {

    border: 1px solid #CCC;

    }

    / * Menu items are a light grey block with padding and no text decoration * /.

    UL. MenuBarHorizontal a

    {

    display: block;

    cursor: pointer;

    Padding: 0.5em 0.75em;

    color: #363837;

    text-decoration: none;

    background-image: url (.. / css/images/menu-graygradient.gif);

    }

    / Components menu that have mouse over or focus have a red gradient background text.

    This section changes stationary State to childless Parents and children? */

    UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus

    {

    background-image: url (.. / css/images/menu-redgradient.gif);

    color: #363837;

    }

    / * Menu items that are opened with the submenus are on MenuBarItemHover.

    This section changes stationary State to childless Parents and children? */

    UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible

    {

    background-image: url (.. / css/images/menu-redgradient.gif);

    color: #363837;

    }

    Try to remove this CSS rule on line 124

    UL. MenuBarHorizontal a.MenuBarItemSubmenu {}

    background-image: url("..) ("/ css/images/menu-graygradient.gif");

    }


  • Pulling my hair out on questions of IE8 with the spry menu bar

    Its a story classic, but for the life of me, I can't understand this.  I saw him in a hundred different forums (all slightly different versions of the same problem).  I've implemented a menu spry horizontal bar (version 1.6.1).  It works fine in Chrome, Safari, Firefox, etc..., but goes nuts in IE.

    layout and positioning submenus stunts go horizontally, far right, etc..

    Is a sample of the menu at http://www.alaskanrafting.com/mockup/NewIndex.html

    I'm sure it's just a line or two in my CSS, but of course I can't find.

    the CSS would be to http://www.alaskanrafting.com/mockup/SpryAssets/SpryMenuBarHorizontal.CSS

    If anyone has information, I would be very happy.

    Thank you

    Try to add/edit the following

    UL. MenuBarHorizontal ul li {}
    display: block;
    float: none! important;
    Width: auto;
    white-space: nowrap;
    border-bottom: 1px solid #EEE;
    }

    Must make a ! important to float so that it overrides the JS.

    GRAMPS

  • The Spry menu bar help

    Well, I have been struggling with this for always and still am having problems with my menu bar.  I need the main menus to have background pictures and the submenus have a color.  I use ul style. MenuBarHorizontal a for styling the menu without ul and drop-down menus items. MenuBarHorizontal a.MenuBarItemSubmenu for styling the menu with drop-down lists items.  Here's what I have:

    http://littlechisel.com/Ideal_Window/

    I can change the color of items 1 and 3, but I can't add a background image.  When I try to add the image to the style, it comes out blank.  What I am doing wrong?  I had this work last night, but for some reason, now it is not.  Help, please... Thank you.

    Not solved my problem so no need to answer...

  • Change Active (?) Link in the Spry menu bar

    I have inserted a bar menus horizontal spry in my page and have adjusted behaviors for link properties (l, v, h, & a). However, I would like the text of the button menu spry to a specific and constant color for the active page linked (destination). For example, the background color of the menu bar is grey dark (#282828) and the text is light gray (#D9D9D9). If I point and click on the 'About' button the text is orange (#D96E11). How could I go to keep the text of this orange color once the page 'About' is reached?

    I am a newbie to DW, so I am not able to follow and understand your answer here. You said, ' give the tag which represents the current page ID. Where and how can I achieve this? From there, ' and then create a new style for the ID rule ". Do you mean create a new CSS rule-> type of selector: class?

    New DW isn't a problem, but to use it successfully, you must understand the HTML and CSS. Judging from your questions, you're new to them, too. Again, this is not a problem, but your progress will be slow and painful until you master the basics of these two technologies.

    There are several ways to add an ID to a tag of , but the best way is to first create the style rule. The example I gave is an ID selector, not a class. Class selectors begin with a dot (period). ID selectors begin with the pound sign.

    Once you have created the style rule and saved your stylesheet, you can position your cursor within the binding to which you want to apply the code. Then right click in the tag in the selector tag at the bottom of the Document window, and then choose Set ID > here on the shortcut menu.

  • Highlight the current page for the Spry menu bar

    Dear Adobe community,

    I want the link to a page to be highlighted that this page is currently viewing.

    I use the menu bar Spry for a large part of my site and that this applies to this framework.

    Thank you very much for your time!

    Best regards

    Dominus

    Just to let you know, Spry is dead.  Most of the people stopped using it because it is not touch friendly.

    Adobe has stopped work on Spry in 2012.  It has since been removed from DW.  So I guess you have an older version of DW that is using Spry?

    I don't care.  Any menu, can be identified with CSS.  See my tutorial below:

    Indicator of persisting in the Menus - Page http://alt-web.com/

    Nancy O.

  • Impossible to create LINKS to the Spry menu bar?

    It is very a noob question. How associate you one of your drop down Menu bars Spry? It is said, 'Link' then space Box and a folder next to it (properties panel). But when I try to put a Web site address (NO LINK to a HTML FILE) it does go on the website I want? It was just my Web site and the site that I want to go. An example. www.Adobe.com/#www.Facebook.com... GHHRRRRR! Visit my website and move your mouse to teams and click on Squishy Docious (I.e.) and you will see (WWW.RYGUYLIVINLIFE.COM/#WWW.FACEBOOK.COM) on your navigation (http:// bar) and it happens every time I try and link other downs drop spry. Help, please.

    Hi ryanjaymes,

    Please hold your horses! You said "... She is wrong on the site that I want to". You think (or Miss) something like that? > http://hansgd.de/AdobTest/spryLink.php. It is made with Spry in DW Menu and you can link to a website with my example.

    My second sign leads you to the spry examples: http://labs.adobe.com/technologies/spry/samples/, where you can get most interesting inspirations.

    Hans-Günter

  • Spry AutoSuggest below the Spry menu bar in IE

    Hello

    Below is a description of my situation.

    When/where: Internet Explorer, version 7 and 8 or 9-compatibility mode, specific instances of IE version

    Description of the problem: the autosuggest widget Oupout is appearing below are links of the menu bar widget.

    Example: http://www.shopcopco.com/template2011.test.asp

    Try to type "copy" in the search bar. A list of correspondents associated copy terms should appear below. On most of the browsers no problem. Older versions of IE and IE9 in compatibility mode is the content of the above content autosuggest menu bar.

    I have tried the following to address the question:

    -Set the z-index .iframeSuggest, .hideSuggestClass and div suggestion than the menu styles.

    -Moved calls JavaScript from top to bottom, relative to each other to see if who touched anything.

    -Research on similar problems via Google.

    You can see the HTML source code to the link above. The style sheet can be found here.

    http://shopcopco.com/TW_assets/2011/styles/published.CSS

    Thanks for any advice or help, you can provide.

    Best regards

    James

    And it is to have the answer.

    http://www.onlinecasinodemar.com/webdesign/SUPERFISH-jQuery-menu-IE-z-index-bug/

    It is not content styles and spry that require an adjustment, it's the containers of these elements.

    James

  • Difficulties of the Spry menu bar

    I am just learning Dreamweaver CS4. I have a menu bar Spry on the index page. I had trouble getting the text to center the top in the individual buttons. Somehow, that has been cured and then other submenu items (under 'Home', 'Services' and 'Examples') are not visible on the website if they show well in Dreamweaver. If you want to see what the output is the Web site is:
    http://www.caddyshackproductions.com
    Anyone can fix this css file?
    Thank you, once again.

    Abraham Chaffin over at Creative Cow has the solution:
    The main problem I see is in your CSS file under

    ul.MenuBarHorizontal li{

    You have this setting:

    position: inherit;

    It should be

    position: relative;

Maybe you are looking for

  • why I'm locked out of watching one of my screenshots?

    I was taking screenshots for a test that I prepare and now I'm locked out of which they are considered.  I get this message: the file 'Screen shot 2016-06-02 at 12.57.15 PM' could not be opened, because you don't have permission to view it.  To chang

  • HP Envy 810-493D: airflow fan radiator

    Hello Can someone tell me the answer exactyly on the airflow to the radiator fan? Which image should be the right way? Photo 1 and photo 2? I'm confused on this thing. In addition, I would like to buy crosair SP fan to replace the stock HP fan. Thank

  • H8 - 1437c two monitors

    New office, try to set up with double HP w2207h HDMI monitors, I can't get one of them to work.  2 apparent additional connections have a tab "do not remove" screwed on them.  I removed the and tried those and that has not worked.  Cannot find specif

  • Satellite P200 and new update of BIOS 1.70

    Hello Toshiba just released update 1.70 for their P200 model BIOS. Notice that I've seen is that the Logo has changed since in touch ith tomorrow at Toshiba leading an and the Intel logo is now black.haven't noticed all the new settings.

  • I have Windows XP and cannot save a printable xps file. How can I do this?

    I have an application on the internet, where I am under Hoovers Business reports.  The Hoovers Subscriber has not opted for the option of download file.  Right now, all I can do is print documents and scan them and send them to anyone.  I'm looking f