Link to home
Start Free TrialLog in
Avatar of Russ Cummings
Russ CummingsFlag for United States of America

asked on

Spry submenus covered by another <div>

All,
  This might be a simple fix, but I can't see the forrest through the trees.
I have a dark purple banner <div>& a white container <div>.  On the very bottom of the banner is a horizontal Spry menu, with inital white lettering, which changes to dark purple w/ light purple on hover.  All works fine with respect to the main menus.
However, when I added the submenus,they were covered by the main <div>; which started just below the main menu dark purple.
When I adjusted the heigth of the banner by 300px, I could see the submenu, but then this covered up my content in the main (white) <div>.
Since everything is the size, font, color & position except for the submenus - how can this be remedied?
I will be glad to post html / css if necessary, but first I'd like some general tips and/or clues of what might be going on.

Thank you all in advance,

Russ
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Hi Russ,

You may need to set z-indexes on the various divs so the menu divs have a higher z-index than the main div.
Avatar of Russ Cummings

ASKER

jason,
  Guess I need your further help, as I'm not familiar with z-index.
Would you please give a detailed example as to how to use it & where to put them.

Thanks, Russ
Russ,

Try this tutorial and respond with a more specific version of the question:

http://www.echoecho.com/csslayers.htm
jason,
  Thank you. Let me play with those concepts for a day or so, then if I have any further detailed questions I'll ask, otherwise I'll award the points & close it.
Russ
No problem.  Z-index is not that tough to understand...higher values sit on lower values but actual implementation is sometimes tricky.  Your stuff sounds straightforward, though.  
jason,
 I added z-index layers to the page with the banner that contains the Spry menu a z-index:2; and the main content (white) with a z-index:1; as I understand, the higher the index, the higher on the "visible stack".  This worked only if I added the heigth of the submenu to the banner. This has banner (dark purple) remain on the screen, if the user doesn't select a submenu option.  
So 2 questions: 1. Is my understanding of z-index correct?
                          2. Is there a cleaner way to code the whole submenu portion, so they disappear when not hovered over or clicked?
Please see attached code
<!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>xxx</title>
<link href="styles/container.css" rel="stylesheet" type="text/css" />
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #ImageSlideShow */

#ImageSlideShow {
	width: 456px;
	margin: 24px 0px 0px 0px;
	border: solid 1px #ffffff;
	background-color: #FFFFFF;
	padding-top: 10px;
}

#ImageSlideShow .ISSName {
	top: -24px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 18px;
	text-transform: uppercase;
	color: #AAAAAA;
}

#ImageSlideShow .ISSSlideTitle {
	top: -18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	overflow: hidden;
	color: #AAAAAA;
	text-transform: none;
	right: 0;
}

#ImageSlideShow .ISSClip {
	height: 300px;
	margin: 0 10px 10px 10px;
	border: solid 1px #ffffff;
	background-color: #ffffff;
}

#ImageSlideShow .ISSControls {
	top: 11px;
	height: auto;
}

#ImageSlideShow .FilmStrip {
	height: 80px;
	background-color: #ffffff;
}

#ImageSlideShow .FilmStripPreviousButton, #ImageSlideShow .FilmStripNextButton {
	width: 25px;
	height: 80px;
}

#ImageSlideShow .FilmStripTrack {
	height: 80px;
}

#ImageSlideShow .FilmStripContainer {
	height: 80px;
}

#ImageSlideShow .FilmStripPanel {
	height: 80px;
	padding-left: 10px;
	margin-right: 0px;
}

#ImageSlideShow .FilmStripPanel .ISSSlideLink {
	margin-top: 10px;
	border: solid 1px #ffffff;
	background-color: #FFFFFF;
}

#ImageSlideShow .FilmStripPanel .ISSSlideLinkRight {
	border: solid 1px #ffffff;
	width: 56px;
	height: 47px;
	margin: 4px 4px 4px 4px;
}

#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLink {
	background-color: #FFFFFF;
	border-color: #ff0000;
}

#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLinkRight {
	border-color: #ffffff;
}
    
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2141543" binding="#ImageSlideShow" />
</oa:widgets>
-->
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="sidebar">
  <blockquote>
    <p> Contact Us: </p>
    <p>  </p>
    <p> Ph:  </p>
    <p> Fax: </p>
    <p> <a href="mailto:xxx@xyz.com"> xxx@xyz.com</a></p>
    <p> <a href="www.xyz.com" title="xxx">www.xyz.com</a></p>
    <p>_______________________________ </p>
    <p> <img src="images/image001.png" width="250" height="128" alt="Avaya IP Solution" /></p>
    <p align="center"> <em>Avaya IP Office Solution</em></p>
    <em><strong>
      <p>Standard PBX Phone Systems</p>
      <p>VOIP Phone Systems</p>
      <p>SIP Phone Systems</p>
      <p>Hosted Phone System</p>
      <p>Rental Phone System</p>
      <p>E-Mail</p>
      <p>Web-Site Design</p>
      </strong></em> <img src="images/image002.jpg" alt="Snom VOIP" width="248" height="203" align="left" />
    <p align="center"><em> Snom VOIP Phone Solution </em></p>
    <p align="center"><em><strong> Your total Business 
      Communication<br />
      Provider </strong></em></p>
  </blockquote>
</div>
  <div id="banner">
        <div id="banner1"><br />
          <div align="center">xxx</div>
        </div>
        <img src="images/logo.jpg" alt="Logo" width="274" height="119" align="right" />   
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html" title="">HOME</a></li>
        <li><a href="about.html">ABOUT US</a></li>
        <li><a href="products.html" title="Products/Services" class="MenuBarItemSubmenu">PRODUCTS/SERVICES</a>
          <ul>
            <li><a href="avaya.html" title="Avaya">Avaya PBX/VOIP Solution</a></li>
            <li><a href="snom.html" title="Snom">Snom PBX/VOIP Solution</a></li>
            <li><a href="pbxact.html" title="PBXact">PBXact SIP Solution</a></li>
            <li><a href="hosted.html" title="Hosted">Hosted Solution</a></li>
            <li><a href="rental.html" title="Rental">Rental Solution</a></li>
          </ul>
        </li>
        <li><a href="extended.html" title = "Extended Services" class="MenuBarItemSubmenu">EXTENDED SERVICES</a>
          <ul>
            <li><a href="website.html" title="Website">Website Development/Design</a></li>
            <li><a href="business.html" title="Business">Business Packages</a></li>
            <li><a href="liquid.html" title="Liquidation">Liquidation/Legacy Services</a></li>
          </ul>
        </li>
        <li><a href="support.html" title="Support" class="MenuBarItemSubmenu">SUPPORT</a>
          <ul>
            <li><a href="tech.html" title="Tech">Tech Services</a></li>
            <li><a href="rrp.html" title="RRP">R &amp; R Program</a></li>
            <li><a href="quote.html" title="Quote">Get a Quote</a></li>
          </ul>
        </li>
        <li><a href="contact.html" title="Contact Us">CONTACT US</a></li>
      </ul>
    </div>
    <div id="main">
      <p><h2>
      &nbsp;&nbsp;HOME
      </h2>
      <ul id="ImageSlideShow" title="">
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-1.jpg" title="index"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-10.jpg" title="about"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-11.jpg" title="Tree"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-12.jpg" title="Canon"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-13.jpg" title="Door"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" title="Flowers at the Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-14.jpg" alt="photos-14.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-15.jpg" title="Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-15.jpg" alt="photos-15.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-2.jpg" title="Orchid Close Up"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-2.jpg" alt="photos-2.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-3.jpg" title="Dirt Road"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-3.jpg" alt="photos-3.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-4.jpg" title="Fence Post"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-4.jpg" alt="photos-4.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-5.jpg" title="Portrait of a Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-5.jpg" alt="photos-5.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-6.jpg" title="Brown Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-6.jpg" alt="photos-6.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-7.jpg" title="Spotted Horse Head"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-7.jpg" alt="photos-7.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-8.jpg" title="Spotted Horses"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-8.jpg" alt="photos-8.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-9.jpg" title="Lone Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-9.jpg" alt="photos-9.jpg" /></a></li>
      </ul>
      <script type="text/javascript">
// BeginOAWidget_Instance_2141543: #ImageSlideShow

var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
	widgetID: "ImageSlideShow",
	widgetClass: "BasicSlideShowFS",
	injectionType: "replace",
	autoPlay: true,
	displayInterval: 4000,
	transitionDuration: 2000,
	componentOrder: ["name", "title", "view", "controls", "links"],
	sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
	plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
	TFSP: { pageIncrement: 5, wraparound: true }
});
// EndOAWidget_Instance_2141543 was 8 rgc 12/12/11
      </script>
</p>
<p>
Picking the right phone system for your business can be a challenge. 
</p>
<p><img src="images/image012sm.jpg" width="268" height="86" alt="Avaya" />
  <img src="images/image015.gif" width="274" height="96" alt="Bogen" />
  <img src="images/image010.jpg" width="182" height="192" alt="snom" />
  <img src="images/image014.gif" width="146" height="181" alt="PBact" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
  <img src="images/image008.jpg" width="189" height="98" alt="Plantronics" /></p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div>
</div>
</body>
</html>

Open in new window

1.Yes
2. Can I get a link to look at instead of raw code?  Easier when I can see it with moving parts.  
jason,
  www.automatedanswers.com/telnet is how you get to the page. Is that what you mean, excuse me for being ignorant, but this is my 1st Dw project, never dealt with css, widgets either new to me.
Russ
2 you are using the cleanest way of doing it

css is not hard to understand in you code you have a css for the spry menu horizontal
and all you have in the css is the elements like

#ImageSlideShow {
      width: 456px;
      margin: 24px 0px 0px 0px;
      border: solid 1px #ffffff;
      background-color: #FFFFFF;
      padding-top: 10px;
}

so a css allows the #imageslideshow in multiple pages by linking the css file
jason et al;
  Sorry, a typo.
Should be http://www.automatedanswers.com/telnet1

Russ
Okay, weirdness.

FF 8 and Chrome WhateverVersionTheyAreOn works fine with no z-index involved (I removed z-index:1000 from your code with Firebug) on ul.MenuBarActive.  What browsers are you seeing the issue with?

The rest of it is kind of a mess and hard to figure out :)

Let's try this.  Remove the Spry Menu Bar (maybe do this on a copy of the telnet1 page) and all of the associated CSS for it and embed a new one.  Then let me take a look at it.

jason,
  I am using IE 8/9.  Hardly any of the code was written by hand. DreamWeaver 5.5 was how  all of this was developed. I will do as you suggest, that is remove all traces of the menu bar and start fresh.

Russ
jason,
All old code relating to spry menu deleted - including css. Reinserted menu, made no adjustments except for positioning at bottom of banner <div>. Uploaded it. I can see where the sub menu is underneath the main <div>. How do I make the menu always on top, but minimize when not hovered over?

www.automatedanswers.com/telnet1

Thank you,

Russ
All,
It appears to work correctly outside of Dw, at least w/ IE9. I'm going to adjust color / height / font style.
Seeing if I can debug where it went .

Russ
ASKER CERTIFIED SOLUTION
Avatar of Russ Cummings
Russ Cummings
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
as its your question go to jasons comment and you will see a box for giving jason the points inside that comment
To accept your own post and give me an assist you would click Accept and Award Points in your own post.  You will the get an option to give me a share of the points.

I'm fine with or without points, though.  I have plenty.  
One last minor point, when I access the menu, there is a 1 or 2 px height difference between the menu bar (at the end "Contact Us") and the banner underneath it. I've tried to alter both the menu height to make it less and when that didn't work, make the banner taller. That didn't work either. Then I tried making the width of the menu bar as long as the banner <div>, no luck.
What exactly do I adjust to manage this fine alteration?
again my page is www.automatedanswers.com/telnet1
Thank you,
Russ
I'm on the iPad for the next few hours, but I'll take a look at this later tonight.  
Are you talking about the variable gap between the menu bar and the word "Home" below it?
I have seen that and its was down to a ie conflict
try it with firefox or chrome
I did have a warning in dw though saying that
No, this is after you hover over any submenu, then look to the "Contact Us" menu choice, there is a difference of just 1 - 2 px. The menu option is just that much higher. Maybe I'm just picky, but the client will notice as well.

Russ
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.