Put a Spry Menu into a container div

Hi there,
I'm hoping someone can help me
I have a Spry Menu - but need to put this within a div tag - or as I;ve been advised, a container.
Could someone tell me how to do this step by step
Thankyou

Which Spry menu are you using?
The one in Dreamweaver (1.6) or Spry Menu 2.0 from the Widget Exchange?
Nancy O.

Similar Messages

Bigger buttons and getting the menu into its container

Hi everyone
Im trying to make my buttons look bigger but am not having much luck. They only get bigger by adding padding, is there not a way to set a width and a height for each...? I have tried but cant figure it out.
I am also having some trouble getting my buttons into its container. The 'nav' just looks like a black line running through the back of it. I have used black to identify it.
Ive tried to do it in HTML 5.
Im building the site bit by bit and this is the menu part.
ul, ol, dl {
     margin: 0px;
     padding: 0px;
nav{
     display:inline;
     width:500px; /* not sure I should have done this*/
     background:#000;
nav ul {
     display:inline;
     list-style: none;
nav ul li {
     display:inline;
     list-style-type: none;
nav ul a, nav ul a:visited {
     padding: 10px 10px 10px 10px;
     display: inline;
     text-decoration: none;
     background: #00F;
nav ul a:hover, nav ul a:active, nav ul a:focus {
     background:#F00;
     color: #00F;
     border-radius:10px 10px 10px 10px;
     -moz-border-radius: 10px 10px 10px 10px;

Hi Nancy
Im doing it locally and dont have a test page yet.
There is no other code besides this menu code at the moment. It is not in a wrapper div or anything yet.
I am trying to do my site bit by bit and then put it together at the end. If I try to do it all in one go I start feeling a bit bogged down.
This is the HTML if that helps
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<head>
</head>
<body>
<nav>
<ul>
    <li><a href="#">Why</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Resources</a></li>
</ul>
</nav>
</body>

Position Spry Menu Bar inside Header Div

Hi,
I have a horizontal menu bar that I am trying to position inside a header div at the top of my site. FYI, the layout of my site is that I have an outer wrapper div and the first div within the outer wrapper is the header div. I am following isntructions from a video tutorial I foudn that suggests that I set the ul.MenuBarHorizontal CSS rule to be "position - absolute" and "bottom - 0px". When I do this, it positions the menu bar at the bottom of the page, outside the margins of the header div. When I say bottom of the page, I don't mean at the bottom of the website page, but for some reason, at the bottom of the dreamweaver page, even outside of the outer wrapper div, depending on what I have the zoom set to. I hope the way I'm explaining this makes sense because it is completely baffling.
All I want to do is have the menu bar positioned at the bottom and horizontally centered inside the header div. Any suggestions?

I've put up an example of what you're attempting to do here:
http://perrelink.com.au/forum/sky/menu-in-header.php
Instructions on the page :-)
Hope this helps.
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Sync on Firefox mobile puts my Bookmarks Menu into Unsorted Bookmarks

On my laptop, I have Firefox 3.6.1.2 with Firefox Sync add-on 1.5. I have most of my bookmarks organized into multiple folders inside in the Bookmarks Menu folder.
On my Droid, I have Firefox Mobile 4.0b2 and I have set up sync.
Once I sync Firefox Mobile, and use it to look at bookmarks from my desktop, there's a problem:
The bookmarks from my desktop that should show up organized into subfolders under the Bookmarks Menu, instead are showing up in one long randomly sorted list under Unsorted Bookmarks (which on my laptop is empty).
The only bookmarks section that isn't getting mixed up this way is Bookmarks Toolbar, it is correctly showing the same bookmarks from Bookmarks Toolbar on my laptop.

This problem existed with the previous public beta as well, and it never resolved itself over a period of several weeks where I ran Fennec once maybe every few days.
With this new beta, I can't answer the question - it was so slow that I uninstalled it, sorry! (noticeably slower than the previous beta - I have a Moto Droid I with Froyo).
However, if it helps, I have attached a screen shot of my bookmarks bar on my PC so you can get an idea of how many bookmarks I've got and how they're organized (most of my bookmarks folders under Bookmarks Menu contain at least several dozen bookmarks each, and a few also contain subfolders).
I also should note that in Firefox sync prefs on my PC, I am only syncing bookmarks; I'm not syncing anything else (like tabs, history, etc.).

Spry (menu) in a .ascx file

I am trying to put my spry menu into a .ascx file but when i
do, none of the subitems are appearing. Also, none of the rollover
effects are working except for items that have no subitems.
Any ideas why?

You were partly correct, I did have the JS linked correctly
but i needed to include it and the script dreamweaver generates to
the ascx file, which makes sense. Also to keep things from looking
distorted in Design mode of dreamweaver and editing in Contribute,
I had to include the link reference in both my .aspx page and the
.ascx file. Which is a minor flaw, so im perfectly happy now.
Thanks!

Spry menu problem with div

when I try to place a horz. spry menu into a div, it hops outside the container.

I went back to the thread but could not figure out how to respond.
The site was originally built using AP Divs (including a spry menu bar). It appeared that the new menu “hopped” because the absolute position was still within the code – is that possible?
I created a new spry asset folder and started over. As you can see, it’s in the div just fine, but the buttons (font size, hover, etc.) are all messed up and I can’t figure out how to fix the problem.
http://www.hoistco.com/test3.html
Thanks for your help.

Spry menu bar extra space

I have put a spry menu bar into Dreamweaver and everything is working except there is a small space on the left of the submenus inside the submenu border.It's kind of hard to see because everything is blue, but if you look closely you can see it.
I have played around with the css (and probably messed a few things up along the way), but I cannot seem to get rid of this space.
Screen shot and css 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: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
margin-left: 3%;
/* 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: 8em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
/* 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: 0px;
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;
color: #FFF;
text-decoration: none;
background-color: #173362;
/* 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: #BCC5C2;
color: #000;
/* 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: #173362;
color: #FF0;
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
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
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;

Yes, I noticed the left margin after I had posted the reply. I guess I am doing my name proud with old age setting in.
I left the document and the CSS file as you had it and added the following style rules to correct the situation.
You can choose
add these to your document after the link to SpryMenuBarHorizontal.css
add these to the bottom of SpryMenuBarHorizontal.css
adjust the style rules within SpryMenuBarHorizontal.css to reflect the changes.
ul.MenuBarHorizontal li {
margin-left: 0;
ul.MenuBarHorizontal ul li {
width: 8.2em;
ul.MenuBarHorizontal ul ul {
     margin: -5% 0 0 95%;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
     left: auto;
ul.MenuBarHorizontal a {
     padding: 0.5em 2.75em;
The highlighted values in the last style rule can/must be adjusted to suit.
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 css not compatible with IE7? or compatibility View on IE8?

Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="../CSS/main.css" rel="stylesheet" type="text/css" />


<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
    <div id="buyNow1">
      <p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
    </div>
</div>
<div id="mainNav">
    <ul id="mainNavcontent" class="MenuBarHorizontal">
      <li><a href="../index.htm">Home</a>        </li>
      <li><a href="../swimmer.html">Swimmer Buddy</a></li>
      <li><a href="../order_now.html">Order Now</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
        <ul>
          <li><a href="../photo_gallery.html">Photos</a></li>
          <li><a href="../video_gallery.html">Videos</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
        <ul>
          <li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
          <li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
          <li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
          <li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
        </ul>
      </li>
      <li><a href="../about.html">About Us</a></li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</div>

<div id="pageInfo">
    <div id="info_page">
      <p class="regionID">Region ID</p>
      <hr class="breaklinePageInfo" />
      <p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
    </div>
    <div id="mainContent">
      <div id="content">
        <p>Main Content Goes her</p>
      </div>
    </div>
</div>


   <div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
   
<div id="footer">
<div id="footertext">
        <p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
      </div>
    <div id="footerlinks">
        <p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
      </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
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: 132.8px;
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: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: #333;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
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(../_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* 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(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* 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(SpryMenuBarDownHover.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;

Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same.

Spry Menu+Flash Content: Visibility Problem in IE

Hi, I created a web page with Dreamweaver CS3, and I put a
Spry Menu just over a Flash Banner. I set the wmode to transparent
and it works fine on all browser except for IE. It still doesn't
display the submenus which are hidden by the .swf file.
I read some articles but none explaining how to fix this
problem. Anybody knows how to solve it? Thanks for any help!
The code is here in case I made some mistakes:
<div id="FlashContent">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','700','height','160','title','Flash
Banner','src','images/flash/flash_banner','quality','high','pluginspage','
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmod e','transparent','movie','images/flash/flash_banner'
); //end AC code
</script><noscript><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="700" height="160" title="Flash Banner">
<param name="movie" value="images/flash/flash_banner.swf"
/>
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="images/flash/flash_banner.swf" width="700"
height="160" quality="high" pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"
wmode="transparent"></embed>
</object>
</noscript></div>

add this to the
@media screen, projection section of the css.
ul.MenuBarVertical li.MenuBarItemIE a and give it a fixed
height. That should fix it.

Spry menu doesn't appear in Yahoo! browser

I built a spry menu into my website in dreamweaver. I then
used the 'Check Page' function, and have checked it myself within
Safari and Internet Explorer and the page seems to work fine. I
have since found out though, that when accessing the website
through BT's Yahoo! browser the menu doesn't show, meaning that
visitors to my website only see the homepage. Does anybody know how
I can rectify this problem, since this browser is not listed within
the 'Check Page' function.
If you wish to see the menu, the website is
www.christopher-perkins.com
The menu should appear down the left hand side.
Thanks.

open your spry script file and locate this line:
this.createIframeLayer(menu);
Place 2 slashes in from to comment it out, like this:
//this.createIframeLayer(menu);
Then go here and deploy the wmode parameter for your flash
movie:
http://www.projectseven.com/support/answers.asp?id=127
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
http://www.projectseven.com/go/Elevators
"maylandmac" <[email protected]> wrote in
message
news:fvvm5k$jj$[email protected]..
> The page in question is at
http://www.mayland.edu/test/index.html
>
> I am at my wits end at solving a submenu drop-down
problem in IE7. I used
> the
> Horizontal Spry menu creation in Dreamweaver CS3,
placing it in a <div>
> and
> using that to fill the bar out across the page's design
and center it in
> the
> window. I have modified the background colors and font
sizes. The page
> looks
> fine in Firefox and Safari, but when the submenu appears
in IE7, menu
> items
> appear inline horizontally with each other instead of
vertically one under
> another. I'm sure there is a setting in the CSS that I
have either messed
> up or
> haven't set properly to make the menu appear properly,
but I can't find
> the
> problem. Could someone take a look and give ma an idea
of what I could do
> to
> make this work?
>

CSS - Spry Menu Problem

Hello everyone!
I am having a tricky question, I need your help with!
I want to insert a spry menu into my webpage. I want the colors of the menu and sub menu to change when I hover over them depending on how many sub menus exist.
All in all I have at most two submenus.
That means, I need to assign three colors. One for the menu without submenu, one for the menu with one submenu, and a third for the menu with 3 submenus.
So far it is working with two colors.
Who could help me?
Heartly regards!
This is what I got:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 8em;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 0px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: ##FFFFFF;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #0FF;
    color: z;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #0FF;
    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.MenuBarVertical 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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: #F0F;
    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.MenuBarVertical a.MenuBarItemSUBSubmenu
    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.MenuBarVertical a.MenuBarItemSUBSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: #FF0;
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

As is the case with any styling, all you need is an identifyer to apply style rules to it.
Hence, if you want to change the colour of a main menu item housing two sub-menu items, simply add a class name as in
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical a.three-subs {
    background-color: yellow;
ul.MenuBarVertical a.two-subs {
    background-color: red;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu three-subs" 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 two-subs" 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 4</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Positioning a spry menu

I am trying to integrate a Spry menu into one of the basic
CSS templates that comes with CS3.
I would like it to be positioned at the bottom of the header
section. The header section will also contain some kind of
masthead.
Unfortunately, it seems the the Spry menu just appears in
some kind of default position. I am unable to reposition it.
Any help or ideas for me?
Thank you.

It will work assuming a) you did it correctly, and b) your
page
infrastructure can sustain the location of the menu.
Can we see your page?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"buttercupnli" <[email protected]> wrote in
message
news:fe13km$b82$[email protected]..
>I tried that, but it didn't work either!

Spry Menu Bar Java Error

I just put a Spry Menu Bar, but am having issues with it. It seems to function just fine, but I am getting issues when I am trying to edit the properties. I keep getting the error
"When executing inspectSelection in spry_menubar.htm, a JavaScript error occured"
I am not sure where I have gone wrong. I have tried deleting the Spry Menu Bar and doing it again, but I still run into the errors.

which version of SpryMenuBar are you using
which properties did you try to edit
does the error occur in DW or in the browser
if the error occurs in DW, which version of DW are you using
if the error occurs in the browser, which browser and version are you using
which operating system are you using
have you included a DOCTYPE declaration and which one
etc, etc, etc.....
Of course you could send a link to your site and not have to bother about answering the above questions.
Gramps

How do I get banner & Spry Menu Bar to appear on every page?

Hi,
I am a new user of Dreamweaver CS6 an a relatively new user to website development in general.
I just followed along through Davide Powers "Creating your first website" tutorial series and found it to be very helpful. I made it through all six parts and managed to get the Check Magazine sample website up and running. I now want to use what I learned to creat my own site, and I am stuck already.
The tutorial does a great job of explaining how to setup a Spry Menu Bar to use for navigation. The tutorial, however, only shows how to put this Spry Menu Bar on the main index.html page. For my actual site, I would like my navigation bar (and my banner) to appear on every one of my pages.
Can anyone here tell me where I can find instructions on the best way to do this?
My navigation requirements are very simple. I just want a common banner with navigation buttons to appear at the top of every one of my pages. The Spry Menu Bar that was created in the tutorial would work great for me assuming I can find a relatively simple way to get it (along with my banner) to appear at the top of every one of my pages.
If it is very complicated to get it to appear on every page (or would require a large time investment in learning advanced techniques), then I would consider passing on the Spry Menu Bar and trying to setup my navigation in a simpler (if more old-fashioned) way.
Any advice will be greatly appreciated.
Thanks in advance,
Paul

If a small, 4-5 page site, make a prototype page with all your columns, headers, footers, menus, etc... and go to File > SaveAs index.html, and then File > SaveAs > page1.html, and then File > SaveAs page2.html, etc...
Or you can save your prototype page as a Dreamweaver Template (.dwt file). Add editable regions for stuff that will change from page to page. Everything outside editable regions is common to all site pages. Then use your Template to spawn site pages. File > New > Page from Template, index.html, page1.html, page2.html, etc.... DW Templates are nice site management tool. But before you use them, read all you can about them in F1 Help as they can be a little tricky to master.
Last but not least, look at Server-Side Includes. They're a huge time saving feature. I use them on every site I build.
Server-Side Includes
http://www.smartwebby.com/web_site_design/server_side_includes.asp
Nancy O.

Put a Spry Menu into a container div

Similar Messages

Maybe you are looking for