Spry menu z-index in DW template

I am trying to create a unified website using a dreamweaver template. I have a header with a spry dropdown menu beneath it, which extends (when expanded) down over an editable region in the template. I can make the drop down menu work correctly in the template, but if I add a new div tag near or beneath the dropdown menu in the "child" page (a new document- from the template) it's z-index is above the drop down menu and obscures the drop down menu items. I would like the have the flexibilty of adding the new divs in the editable region in the child pages, but don't know how to make the spry drop menu stay on top... any suggestions ??
thanks,
jay

So, you probably found out that the use of templates has nothing to do with this issue, right? And the simple solution is to adjust the z-index of the Spry element so that it's higher than anything else on the page. (in addition you want to limit your use of positioned elements anyhow, since that is not a general layout tool to begin with)

Similar Messages

How Do I Create an Editable Spry Menu as part of a Template?

I am having considerable trouble trying to work out an issue and hope you can help. I have been working on a webpage that I would like to be a template for a fundraiser we are doing. I used a horizontal spry menu and a vertical spry menu. I have two youtube videos that I would like embedded on the page, but I would like the flexibility to change them for different pages. I am trying to make my horizontal and vertical spry menus editable since I am going to be making pages for all items in the menus. I can't seem to set this up correctly. Can you tell me what I am doing wrong? I have been able to set up editable regions according to my template file, however, when I open the template, I am unable to edit the spry menus or edit the youtube videos. Setting up editable regions also seems to change the look of my page.
Here is what I would like all the pages to look like: http://www.ymimusic.com/shoppers_guide.html
But this is how it looks presently when I try to make a page from the template I created following the instructions from the course: http://www.ymimusic.com/test.html
Since I cannot get the template to work the way I would like, I have not created any links yet. I can send you the template and html page if this will help. Thank you for your help in advance./p>

Murray,
I am just opening your responses now. I will try to clarify again. "There's the rub. This is not a wise choice. A completely different menu in each page will not only confuse your visitors, it will drive you insane. I strongly suggest you not do this." You were referring to "What throws us off the track is your wish to be able to have a different menubar in each page. In that case the menubar will need to be in an editable region."
What I am simply trying to do is this: If I create a menu that has the following links: About Us, Products, and Contact Us on one page, I want my customers to see the SAME menu on the About Us page, the Products page and the Contact Us page. I am NOT creating different menus on each page. I am trying to automate the format by creating a template that will show these links on each page without me redoing it every page.
When I attempted this, and created a page from the template, I could not get into the menu to assign links to different pages. Using the above example, If I created my About Us page as the template for the site, then created the Products page from the template, I need the ability to assign the links on the Products page to the About Us and Contact Us pages. The page created from the template does not allow me to do this. I cannot get in to assign the links in the Properties section of Dreamweaver. I even attempted to do the following action in the .dwt file I created:
Modify > Templates > Make Attribute Editable
I did this to make the links editable after creating the template. This obviously didn't work.
To summarize: I do NOT want to make different menus on each page. I simply want to create the two menus you see (one horizontal and one vertical) that will be part of the template. I am trying figure out when I assign the links and How. I will go back and read your notes as well as read the help section (F1) as you requested, however that is why I contacted you; I did not understand what I was doing wrong. I have been working with a course series in Lynda.com that has explained much of what to do up to my problem spot, I simply need to understand the concept.
Thank you for your assistance.

Add spry menu to external css or template

I have a working navigation menu at www.reachyourpotential.ca
but I haven't used an external style sheet on this website and that
seems to be the thing to do these days. I used cs3 to add a spry
horizontal menu to a template (standard cs3 2 column). Should I
move the spry menu to an external style sheet?
I believe the benefits of an external css are faster page
loading speed and better seo.
I am also revising a website for a client and want to get it
right the first time.
Which is better - add the spry menu to an external css or a
template?
Thank you.

This may sound really dumb as no one ever addresses this
issue, but once I create the Spry menu and then create all my other
pages from the template, what if I need to change something in the
menu? Since the href's are located in the HTML of the sheet itself,
not in the .css or .js, how do you get to the point where you just
change it one place and it changes everywhere?
Does this make sense? What piece of the puzzle am I missing?
Thanks for any assistance.

Spry Menu in CSS not a Template?

Hello,
I created a template with a spry navigation bar. This
template is used for all pages within my site. Is there a way to
use the same spry navigation bar with all page links through an
external CSS instead of putting it in a template? I'd like to try
using straight CSS for all of my pages as opposed to using a
template.
Thank you.

You are confused.
Why do you want to move this out of the template?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"WPW07" <[email protected]> wrote in message
news:fokfnl$bsv$[email protected]..
> Hello,
>
> I created a template with a spry navigation bar. This
template is used
> for
> all pages within my site. Is there a way to use the same
spry navigation
> bar
> with all page links through an external CSS instead of
putting it in a
> template? I'd like to try using straight CSS for all of
my pages as
> opposed to
> using a template.
>
> Thank you.
>

Spry menu bar in template

Hi,
I'm new to dreamwever, but since it is really user friendly I
already achived a lot.
But I have a problem with the spry menu bar. What I want is
the following.
I have a template on which I want to place my spry menu on.
That's what's already is working.
The next thing I want is to have the backgroundcolor of the
menuitems changed per page I created based on the template. Herefor
I want to change the CSS. But since I placed the spry menu in the
template I can't touch the CSS rule and so change anything in the
CSS.
My first thought was to place the menu in an editable region,
but unfortunalty you can't place a spry widget in a editable
region.
Who can help me figer out what to do.
Thanks in advance.
Lesley

<link href="assets/SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css" />
This file is completely editable. That's where you would make
the changes
to the Spry menu's stying.
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
==================
"lesleyudw" <[email protected]> wrote in
message
news:[email protected]...
> No, it's not working for me. I can't touch the CSS, I
attached the code
> I'm
> talking about. When I have this open in dreamweaver cs3
then I can't
> change
> anything to the assests CSSline
>
> <!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>Mendoline | Home</title>
> 
> <style type="text/css">
> 
> </style>
> 
> <link href="assets/style.css" rel="stylesheet"
type="text/css" />
> <script src="assets/SpryAssets/SpryMenuBar.js"
> type="text/javascript"></script>
> <link
href="assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet"
> type="text/css" />
> </head>
> <body>
> <div class="transparant">
> </div>
> <div class="container">
> <div class="header">
> <img src="assets/images/headergif.gif" width="658"
height="143" />
> </div>
> <div class="menu">
> <ul id="MenuBar1" class="MenuBarHorizontal">
> <li><a href="index.html">Home</a>
</li>
> <li><a href="wiezijnwij.html">Wij zijn
wij</a></li>
> <li><a href="#"
class="MenuBarItemSubmenu">Entertainment</a>
> <ul>
> <li><a
href="heksenact.html">Heksenact</a></li>
> <li><a href="#">The Dutch
Way</a></li>
> <li><a href="#">Sport en
Spel</a></li>
> <li><a href="#">Popenkast
theater</a></li>
> </ul>
> </li>
> <li><a
href="organisatie.html">Organisatie</a></li>
> <li><a
href="gastenboek.html">Gastenboek</a></li>
> <li><a
href="contact.html">Contact</a></li>
> </ul>
> </div>
> <div class="content">
> <h1>
> Home
> </h1>
> 
> <p>This is the home page.</p>
> 
> </div>
> </div>
>
> <script type="text/javascript">
> 
> </script>
> </body>
> </html>
>

Spry Menu Bars, Templates and Current Page Indicators

Hello,
If you have a spry menu bar in your design, then create a template, how do you then go about making the menu bar have a current page indicator on each page created from the template?
Thanks,
Ferg.

Can I send you on a different path? This solution will only be required in a non-editable area of the DWT.
First we write a function to initialse the page
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
The function compares the URL of the page with the link in the menubar and if they are both the same, it will add an 'activeMenuItem, class to the menuitem.
Next we nee a trigger to activate the function. This is done with a load listener as per
Spry.Utils.addLoadListener(InitPage);
Now we need to ensure that our active menuitem looks different, by assigning a couple of style rules as in the following. The !important needs to be there to override the JS.
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
And lastly we need to add SpryDOMUtils.js as the JS script that we based our JS scripts on
<script src="SpryAssets/SpryDOMUtils.js"></script>
The whole thing will look like
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
</style>
</head>
<body>
<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>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Or see it live here http://shoguncarco.com.au/index.php where the function has been externalised in http://shoguncarco.com.au/js/plugins.js
Gramps

Spry menu updating through template

I've created a number of pages based on templates that I designed. The templates use a horizontal spry menu. Now I want to hook everything up. But when I update the spry menu in the template it has no affect on the template based pages. When I save the template with the changes, I get the dialog box asking me if I want to update all the pages based on the template. So I say yeah update all of the selected files. But it doesn't update them. What am I missing? I had some issues removing the mark of the web code from the template. I got a message saying that changes to the template would no longer appear on child pages (or something similar). Could this be my problem?

Beth,
Thanks for asking. I have a couple of display issues that deal with spry data sets and a flash photo gallery, but those I can't resolve until I actually publish the site and can verify that the problem exists when viewed live. That way I can also link to the problem so others can see the issue. Those are display issues. The other issue is also a display issue, but it's one that I need to solve before I can publish my site.
I have started a discussion on this problem in the Dreamweaver forum, but since I still have the issue, I hope it's okay if I post here as well. The issue deals with a horizontal spry menu.
I have a page that displays a youtube video. It sits under the horizontal menu. When you try to select something from the drop down menu, the menu appears behind the youtube video (the links are hidden) and can't be selected. Someone on the Dreamweaver site checked out the link I provided and said that they didn't have any problems using Firefox. But I still can't see the menu with IE8 or Safari. Here's the link:
http://www.emiliocorsetti.com/publish/boot.html
That same person on the Dreamweaver forum suggested that I put the video in a div and give it a z-index. I tried that, but I'm really not sure what value to enter. The menubar has several z-index values ranging from 1000 to 1020. So I've tried the following values 900, 980, 990, 1030, 1040. No luck.
Emilio

Vimeo + Spry horizontal menu: z-index?

Hi all,
when I embed a video from vimeo, and I guess any other flash derived movieplayer, the spry menu kindof disepears behind the embedded movie.
I already tried to google it and also on this forum, but no solution found.
I also already tried to raise the z-index from 1000/1020 to 10000/10020 thinking that the vimeo player had an higher z-index but that even didn't work...
Is this a know problem and even more: is there a known solution for this problem :-d
Thanks for the help.

add the parameter
wmode=transparent to your flash movie

Spry Menu w/ templates or library items

I LOVE the new spry menu, but I'm frustrated with how to
insert an existing menu onto subsequent pages. I tried to add the
menu to the library but that didn't seem to work. Should I use a
template instead? I can't seem to find documentation on this...am I
missing something? Any advice?

Not sure what that is...tried to look it up in the help
file...is it this?
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
If so, how do I attach it? Also, how do I edit once it's a
library item? I seem to lose that lovely spry interface in the
property manager.
If there is any documentation that you could point me to I'd
be grateful. I'm afraid I'm not finding it.

Spry Menu Template question

I am fairly new to Dreamweaver and am self taught so I am
trying to learn the best way to do things. I have created a
horizontal Spry menu on one of my pages in DWCS3. I then copied and
pasted that code on each page I wanted the Spry menu. How can I now
go back and make the menu a template so that any changes I make
will be reflected on every page that has the menu - instead of
having to change each page every time I change the menu.

> If I create the whole page as a template, then are all
of the subsequent
> pages
> that use the menu also templates
You need to read DW's F1 Help about how to make templates and
spawn child
pages. If you make the page a template, you would need to
also specify
editable regions (regions in which content can be edited on
the child
pages).
If you use includes, you would need to create a text-only
page in DW, into
which you paste the content for the menu *ONLY*. Save this
file as whatever
filename you like. In any page that you want to use the menu
you would need
to a) have the required Spry javascript already in the head
of the page, and
b) use INSERT | Server-Side Include, to browse to and select
the menu
include file.
It's a bit tricky. Make sure you get the hang of this using
test pages
first, with simple content.
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
==================
"Steve Field" <[email protected]> wrote in
message
news:fb6fj0$q56$[email protected]..
> which method do you think would be more efficient and
easier to maintain.
> We
> use php on our server. Can you explain exactly how to
use the include. I
> am
> assuming I make the menu a separate page then do I save
it as a javascript
> file. I am a novice.
> If I create the whole page as a template, then are all
of the subsequent
> pages
> that use the menu also templates
>

Master / Template Spry Menu?

I am new to Dreamweaver, teaching myself through online tutorials and have faired pretty well until now.
I have been building a website as a digital porfolio and now that I have more pages, managing the spry menu I initally created is becomeing more difficult.
So far, every time I add a page I update the spry menu bar on the main page, then copy and paste it onto all the pages that have the same menu and then re-upload every page to the internet. (Very Tedious)
I would like to create a master or template spry menu bar, that I can update that will automaticlly update on all pages using the same menu.
All the tutorials I have found have been on how to crate and poupulate the menu, so if someone could dirrect me to a tutorial more fit for what I'm trying ot achieve, I owuld be greatly appreciative.
If you like you can look at hte menubar I am refferign to at http://mgarito.com/Portfolio/Portfolio.html (only the tabs Graduate and Undergard have been populated with data thus far)

Heya Michael,
It may be that you're not using the correct file directory to point to your include file. If MenuBar.php is in the root of your site and the include is in a different directory you may have to insert the include with preceding ../ to point to the include file in a higher directory.
<?php include("../../spry_menu.php"); ?>
Also in MenuBar.php insert only the spry menu code not the doctype, head, body, etc. what I'd do is put the head js and css in the pages you have the menu bar and just put this in MenuBar.php
<ul id="PortfolioMenuBar" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="http://mgarito.com/Portfolio/Graphic/PlexiPlates/PlexiPlates.html">Graduate</a>
      <ul>
        <li><a href="http://mgarito.com/Portfolio/Graduate/TransbayHSR/TransbayHSR.html">Transbay HSR</a></li>
        <li><a href="http://mgarito.com/Portfolio/Graduate/Firefly/Firefly.html">Firefly</a></li>
        <li><a href="http://mgarito.com/Portfolio/Graduate/Gem/Gem.html">Gem</a></li>
        <li><a href="http://mgarito.com/Portfolio/Graduate/LiveWork/LiveWork.html">Live / Work</a></li>
      </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Undergrad</a>
      <ul>
        <li><a href="http://mgarito.com/Portfolio/Undergraduate/NYC/NYC.html">NYC Gateway</a></li>
        <li><a href="http://mgarito.com/Portfolio/Undergraduate/ReadingRoom/ReadingRoom.html">Reading Room</a></li>
        <li><a href="http://mgarito.com/Portfolio/Undergraduate/AfricanArtMuseum/AfricanArtMuseum.html">African Art Museum</a></li>
        <li><a href="http://mgarito.com/Portfolio/Undergraduate/DoorWindowStair/DoorWindowStair.html">Door Window Stair</a></li>
      </ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Lighting</a>
      <ul>
        <li><a href="#" class="style8">Welded Wire Lamp</a> </li>
        <li><a href="#">Tower Lamps</a></li>
        <li><a href="#">Cantilever Lamp</a></li>
      </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Furniture</a>
      <ul>
        <li><a href="http://mgarito.com/Portfolio/Furniture/Easel/Easel.html">Easel</a></li>
      </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Fashion</a>
    <ul>
      <li><a href="http://mgarito.com/menubartest2.php">Accessories</a></li>
      <li><a href="http://mgarito.com">Clothing</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Graphic</a>
      <ul>
        <li><a href="http://mgarito.com/Portfolio/Graphic/PlexiPlates/PlexiPlates.html">Plexi Plates</a></li>
        <li><a href="http://mgarito.com/Portfolio/Graphic/Pastel/Pastel.html">Pastel</a></li>
      </ul>
</li>
</ul>
<script type="text/javascript">

</script>

How to pass a value instead of index to the spry menu?

Hi,
I am using spry menu in DW and I have a page called products which has a menu with some items. The question is how can I access to item menus using this link:
".../products.html#USNP"
Now I can access to a specific menu item of this page using the following link ".../products.html#tab=3" but i like to have the name of the menu items instead of the item number.
I would be appreciated if anyone can help me .
Thanks

So we are talking SpryTabbedPanels where the tabs are used as your menu bar.
The out-of-thebox Spry product identifies each tab as a number and as such, only numbers can be use to open each panel.
To overcome this limitation, you can assign your expressions to corresponding numbers. I am not sure if the '#' will do the trick, thinking that you may need to assign a variable instead.
Gramps

Spry Menu Bar Widget 2.0 (1.0) -- IE 6 Rendering Snag

Hi:
Once again I need to call on the aid of others with more detailed knowledge of the spry frameworks, particularly the Spry Menu Widget 2.0 (vers. 1.0) developed by Adobe labs.
I have posted the site to http://www.aclco.org/testing/index.html. You will see that it works beautifully, thanks to the help of many contributors, except in IE 6.0, where, when the sub menus become visible and drop down, it causes all page elements (divs) to be pushed down to create the necessary room to accommodate the drop down. The natural overlap of the sub-menu over pre-existing content doesn't seem to overlay properly.
It does this on all pages, and not just those which present flash sideshows. And as I say it is peculiar to IE 6.
I have followed the tutorial provided by David Powers in deploying the widget and have not altered the spry skin css or the basic css. Any changes (affecting padding, etc. and adding of background images where created using the widget browser and supplemented in the css added to the template page. The "add-on" css was then added to the general style sheet governing the whole site layout.
I was wondering if anyone else has experienced this problem, if there are any work arounds or hacks that anyone is aware of, or any other suggestions that might help.
I haven't been able to preview this on a free standing PC using IE6, but was able to reproduce the problem on 2 cross browser testing services employing a "live mode". I renders properly until the sub-menus are called upon to become visible, and then the problem manifests.
Your assistance will be greatly appreciated.
Sincerely,
Steve Webster
Attach.
Please note: Attached are the relevant excerpts from the customized style sheet as amended from the spry widget browser:
/* -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles -- */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 17px;
font-style: normal;
padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 10px 10px 10px 4px;
background-color:#000088;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segme nt-Dark.png);
background-repeat:repeat-x;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 0px 18px 0px 5px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
font-style: normal;
background-color:#000088;
padding:0px 2px 0px 0px;
border-width:0px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: none;
padding: 0px;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 0px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 10px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 10px 10px 10px 10px;
width: 240px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #2E35A3;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segme nt%20Light2.png);
background-repeat:repeat-x;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color:2E35A3;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
/* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */

I have systematically reviewed the tutorial of David Powers on the Spry Menu bar 2.0, and recreated the process in a methodical process - making one change at a time, and then checking each step on a cross browser testing server, and have found, quite to my amazement that what seems to be causing the problem of the "gap" in IE 6 is by removing the customized styles from the head of the individual pages, and placing them in CSS stylesheet that governs the entire site.
I find this quite inexplicable. When the customized CSS rules governing the menu bar are situated in a separate stylesheet, the page renders well enough for any of the "modern" browsers, but won't render in IE 6. All that I get is a horizontal menu with drop downs, but none of the styling (specifically background colours, background images, etc.) that are called for in the stylesheet and that otherwise appear when rendered by other browsers.
I realize that this sounds strange, but I was wondering if anyone had experienced this phenomenon, or could offer any explanation.
Any suggestions would be greatly appreciated.
Steve Webster

Creating multiple Spry menu bars in one site

I've been creating a website and I am required to use multiple templates to manage all the different sections of the site. To make it much less of a hassle, once I created one template, I simply saved that template as another template so I would not have to start all over again. On the first template I created a spry menu bar with a certain amount of buttons. And because I created the other templates with that template, those templates had the same menu bar containing the same settings. The problem is, because of the specified settings of the spry menu bar, if I change the amount of buttons from the original to one less, the whole bar on that template will get off center and messed up because the settings for the menu bar are not set to that certain amount of buttons, but if I change the settings to suite that amount of buttons, then the settings for all the templates change and that messes up the other menu bars on those templates because they have a different amount of buttons. Currently my templates all contain 10 buttons and I am wanting to create a new menu bar with only about 4 - 6 buttons. I thought going up to insert and inserting a brand new menu bar would do the trick but when I did that it inserted a menu bar that had all the settings of the already-created menu bar, (ie same background images, and hovers, etc.) as well as the width which, because the width is suited for 10 buttons, it does not properly make the default 4 button menu bar center correctly. And if I try to change the settings on this menu bar then the same thing happens with everything changing and getting messed up.
So after this long explanation, my question is, how can I insert multiple spry menu bars into one site that are not correlated with each other in terms of all the settings so that when changed, will not affect each other? I am guessing I am having this problem because I created all the templates from one template so they are all interlocked, but the page that I tried to insert the brand new menu bar on was not created from any of the templates and was the first page I made at the very start.
http://phonytrojanmusic.zxq.net/ Here is the link to the site. The first page that opens up is the page that I tried to insert the brand new menu bar on. If you click on band choir or elementary you will see the menu bars with 10 buttons that are all interlocked in terms of settings. Also, I'd like to note that if I delete a button in one template, it does not delete that same button in the other templates, nor does it add a button to the other templates if I add one. Only the physical appearance changes because the settings are meant for only one amount of buttons. Sorry for the novel!

Alright well I just tried to use 2 complete different templates. I created one brand new template from scratch, added the menu bar, gave it an ID of "band", and configured it to suite 10 buttons accordingly. Then I started off from scratch again with a starting html page with a different css style sheet and added the menu bar and gave it a different ID of "choir" but the settings of the two different bars still act as one set of settings! I dont know how to fix this problem. Please tell me what to post if anything will help you. Im guessing the solution is very simple but I have tried everything.
here is the code for the two different menu bars (one in each template)
choir
<ul id="Choir" class="MenuBarHorizontal">
      <li><a href="#">Programs</a>      </li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a>      </li>
      <li><a href="#">Directors</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Forms</a></li>
      <li><a href="#">Calendar</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
band
<ul id="Band" class="MenuBarHorizontal">
      <li><a href="http://phonytrojanmusic.zxq.net/index.html">Programs</a>      </li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/bandmain.html">Home</a></li>
      <li><a href="http://centerburgtrojanmusic.blogspot.com/">Blog</a></li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/directors.html" class="MenuBarItemSubmenu">Directors</a>
        <ul>
          <li><a href="http://phonytrojanmusic.zxq.net/band/directors/cooper.html">Cooper</a></li>
          <li><a href="http://phonytrojanmusic.zxq.net/band/directors/teschler.html">Teschler</a></li>
          <li><a href="http://phonytrojanmusic.zxq.net/band/directors/lee.html">Lee</a></li>
        </ul>
      </li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/shows.html" class="MenuBarItemSubmenu">Shows</a>
        <ul>
          <li class="MenuBarHorizontal"><a href="http://phonytrojanmusic.zxq.net/band/shows/field.html">Field</a></li>
          <li><a href="http://phonytrojanmusic.zxq.net/band/shows/concert.html">Concert</a></li>
        </ul>
      </li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/gallery.html">Gallery</a></li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/forms.html">Forms</a></li>
      <li><a href="http://trojanmusic.org/cal.html">Calendar</a></li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/links.html">Links</a>      </li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/contact.html">Contact</a></li>
    </ul>
I currently do not have any links attached to any of the buttons in the choir bar. Something went wrong and now I have to make the whole site over again so it is not very accessible. Please post back asap!

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.

Spry menu z-index in DW template

Similar Messages

Maybe you are looking for