Spry Menubar background color help?
How does one go about making the background color of your submenus different from the main menu bar?
Here's a site I have found with basically the submenu I want, notice the submenus have a background color and the menubar has a background image.
http://thecreatureconservancy.org/
(I am running CS5.5)
Thank you!
Have a look at the following where I have used an untouched SpryMenuBarHorizontal.css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
</head>
<style>
body {
width: 980px;
margin: auto;
#header {
height: 200px;
#nav { /* USE YOUR OWN BACKGROUND IMAGE */
background-image: url(http://www.copperleafcrossing.com/thecreatureconservancy/images/topnav_bkgd.jpg);
height: 35px;
ul.MenuBarHorizontal a {
color: #FFF;
background-color: transparent;
ul.MenuBarHorizontal ul a {
background-color: #436D9C;
ul.MenuBarHorizontal li.MenuBarItemIE {
background: transparent;
</style>
<body>
<div id="header"></div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps
Similar Messages
-
SPRY submenu text color help needed.
I've created a vertical SPRY menu bar over a dark background
image in a left sidebar. The text is white and the background is
set to none (transparent).
When the submenu opens to the right it's on a white
background (over the main content area). Because the text is set to
white, you cannot see the submenu links.
Is there a way to change only the submenu links to black? I'd
also like to change the background color of the submenu links.
Thanks in advance for your assistance.http://labs.adobe.com/technologies/spry/home.html
- This first link is the Spry home page. There you will find an
updater to Spry that if you have not downloaded up to this point,
you should I will explain why shortly. Inside the package you will
find a ton of samples and an Extension. Install the Extension and
restart DW. Then under the Sites menu you will see a new option to
update your Spry. Run that updater.
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
- This page will show you how to make the necessary customizations.
The last two examples will help you out. All you will need to do is
read through the source code of the document. There is no need to
read through the source of the CSS file because they show you the
changed CSS on that page. Just apply those changes to your CSS
SpryMenuBarVertical.css document where the tag matches. If there is
no matching tag you will need to just copy and paste the entire
portion but I don't think that is the case with your menu. Also
your entries will be Menubar 8 & 9 in the source code, but to
find the matching code in your css document just replace the
MenuBar8 or 9 with MenuBarVertical.
If you have not done a lot of work with CSS before I would
highly recommend reading this tutorial before going through any of
the above steps:
http://www.w3schools.com/css/ -
Spry Menubar-background problem
Hi,
I have tried to search for this problem, and though I have
found others with the same problem, there have been no answers
(probably so obvious I missed it and they figured it out.) And I
did update the Spry Menubar to the latest version.
The Spry Horizontal menubar works fine on Firefox, but on IE
7 the background is white as well as the submenus, not the intent.
The alignment and size is fine, just the designed background colors
don't work (on the menu itself, I want a transparent background, on
the submenus it is #777079.)
Website:
September
Entertainment Website
Style Sheet spry:
Spry
CSS
Thank you in advance for any help you can give me.
Cheers,
JanellHi,
Just found the problem for anyone that is having the same
thing happen. It is the hack at the bottom of
"SpryMenuBarHorizontal.css":
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;
Where it says: "background:fff;" change it to whatever you
need, in my case, "background: transparent;"
Voila!!
Cheers,
Janell -
The background color of one of my menu items (the only one which includes a submenu) appears as white instead of blue in Internet Explorer 8.0
Any tips on how to correc this? I'm using Spry 1.6 - maybe I should download the Spry 2.0 Widget? If I do that, do I have to recreate the entire menu?
http://www.studio2adv.com/dev/gibson
Thanks in advance for any advice.Sorry, didm't have time to test this but try changing the css background: #FFF;
/* 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; -
Change spry submenu background color only?
Is there a way to change the background or background color
on the spry horizontal or vertical menus without changing the main
menus?Also, whether you are using a vertical or horizontal menu you
can find the necessary tag within CSS. Adobe as done a fairly good
job on commenting exactly what is going on.
I worked on a project for Alabama Marriage & Family using
horizontal menus. You can take a look at my navigation and see how
I structured my CSS. Each sub-menu actually has different CSS
properties so it made it a little more difficult.
http://www.alabamamarriage.org/new/Templates/achmiTemplateA.dwt.php -
I am a beginner, so please bare with me... I added background color to a new project, placed the image and saved. When I export the saved image as a jpeg, the background color disappears. Why is this?
what did you do to add background colour?
-
I've created a spry vertical menu with a black background.
When I mouse over one of the menu items and the sub menu appears, I
would like it to have a different color background than the main
menu. Anyone know how to accomplish this?
Thank you>Sorry, didm't have time to test this but try changing the css background: #FFF;
/* 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; -
Change background color during text edit mode
THis is a wacky problem...
I have a presentation template. The slide master has white copy in the title and black copy in the body/bulleted list.
When I try to use the template and edit the title copy, the background color for editing that line is white, just like the text, so I can't see what I'm typing. I can't figure out how to change the background color during text edit mode so that I can actually see what I'm typing. Is there a way to make this transparent?
For some reason, the body copy edit works fine: black text edited in either a white or transparent background color.
help!THis is a wacky problem...
I have a presentation template. The slide master has white copy in the title and black copy in the body/bulleted list.
When I try to use the template and edit the title copy, the background color for editing that line is white, just like the text, so I can't see what I'm typing. I can't figure out how to change the background color during text edit mode so that I can actually see what I'm typing. Is there a way to make this transparent?
For some reason, the body copy edit works fine: black text edited in either a white or transparent background color.
help! -
Transparent spry menu that has a background color on sub menus and a few other problems(Please Help)
Hi im a noob at dream weaver and i've been trying to create a menu and i have been having problems with this menu bar i don't know what to upload and i have made a topic about this before but i only got one reply and so i am trying to make my menu bar transparent and then the sub menu's colored with the color code #1A1A1A and the menu bars that have been color background are only the sub sub menu bars if you know what i mean and also my other problem is the spacing i have between each option is really uneven is there a way to make them evenly sperated apart from each other rather than just the size of a "box" that the text is in. Here is my SpryMenuBarHorizontal.css 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 auto;
padding: 0;
list-style-type: none;
font-size: small;
cursor: default;
width: 100em;
/* 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: 18px;
position: relative;
text-align: left;
cursor: pointer;
width: 10.8em;
float: left;
visibility: visible;
/* 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: 15em;
/* 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
ul.MenuBarHorizontal ul
border: 0px solid #1A1A1A;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: transparent;
padding: 9px;
color: #FFF;
text-decoration: #1A1A1A;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
/* 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: #0048ff;
color: #EEE;
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-color: #1A1A1A
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-color:#1A1A1A;
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-color:#1A1A1A
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-color: #1A1A1A
background-repeat: no-repeat;
background-position: 85% 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-color: #1A1A1A;See if this post helps :
http://forums.adobe.com/message/1997762#1997762
and this one:
http://forums.adobe.com/message/1898539#1898539
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap -
Spry MenuBar Test in IE (background color check)
This is a part two to a previous post. I have a Spry menu bar in my clients app and right now my issue is that the menu bar when you rollover over to view the drop down (in this case a drop up since the menu is above the main menu) should display a menu with a background color of #887242 which in Firefox and Safari it does, but in IE (any version) it instead inherits the color of the main nav bar which is #483828. Originally the background was all white in IE and then I went to the CSS and found this:
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background-color: #FFF;
So I changed #FFF to #483828 and that took care of the menu bar but applied the color to both the menu bar and drop down. I want the drop down to be a different background color as mentioned previously so after a little looking around I'm trying this:
@media screen, projection
ul.MenuBarHorizontal ul
display: inline;
f\loat: left;
background-color: #887242;
underneath that. Since I'm on Mac, I can't eee the drop down on BrowserLab or BrowserShots so can anyone on a PC please check briefly this URL for me to tell me if the drop down is showing the proper background color and if not, is there a fix?
http://www.designmg.com/new//index3.htmlOK, I tried it with my PC on both Firefox and IE8. With Firefox the menu and submenu text is the orange color but changes to white on hover. Also on hover the drop up submenu appears and the background is the beige color. With IE8 the menu text is italic (somewhat slanted), the text turns white on hover but the background does not appear. Instead, a beige vertical line appears to the right of the drop up submenu (maybe 5 px wide).
Hope that helps. Sorry I can't offer any suggestions - I'm pretty new at this and I'm working my own issues out with IE. Good luck and Happy New Year
RM -
Problems to add a background-image to the widget Spry MenuBar!
With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page.
But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif).
In the Application Page of Dreamweaver I have this screenshot:
But in the Preview Window of InternetExplorer 7 I have this strange behavior:
The "Menu_Button_01.gif" are a rounded square button made with PhotoshopCS4 and have a transparent background.
In the IE7 MenuBar doesn't appears as expected, without the transparent background!
1) How can I do to show my "Menu_Button_01.gif" image as transparent background in the MenuBar?
2) What is the correct CSS Style Rule to apply the "background-image" property?
(Example: "ul.MenuBarHorizontal li"? Or "ul.MenuBarHorizontal a"? )
3) Should I also apply the property: "background-color:transparent"? Where? What is the specific CSS Style Rule?
I have uploaded my little local WebSite to Rapidshare (100KB):
http://rapidshare.com/files/370735082/Test_Spry.zip.html
Please download it to inspect my problem.
Please response me!
Horsepower0171.For a starter, you should not put your background style rules in the following. The accompanying descriptions will tell you this.
/* 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: 116px;
float: left;
background-image: url(../immagini/Menu_Button_01.gif);
background-color: transparent;
/* 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: 116px;
position: absolute;
left: -1000em;
background-image: url(../immagini/Menu_Button_01.gif);
background-color: transparent;
Then when you apply style rules to
/* 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: #333;
text-decoration: none;
background-image: url(../immagini/Menu_Button_01.gif);
background-color: transparent;
this will be overridden by the following rules. They replace your image with an arrow image.
/* 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%;
There are one of two solutions
If you do not want and arrow, simply set background to none in the above four instances.
If you do want an arrow, include a down arrow image in a second Menu_Button_01.gif image called Menu_Button_01_DownArrow.gif or similar as well as a third one for your right arrow image.
I hope this helps.
Ben -
Cell background colors are not showing in preview - help? - DW4
Hi,
I created a horizontal table for my menu bar, and gave each cell a different color by creating a separate class for each with background image - image is a block of color created in Photoshop. In design mode they look they way I want, but in preview (Safari) the colors don't show up at all - the whole area is gray, and all I see is the text for each cell. Can someone tell me what I'm doing wrong? Alternatively, is there a better way I can set this up to have different colors for each button?
Thank you!Here is the HTML code, and the CSS code for the menu bar follows:
ul.MenuBarHorizontal
></style><style type="text/css"><!body { background-color: #FFF; font-family: Arial, Helvetica, sans-serif;}-->
h1.
ul.MenuBarVertical
[about | MS_about.html]
[fiction | MS_fiction.html]
[dramatic work | MS_dramaticwork.html]
[arts | MS_arts.html]
[contact | MS_contact.html]
[blog | MS_blog.html]
<!-- end #header ><div id="mainContent"><p> </p><table width="950" border="0" cellspacing="10" cellpadding="12"> <tr> <td width="106"><p> </p></td> <td width="766"><p> </p> <p>Miriam Seidel is a writer, critic and curator whose work is informed by her background in art, music and dance. </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p></td> </tr> <tr> <td colspan="2" bgcolor="#CCCCCC"><p>c Miriam Seidel 2011 all rights reserved</p></td> </tr> </table><script type="text/javascript"><!var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", );var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", );//></script></body> <! end #mainContent --></div></html>
CSS CODE:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* The outermost container of the Menu Bar, an auto width box with no margin or padding /ul.MenuBarHorizontal/ 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; font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #FFF; background-color: #FFCC99; background-repeat: no-repeat; left: auto; top: auto; right: auto; bottom: auto;}/ Menu item containers, position children relative to this container and are a fixed width /ul.MenuBarHorizontal li/ 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/ 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/ Menu item containers are same fixed width as parent /ul.MenuBarHorizontal ul li/ Submenus should appear slightly overlapping to the right (95%) and up (-5%) /ul.MenuBarHorizontal ul ul/ 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
/* 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/ Menu items that have mouse over or focus have a blue background and white text /ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-color: #6C9; color: #999; font-family: Arial, Helvetica, sans-serif; font-size: medium; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-decoration: none; text-align: center; vertical-align: middle; height: 50px; width: 115px;}/ 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: #FFCC99; color: #FFF; font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-size: medium;}
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%; text-align: center;}/ 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/ 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;
Date: Mon, 20 Jun 2011 15:30:46 -0600
From: [email protected]
To: [email protected]
Subject: Re: cell background colors are not showing in preview - help? - DW4
NEED to see the code.
Otherwise it's like dialing a random phone number, and asking whoever answers, where you left your keys.
> -
Change spry vertical menu background color
After updating from 4.1 to 6.1, the background color of my
vertical menu changed to the default grey. How do I change the
background to my original blue.
JamesI'm going to give you a couple links to help you out.
http://labs.adobe.com/technologies/spry/home.html
- this is the official Spry Homepage. Here you will find an updater
to the Spry. Most of the documentation on the website is built
around the latest version and this is where you will find the
updater. Inside the package are some samples and an extension.
Install the Extension and then restart DW and under the Sites menu
you will see a new option to Update Spry. There is also a link to
the official Spry forums from there.
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
- This is a quick sample of different things you can do to change
the menu bar. This does not include the basic color change. But it
does give you an idea of how to change things in the CSS file (view
the source of the page).
http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html
- This is directly from the Adobe Spry documentation. If you scroll
down a ways it will show you how to do the color customizations for
the Spry Menu Bar.
Lastly, if you do not have a basic understanding of CSS this
will all be foreign to you. If that is the case I would highly
recommend reading over the below CSS tutorial first to get a basic
understand of the CSS code:
http://www.w3schools.com/css/ -
How do you make a transparent spry menu that has a background color on sub menus?
Hi i am a total newbie at html and css scripting/coding and i've been working on creating a website of course because im here and i have search and search and i've found a few topics about this but none of them have what i want and it would be helpful if when you post the reply you explain it so hopefully i can add on and learn but i am trying to get the background color on the sub menus #1A1A1A and then the menu it self transparent here is my code it might make no sense at all since im a newbie ;P
@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 auto;
padding: 0;
list-style-type: none;
font-size: small;
cursor: default;
width: 100em;
/* 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: 18px;
position: relative;
text-align: left;
cursor: pointer;
width: 10.8em;
float: left;
visibility: visible;
/* 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: 15em;
/* 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
ul.MenuBarHorizontal ul
border: 0px solid #1A1A1A;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: transparent;
padding: 9px;
color: #FFF;
text-decoration: #1A1A1A;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
/* 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: #0048ff;
color: #EEE;
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-color:#1A1A1A;
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-color:#1A1A1A
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: 85% 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: #222222;Hi and welcome -
Start with fixing this missing semicolon (in red)
/* 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-color:#1A1A1A;
background-repeat: no-repeat;
background-position: 95% 50%;
You will find you will get faster, more accurate help from us if you upload your test page and any dependent files to your server and post a link here. That way we can examine ALL your code -
Need transparent background color in Spry Menu Bar
Tried every possible combination.
Built a 150x1000 px header in Illustrator with a 20x1000 px rectangle at the bottom for the nav bar, set as a background image in the header within Dreamweaver.
Can not make a transparent (no color) background within Spry Menu Bar: MenuBar1??
Also, my first nav is 'Welcome' that <li></li> is about 6-8 px higher then the rest of the nav bar??
Any help at all would be appreciated, thanks
optionsclinic.netHave you tried changing the value of the Background colour in your CSS:
ul.MenuBarHorizontal a
cursor: pointer;
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
color: #FFF;
padding-right: 2px;
padding-left: 2px;
display: block;
background-color: #223F9A;
Maybe you are looking for
-
Access Mac Mini Server (profile management) through reverse proxy
Hi, Newbie in Mac's world and yet trying to make it more complicated as it is. As we recently (last month) decided to equip our sales force with iPads, they were configured through Apple Configurator tool running on a dedicated Mac Mini Mountain Lion
-
Error throws in "BAPI_GOODSMVT_CREATE"
Hey gurus, After i am executing this bapi "BAPI_GOODSMVT_CREATE", in the error table "return" i am getting the messages like"Posting only possible in periods 2007/11 and 2007/10 in company code 1003". Could any one of you calrify this asap?
-
How do I remove a small box on my vector that I didn't add?
I've been working on a downloaded vector, but when I opened up it up in Ai a black square appeared in the center. (this did not appear on another computer). The square is now pink, has a "1" in the upper lefthand corner, and a jagged line in anothe
-
Why does Adobe 9 standard crash when using the digital signature
When using the digital signature in Adobe 9 standard it crashes, it has been repaired, uninstalled and reinstalled and still crashes when putting in the digital signature and not understanding why. Also the digital signature was redone. Your thoughts
-
Fail to download and install Photoshop CC 2014
After 42% the download fails and I get this message: Exit Code: 15 Please see specific errors below for troubleshooting. For example, ERROR: DW051 ... -------------------------------------- Summary -------------------------------------- - 0 fatal err