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.net
Have 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;
Similar Messages
-
Clicked Link Color Within Spry Menu Bar
Greetings,
I have a spry menu bar that is working like I want it to
except for one thing. The unclicked links are white, which is what
I want. In the template in which the menu is located, the page
properties are sent black for visited links.
How can I make only the menu bar links remain white when
visited and keep other links on the page going black when visited?
They stay white now in IE7 and FF, but not IE6.
Thanks in advance for any assistance.
GlennHave 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; -
Adding background image to Spry Menu Bar?
Hi Everyone,
I have a question concerning adding a background image to a horizontal spry menu.
1) I am using Dreamweaver CS4.
2) I am inserting this menu bar on a HTML document.
3) I have created and am using an external style sheet (CSS)
I am not sure on which style(s) ("ul.*) to edit in order to acheive this.
I have a total of four(4) different images I would like to use, they are...
1) Horizontal Menu Bar (main menu bar)
2) Horizontal Menu Bar - Rollover
3) Submenu
4) Submenu - Rollover
Also I would like the text to be centered on the button.
I have somewhat acheived this using the instructions for "customize this widget", yet the image "repeats" because the button is larger than the image.
I have not tried to center the text, this may be a very simple thing, if so just let me know.
What I dont know, and was hoping someone could tell me, is which style(s) ("ul.*) to edit in order to acheive this.
If anyone needs anymore information, just let me know and I will give it to you as soon as possible.
Also I have attached three(3) of the four(4) pictures I would like to use. (this is the maximum)
Any help will be greatly appreciated,
Musicman1994I'd like to thank everyone with their help so far, but I am still having trouble.
I have tried both suggestions and the results are...
The one suggested by dhvani2511 gave me this...
(The cursur is over "Item 1" it is not blue when a cursur is not over it.)
I would like the image to "be" the button, not just "in" it,if that makes sense.
I have slightly tried the one suggested by .V1 but being that I am new to dreamweaver, code, etc. I am not sure where to copy/paste the code that you gave me.
Does anyone have anymore information?
Thanks,
Musicman1994 -
Hello, I have two templates that I am using. Both have a horizontal menu bar across the top of the page and then two Vertical Spry Menu Bars down the left hand side of the page - one above the other. On one template, all menu bars are working correctly. On the other template, 2 out of three are working correctly. Not sure what's happening here. The spry menu bar that is not working correctly is under "Books & Materials" heading. The menu bar is supposed to turn green when you mouse over it, but instead everything turns white and looks like it "disappears". I have no idea why it would work on one template and not the other. Or for that matter, why it is working on one vertical spry menu bar, but not the other on the same page. Can anyone help me? www.springerlejoy.com/proanimals4.html This is a page that shows where it is not working. Basically, all of the products pages are having this problem. If you go to the home page: www.springerlejoy.com you will see that this page is working - using a different template. Can anyone help me? I'm at a loss! Thanks!
Debbie
Here is the code for the template that is NOT working:
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../thrColFixHdr.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
.thrColFixHdr #container { zoom: 1; }
</style>
<![endif]-->
<style type="text/css">
<!--
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
document.write(unescape("%3Cscript
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11559638-1");
pageTracker._trackPageview();
} catch(err) {}</script>
body {
background-color: #CCEA86;
.maincontenthdr {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #530000;
text-align: center;
height: 29px;
.maincontenthdr1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #600;
.maincontenttxt {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #000;
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.thumbnail{
position: relative;
z-index: 0;
.thumbnail:hover{
background-color: transparent;
z-index: 50;
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -800px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
//-->
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #CCEA86;
-->
</style>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColFixHdr" onload="MM_preloadImages('../history2.gif')">
<div id="container">
<div id="header">
<table width="810" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div class="hdrtxt">
<p>2104 Clairmont Drive<br />
Pittsburgh, PA 15241<br />
T 412-616-9066<br />
F 412-220-2074 </p>
</div></td>
<td align="center"><a href="../index.html"><img src="../logo3.jpg" width="313" height="149" border="0" /></a></td>
<td><div class="rthdrtxt">Cookie Molds from <br />
the Old World for <br />
Baking and Crafts</div>
</td>
</tr>
<tr>
<td width="189" background="../lines.gif"></td>
<td width="409" align="center" background="../lines.gif"> </td>
<td width="182" background="../lines.gif"></td>
</tr>
<tr bgcolor="#BB7C4E">
<td colspan="3" align="left"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.html">Home</a></li>
<li><a href="../aboutus4.html">About Us</a></li>
<li><a href="../howtoorder4.html">How To Order</a> </li>
<li><a href="../information4.html">Information</a></li>
<li><a href="../contactus4.html">Contact Us</a></li>
<li><a href="../recipeshome.html">Recipes</a></li>
<li><a href="../events4.htm">Events</a></li>
<li><a href="../gallery4.html">Photo Gallery</a></li>
</ul></td>
</tr>
</table>
<div class="divmenubar"> </div>
</div>
<div id="sidebar1">
<div class="FeatureItem">
<div align="center"><span class="FeatureItemHead"> </span>
<div>
<div class="Products">Products
<br />
<br />
</div>
<div class="proHeaders">Molds</div>
</div>
</div>
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="../proangels4.html">Angels</a> </li>
<li><a href="../proanimals4.html">Animals</a></li>
<li><a href="../probaby4.html">Baby</a> </li>
<li><a href="../probiblical4.html">Biblical</a></li>
<li><a href="../probirds41.html">Birds</a></li>
<li><a href="../prochildren4.html">Children</a></li>
<li><a href="../prochristgen4.html">Christmas, General</a></li>
<li><a href="../prochristrel41.html">Christmas, Religious</a></li>
<li><a href="../procornucopia4.html">Cornucopia</a></li>
<li><a href="../procultfig4.html">Cultural Figures</a></li>
<li><a href="../profishing4.html">Fish</a></li>
<li><a href="../proflowers4.html">Flowers & Plants</a></li>
<li><a href="../profruits4.html">Fruit</a></li>
<li><a href="../progeometric4.html">Geometric</a></li>
<li><a href="../progermany4.html">Germany</a></li>
<li><a href="../prohearts4.html">Hearts</a></li>
<li><a href="../proinsects4.html">Insects</a></li>
<li><a href="../proluck4.html">Luck</a></li>
<li><a href="../promarriage4.html">Marriage</a></li>
<li><a href="../promultiple4.html">Multiple Images</a></li>
<li><a href="../promusic4.html">Music</a></li>
<li><a href="../pronautical4.html">Nautical</a></li>
<li><a href="../proscenes4.html">Old Time Scenes</a></li>
<li><a href="../propeople4.html">People in Old Times</a></li>
<li><a href="../prosayings4.html">Sayings</a></li>
<li><a href="../proschool4.html">School</a></li>
<li><a href="../proseasons4.html">Seasons</a></li>
<li><a href="../prostar4.html">Star</a></li>
<li><a href="../prostory4.html">Story / Legend Characters</a></li>
<li><a href="../prosunmoon4.html">Sun & Moon</a></li>
<li><a href="../proswitzerland4.html">Switzerland</a></li>
<li><a href="../prosymbols4.html">Symbols</a></li>
<li><a href="../protransportation4.html">Transportation</a></li>
<li><a href="../prozodiac4.html">Zodiac</a> </li>
</ul>
<div class="proHeaders"><br />
Books & Materials</div>
<ul id="MenuBar3" class="MenuBarVertical">
<li><a href="../probooks4.html">Books</a> </li>
<li><a href="../procookies4.html">Cookies</a></li>
<li><a href="../procutters4.html">Cutters</a> </li>
<li><a href="../proflavoring4.html">Flavoring</a></li>
<li><a href="../profoodcolor4.html">Food Coloring</a></li>
<li><a href="../promaterials4.html">Materials</a></li>
<li><a href="../protools4.html">Tools</a><br /></li>
</ul>
</div>
</div>
<div></div>
<div id="sidebar2">
<div class="nxtevents">
<div class="MenuBarActive">
<div><a href="http://order.store.yahoo.net/cgi-bin/wg-order?yhst-40727766898036 "><img src="../cart1.gif" name="imgfloatright" width="87" height="26" border="0" id="imgfloatright" /></a></div>
<p><br />
<br />
</p>
</div>
<div class="nxtevents">
<div class="maincontenttxt">
<div class="moldscenter"><span class="maincontenthdr1">Featured Item<br />
</span>
<p class="thumbnail"><a class="thumbnail" href="#thumb"><span><img src="1142.jpg" /></span></a> <a class="thumbnail" href="#thumb"><a class="thumbnail" href="#thumb"><img src="1142-1.jpg" width="93px" height="100px" border="0" /></a></p>
<br />
<table width="130" cellpadding="0" cellspacing="0">
<tr>
<td width="61" align="right" class="maincontenttxt">1142</td>
<td width="67" align="right" class="maincontenttxt"><div align="right">$31.00</div></td>
</tr>
</table>
<br />
<a href="../proanimals4.html">The Three Rabbits springerle mold, dia. 3.5" (90mm)</a><br />
<br />
<form method="post" action="<!--#ystore_order id=1142 -->">
<p align="left" class="buttoncenter">
<input type="submit" value="Order Now" />
</p>
</form><br />
</div>
<p class="nxteventshdr">News... </p>
</div>
<p>2/8: Just Arrived from Switzerland today<br />
<strong><U><br />
<a href="../prohearts4.html">11 New Heart Molds</a></U></strong><a href="../prohearts4.html"><U>!</U></a><U><br />
</U></p>
</div>
<div id="moreevents">
<p>2/7: See our new photos in the <a href="../gallery4.html">Photo Gallery</a>!</p>
</div>
</div>
<div>
<p class="nxteventshdr">Newsletter</p>
<p class="nxtevents">To automatically receive our e-mail newsletter with new mold information, tips and tricks, photos of cookies and art, and historical profiles of featured molds, please fill in the form below and press <Submit></p>
<form method=post action="http://us.1.p6.webhosting.yahoo.com/forms?login=springerlejoy" id="form1" name="form1">
<p class="maincontenttxt">First Name
<input name="formFirstName" type="text" class="maincontenttxt" id="formFirstName" />
</p>
<p class="maincontenttxt">Last Name
<input name="FormLast" type="text" class="maincontenttxt" id="FormLast" />
</p>
<p><span class="maincontenttxt">Email Address
<input name="FormEmail" type="text" class="maincontenttxt" id="FormEmail" />
</span></p>
<div id="button">
<input type="submit" name="SubmitButton" id="SubmitButton" value="Submit" />
</div>
<p> </p>
</form>
<p> </p>
<p><a href="http://smallbusiness.yahoo.com/ecommerce/" target="_blank"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/smallbiz/gr/ecomby_128bit.gif" alt="ecommerce provided by Yahoo! Small Business" width="118" height="55" border="0" align="middle"/></a> <br />
<br />
<a href="http://www.facebook.com/pages/Springerle-Joy/243604195833?ref=search&sid=1000000928365 99.173275996..1&v=wall#!/pages/Springerle-Joy/243604195833?v=wall&ref=search"><img src="../5u84f48n.gif" width="144" height="44" /></a> </p>
</div>
<!-- end #sidebar2 -->
</div>
<div id="mainContent">
<div class="maincontenthdr"> <!-- TemplateBeginEditable name="EditMainContHdr" -->
<p class="maincontenthdr">Products</p><div class="leafpic"><img src="../leaves3.jpg" width="420" height="32" /></div>
<!-- TemplateEndEditable --></div>
<div>
<div class="maincontenthdr1">
<table width="418" border="0" cellspacing="0" cellpadding="0">
<!-- TemplateBeginRepeat name="RepeatRegion1" -->
<tr>
<td width="87" rowspan="2" valign="top"><!-- TemplateBeginEditable name="EditRegion6" --> <!-- TemplateEndEditable --></td>
<td width="255" valign="bottom" class="itemno"><!-- TemplateBeginEditable name="EditRegion7" --> <!-- TemplateEndEditable --></td>
<td width="76" valign="bottom" class="price"><!-- TemplateBeginEditable name="EditRegion8" --> <!-- TemplateEndEditable --></td>
</tr>
<tr>
<td valign="top" class="maincontenttxt"><!-- TemplateBeginEditable name="EditRegion10" --> <!-- TemplateEndEditable --></td>
<td class="orderbutton"><!-- TemplateBeginEditable name="EditRegion11" --> <!-- TemplateEndEditable --></td>
</tr>
<!-- TemplateEndRepeat -->
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
<div class="maincontenttxt"></div>
<p> </p>
<div class="maincontenttxt"></div>
</div>
</div>
</div>
<p>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
</p>
<p><br class="clearfloat" />
</p>
<div id="footer">
<div id="copyrighttxt">
<p>Copyright© by Springerle Joy, LLC 2010</p>
</div>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html><script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
File cannot be found. Try
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
File cannot be found. Try
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="file:///Macintosh HD/Users/julesmazur/Desktop/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
This link points to a local file on your local harddrive and can therefore not be found. However, this file is not needed because the file will be linked as above.
Gramps -
Spry Menu Bar transparency problem - one solution
Like many other people I have spent several frustrating days trying to solve the problem of Spry Menu Bar sub-menus appearing to be transparent (text, etc. underneath the sub-menus shows above/through the sub-menu items). This problem manifested itself in IE7, but not in Netscape, Safari or Firefox.
I thought it must be the dreaded IE z-index problem.
I have been through most other people's questions and replies on the Adobe forums, tried all kinds of z-index changes and various other mods to my own CSS and/or the Spry CSS's - all to no avail.
My situation:
I have a Spry Menu Bar above a clicktrail and a text block. Both the clicktrail and the text block showed through the sub-menu items, which drop-down over them.
All three items are located in relative-positioned divs, necessary because the whole page design is contained in a self-centralizing container div and absolute-positioned divs screw up the whole page layout when the screen size or browser window size changes.
(Sorry, I can't upload the files to a website at the moment.)
The solution that works for me in Dreamweaver CS4:
I selected the divs for the clicktrail and the text block, one at a time, and selected Modify > Arrange > Send to Back in Dreamweaver CS4.
I then selected these two items again and selected Modify > Arrange > Bring to Front.
Finally I selected the div containing the Spry Menu Bar and selected Modify > Arrange > Bring to Front. The thought behind this was that this would put the Spry Menu Bar on top of everything else - and it works!
This solution works in all four browsers, but don't ask me how! I can't see any change in any CSS, nor in my template code. All I can see is a strange, flashing vertical line (like an enormous cursor - about 10 cm [3"] high) in the middle of the template page only (and only in Dreamweaver) if I click on the page background. I can neither find an explanation for this nor anything in the coding which might cause it. By the way; the z-index for the menu div =2, the z-index for the clicktrail div is not defined and the z-index for the div for the text block is set to auto. I haven't tried other values and to be honest I'm not sure what they were set to before I applied the above 'solution'.
But hey - who the hell cares - my site works!
I hope this helps someone else out of an absolute hell-hole...if someone out there can explain where to find the code that had been changed or added by doing this I'd like to know. I don't like things I can't explain - even if they do work!This is where the browser is told to supply a white background
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
Vhange the value to transparent.
Also the last line int the CSS should be removed as in
filter: "alpha(opacity=60)";
Gramps -
Spry menu bar transparency in Internet Explorer 8
Hello all, I've searched for this one but can't seem to find a solution that works. I'm using DW CS5 and I've included a spry menu bar and transparency on the site works great everywhere else except for the menu bar. I tried to use the hack to change the background to "transparent" but that did not work. Also, the site works fine in other browsers such as Firefox and Chrome but the spry menu bar is the only this that sticks out like a sore thumb in IE8. Please any help is appreciated and I thank you in advance.
This is where the browser is told to supply a white background
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
Vhange the value to transparent.
Also the last line int the CSS should be removed as in
filter: "alpha(opacity=60)";
Gramps -
Spry Menu Bar Colors and Pictures in Dreamweaver
I'm having some trouble changing the color of the spry menu
bars that I created in Dreamweaver. Whenever I preview them in a
browser they show up as grey with black text. What I want them to
show up as is blue with white text before the mouse goes over them
and highlights them. When the mouse goes over them I want them to
still be blue with white text and also my drop down menu options as
well.
What would be the fastest and easiest way to do this and if
there is what css code is required for me to change? I'm unfamiliar
with how css code works.
I'm also having some problems with copying and pasting
pictures and editing them too. what software can i download that is
free that i can use to edit my pictures.
I have the trial version mind you and I'm trying to get this
finished as fast as I can.> What would be the fastest and easiest way to do this and
if there is what
> css
> code is required for me to change?
Bring up your page and adjust the CSS in the
SpryMenuHorizontal.css or
SpryMenuVertical.css page that is attached. All the color
values are in
there.
>I'm unfamiliar with how css code works.
You need to change this. Without a thorough working knowledge
of HTML and
CSS (at the very least), you will never have great success in
either
Dreamweaver or web design. I first learned web design using
Notepad, typing
every single tag, and I am soo grateful now that I had that
solid coding
experience .. without it, this program would be very hard to
master.
> I'm also having some problems with copying and pasting
pictures and
> editing
> them too. what software can i download that is free that
i can use to edit
> my
> pictures.
Free? I'm not sure any more .. you can use either the 30 day
trial of
Fireworks or Photoshop (Fireworks would probably be easier to
pick up) but
if you're going to do a lot of this, you need to get some
good tools and
learn them well.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development -
Spry Menu Bar link colors not consistent
I have a horizontal Spry menu bar set up with 4 items in it.
The first item is the Home link and does not have a submenu, but
the other 3 items do. What I want is when you roll over the main 4
items the text link color will be purple (#583399). When an item
has a submenu the rollover text link on the submenu links will be
green (#89b11a).
My current code almost works, but the problem I am having is
that the Home link
without the submenu changes to a green color instead of
purple like the other 3 main links. If I add a test submenu to the
Home link then it turns purple like the other links. How can I get
the Home link to change to purple like the others without having a
submenu attached to it?
Here is my html code that refers to the menu:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html"
class="MenuBarItemSubmenu">HOME</a></li>
<li><a href="about.html"
class="MenuBarItemSubmenu">ABOUT</a>
<ul>
<li><a
href="services.html">services</a></li>
<li><a
href="bios.html">bios</a></li>
<li><a
href="news.html">news</a></li>
</ul>
</li>
<li><a href="work.html" class="MenuBarItemSubmenu"
>WORK</a>
<ul>
<li><a href="design.html">design</a>
</li>
<li><a
href="advertising.html">advertising</a></li>
<li><a href="casestudies.html">case
studies</a></li>
</ul>
</li>
<li><a href="contact.html"
class="MenuBarItemSubmenu">CONTACT</a>
<ul>
<li><a href="#">.</a></li>
<li><a
href="location.html">location</a></li>
<li><a
href="opportunities.html">opportunities</a></li>
</ul>
</li>
</ul>
Here is the Spry CSS code that pertains to the links:
/* Menu items are a light gray text with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #666666;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
/* Menu items that have mouse over or focus have green text
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #89b11a;
/* Menu items that are open with submenus are set to
MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemHover,
color: #583399;
/* Menu items that are open with submenus are set to
MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #583399;
And
here
is a link to my test file so you can see what I am talking
about.
Thanks for any help and let me know if you need anything else
to help with it.Anyone??
-
***I need help with my SPRY MENU BAR***
Hi everyone,
I have installed a Horizontal and Vertical Spry Menu Bar.
It looks great, but I can not figure this out.
When I click on any of the links on the bars,
my text jumps to the righ
Can someone please tell me how I can make
the text to stop jumping.
My test page is located at the link below:
http://www.tonyasdynamicdesigns.com/gregs-pages/index.html
Thank you so much for your help,
TonyaI know that the problem is in my main-css.css because
when I deleted this css code, the text jumping stopped.
I can not figure out how to fix my main-css.css style.
Can you please help me?
Below is part of my css code
that is causing the problem.
body {
background-color: #000000;
background-repeat: repeat;
background-image: url(.../gregs-images/bg.jpg);
background-position: center;
background-attachment: fixed;
#container {
width: 965px;
fixed-width: 965px;
background-color: #1f1f1f;
margin-right: auto;
margin-left: auto;
font-size: 12px;
color: #afafaf;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
border: 2px solid #1f1f1f;
margin-bottom: 30px;
margin-top: 30px;
background-image: url();
background-repeat: repeat;
#shadow {
width: 968px;
background-image: url(.../images/vertical-website-background-shadow.png);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
#bottomShadow {
margin-right: auto;
margin-left: auto;
width: 968px;
background-repeat: no-repeat;
background-image: url(.../images/bottom-website-background-shadow.png);
height: 54px;
#header {
height: 272px;
background-image: url(../gregs-images/smokehouse-studios-banner.png);
width: 965px;
#footer {
height: 381px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
clear: both;
#navigation {
width: 900px;
fixed-width: 900px;
background-color: #1f1f1f;
display: in-line;
position: fixed;
overflow: hidden;
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #afafaf;
background-repeat: repeat;
background-image: url(.../gregs-images/grey-gradient-bg.png);
background-color: #1f1f1f;
text-align: left;
width: 965px; -
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 -
How can you create a spry menu bar with no background colour?
How can you create the first level of a spry menu bar to have no colour? I have a coloured background right now and the colour matches when you load the site in Internet explorer but does not match in Firefox. Any suggestions are welcomed on how to fix this.
Thanks!
HKHere is the site:
http://partnersnaturally.ca/
I am learning with code, (obviously) so any feedback would be nice. I use dreamweaver CS4, but when I originally designed the site it was in a much older version of dreamweaver. I wonder if that could also be a cause. (besides human error)
Thanks again,
HK -
Thank you for viewing my post!
I am having trouble editing the default spry menu bar .css file
How do I edit the spry menu .css file to display two different roll over colors for the menu and submenu?
My goal is to have a blue menu bar with gray rollover color, gray drop down submenus with their own orange rollover color.
I tried giving ul.MenuBarHorizontal li its own style but I think something else in the .css is preventing this (or my own skill is).
Thank you ahead of time to the kind soul who can help me with this!Have a look at this David Powers tutorial http://foundationphp.com/tutorials/sprymenu/customize1.php
I hope this helps.
Ben -
I want to create a multi-color spry menu bar by hand like the one on this page:
http://projectseven.com/products/menusystems/pmm2/multicolor.htm
Any tips?
Thx.For those interested, I found a simple solution at Jim Cook's website, DWcourse.com:
The best thing to do would be to create a new style class, say “oddball” and apply it to the odd link like this:
<a href="#" class="oddball">Item 2</a>
Then create a new style in your style sheet named ul.MenuBarHorizontal a.oddball:hover and apply your hover formatting there. At the same time you might as well avoid the inline style (it’s better to avoid them if you can) and create a new style, ul.MenuBarHorizontal a.oddball to handle the normal state of the odd menu item.
You can read the entire thread here: http://dwcourse.com/dreamweaver/spry-menu-bars.php
Thanks. -
Need Help with DW 5.5 spry menu bars.
I was given an unopened/registered Creative Suite 5.5 a couple days ago so I installed it and got to work on a website for my upcoming business. I got the home page finished, and so i saved it as a template to use for the remaining pages. But as soon as I click "save" my horizontal Spry Menu Bar becomes vertical at the top of my page. If i click on the Spryhorizontalmenu.css a message appears at the top of the screen that says something along the lines of "spryhorizontalmenu.css is not stored on local disk Get" but it will not let me access the link for help and I have been stumped for days. This is my first webpage and any help for this newbee would be very much appreciated.if you have questions please ask!!!
If horizontal is turning vertical, I have a feeling what is happening is that when you publish it, it's not connected to any style sheet -- or you have the style sheets in the wrong order.
Remember, with CSS (Cascading Style Sheets) the last stylesheet trumps the earlier one. That's perfectly OK if there are no conflicts, but there may be some that can cause problems.
Thus, you'd be looking for:
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="navigation.css" rel="stylesheet" type="text/css">
If navigation.css is first, styles.css may be rewriting your styles for your spry navigation.
Now, I'm going to throw you a curve. Spry has been discontinued and it "going away." I recommend you learn how to make your own navigation and Spry is usually used for drop-down navigation. You can do that in straight HTML and CSS.
Take a look at my last reply in this forum discussion for a bunch of pretty cool "do it yourself" navigation tutorials. -
Problems with my spry menu bar, need help
i made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Lindai made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Linda
Maybe you are looking for
-
How can I have my contacts on the cloud and my Mac hard drive?
How can I have my contacts both on the cloud and my Mac hard drive?
-
Junk characters in output print. Is it related to User profile?
Hi friends, My user generated Invoices using MRRL and generated output using MR90. Spool created for these invoices. But in the print, we are getting some lines with junk characters. It looks like chinese characters. 1. If I see the Spool print previ
-
Re: Sql*loader 11g - Error ORA-12899
My Bad file has first 2 records like this: MEMB_NUMBER,ID_NUMBER,ASSIGNED_MEMB_NUMBER,ASSOC_AMT,ASSOC_TYPE,DATE_ADDED,DATE_MODIFIED,OPERATOR_NAME,USER_GROUP,LOCATION_ID, 0000000107,0000828633, ,1.5,J,22-FEB-02,12-JUN-02,MSUM080_MEMB_CONV,00,, 0000002
-
Customer invoice n delivery note print together at time of Billing
Hi, Customer want invoice and delivery note attach together. once billing document saved invoice and delivery note print together immediately. plse suggest Thanks in advance..
-
Error R7 245 while importing custom infoobject
BW Gurus, We are tring to transport infoobjects from DEV to Q environment. Transport fails with return code 12. It cancels job RDDEXECL with error R7245 "InfoObject ZHRLOCAT is not available in version A" and object ramins inactive in Q. Infoobject i