Skip navigation
Ashstyx1
Currently Being Moderated

Spry Menu Help

Apr 18, 2013 4:07 AM

Tags: #spry #menu #bar

Ok i have a spry menu above my header image with the zindex at 1 so it apears above the header image, now to be able to position the spry menu bar it has to be absolute (im think) anyway when my website is resized or zoomed in or out the spry menu dosnt move with the site it moves away from its position, ive tried using the fixed position but this does not help.

 

The header and the whole site performs correctly when zoomed in and out its just the spry menu bar that dosnt go where i want it, i want the bottom of the tabs to stay at the bottom of the header so it sits on it.

 

http://sargent-design.co.uk/Glensite2/

 

HTML:

 

<div class="header"><img src="images/header.jpg" width="100%" height="148" />

   <ul id="MenuBar1" class="MenuBarHorizontal">

     <li><a href="index.html">Home</a>      </li>

     <li><a href="portfolio.html">Portfolio</a></li>

     <li><a href="about.html">About</a>      </li>

     <li><a href="contact.html">Contact</a></li>

   </ul>

</div>

 

CSS:

 

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */

ul.MenuBarHorizontal

{

          margin: 0;

          list-style-type: none;

          font-size: 100%;

          cursor: default;

          width: 100%;

          position: absolute;

          top: 9%;

          z-index: 6;

          left: 20%;

          float: left;

          overflow: hidden;

          height: 8%;

          padding: 0;

}

/* 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: 20px;

          position: relative;

          cursor: pointer;

          width: 10%;

          float: left;

          height: 50%;

          margin-top: 0;

          margin-right: 0;

          margin-bottom: 0;

          margin-left: 4%;

          font-family: Capita-Light;

          background-image: url(../images/button1.jpg);

          display: block;

}

 

 

 

 

/* Menu item containers are same fixed width as parent */

ul.MenuBarHorizontal ul li

{

          width: 8.2em;

}

 

 

 

 

 

 

/********************************************************************* **********

 

 

DESIGN INFORMATION: describes color scheme, borders, fonts

 

 

********************************************************************* **********/

 

 

 

 

/* Menu items are a light gray block with padding and no text decoration */

ul.MenuBarHorizontal a

{

          display: block;

          cursor: pointer;

          color: #b7b8b8;

          text-decoration: none;

          padding-top: 0.5em;

          padding-right: 0.75em;

          padding-bottom: 0.5em;

          padding-left: 0.75em;

          width: 75px;

}

/* Menu items that have mouse over or focus */

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

{

          color: #007dd5;

          font-family: Capita-Light;

          display: block;

          width: 9em;

          position: relative;

}

 

 

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

{

          color: #007dd5;

}

 

any more info needed let me know.

 
Replies
  • Currently Being Moderated
    Apr 18, 2013 5:02 AM   in reply to Ashstyx1

    Sorry to say this, but as you are discovering, the use of absolutely positioned divs is not a suitable layout method for a page.

    Please see: http://www.apptools.com/examples/pagelayout101.php for an explanation.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 24, 2013 2:52 PM   in reply to Ashstyx1

    Personal experience: EVERY TIME I've used a "positioned" element to hold a Spry element (menu, accordion, or tabbed panel), it's screwed it all up.

     

    Place it in a DIV using margins and padding to set position, not a "position" declaration in the styling. I try to keep menus outside of my header whenever possible, and since about last summer I don't use Spry for menus since I learned that they are no longer supported by Adobe. I use Dynamic Drive's "Smoothmenu" instead.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 24, 2013 3:31 PM   in reply to Ashstyx1

    Positioning removes content from the normal document flow.  If not used expertly & with necessary precautions, this is what you can expect.  A menu joy-riding off in la-la land with no respect for adjacent elements. Neither fixed nor absolute are going to cure this.

     

    To illustrate my point, copy & paste this code into a new, blank HTML document.  This drop-menu is pure CSS (no Spry).

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Document</title>
    
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />
    
    <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }
    
    body {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    width: 900px;
    margin: 0 auto;
    padding: 0;
    background: #099;
    }
    
    header {
    margin: 0;
    padding: 0;
    background: #FFF;
    }
    
    /* BEGIN HORIZONTAL DROP-MENU */
    nav {
    position: relative;
    width: 900px; /**adjust width as needed**/
    margin: 0 auto; /**with width, this block is centered**/
    padding: 0;
    text-align: center;
    background: #EAE;
    }
    
    nav ul {
    margin: 0;
    padding: 0
    }
    
    nav li {
    list-style: none;
    font-size: 14px;
    float: left;
    text-align: center;
    }
    
    /**top level menu**/
    nav li a {
    display: block;
    text-decoration: none;
    /* adjust width as needed or use auto */
    width: 9em; /*same as sub-menus*/
    /*space between links*/
    margin: 0 3.5em 0 3.5em;
    padding: 8px;
    font-weight: bold;
    line-height: 1.50em;
    border: 1px dotted #666;
    border-top: none;
    color: #FFF;
    background: #2CC7CF;
    text-shadow: 1px 2px 4px #666;
    }
    
    /**top menu style on mouse over**/
    nav li:hover > a { background: #333; }
    
    /**sub-menu**/
    nav li ul {
    display: none;
    text-align: center;
    margin: 0;
    padding: 0;
    }
    
    /**sub-menu, help for older IE**/
    nav li:hover ul, nav li.hover ul {
    display: block;
    position: absolute;
    padding: 0;
    }
    
    nav li:hover li, nav li.hover li { float: none; }
    
    /**drop-menu style**/
    nav li:hover li a, nav li.hover li a {
    width: 9em; /* adjust width as needed or use auto */
    margin-top: 0;
    }
    
    /**drop-menu style on mouse over**/
    nav li li a:hover {
    background: #FFF;
    color: #000;
    }
    
    /* Clear floated elements at the end*/
    nav:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    /**END HORIZONTAL DROP-MENUS STYLES**/
    
     /**COLUMNS**/
    aside {
    float: left;
    width: 50%;
    background: #FFF;
    }
    
    aside * { padding: 0 12px }
    aside:nth-child(odd) { background: #EAEAEA; }
    aside:nth-child(even) { background: #DADADA; }
    
    footer {
    clear: left;
    color: #FFF;
    font-size: small;
    font-weight: bold;
    text-align: right;
    padding-right: 25px;
    }
    
    /**text styles**/
    p {
    font-size: 1.em; margin-bottom: 2em; }
    </style>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <!--[if lt IE 8]>
    <style>
    nav li a {margin-right: 2.75em; margin-left:2.75em}
    aside #col-1 {background:#EAEAEA;}
    </style>
    <![endif]-->
    </head>
    
    <body>
    <header>
    <h1>Site Name</h1>
    <nav>
    <ul>
    <li><a href="#">ABOUT US &#9660;</a>
    <ul>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Newsletter</a></li>
    </ul>
    </li>
    <li><a href="#">PRODUCTS &#9660;</a>
    <ul>
    <li><a href="#">Broken Glass</a></li>
    <li><a href="#">Mosaic Tiles</a></li>
    <li><a href="#">Adhesives</a></li>
    <li><a href="#">Grout</a></li>
    </ul>
    </li>
    <li><a href="#">ACCESSORIES &#9660;</a>
    <ul>
    <li><a href="#">Gloves</a></li>
    <li><a href="#">Rubber Mallets</a></li>
    <li><a href="#">Sponges</a></li>
    <li><a href="#">Safety Glasses</a></li>
    </ul>
    </li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </nav>
    </header>
    <aside id="col-1">
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim. </p></aside>
    <aside>
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim. </p> </aside>
    <footer> 
    <address>Company address . Phone . Fax . E-mail </address> 
    <small>&copy; 2013 all rights reserved</small> 
    </footer>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2013 1:56 AM   in reply to Ashstyx1

    if Deamweaver does not support spry then why is it in the latest CS6?

    Dreamweaver CS6 - which uses Spry - was released in April 2012.

     

    Adobe's decision to drop Spry was announced in August 2012

    http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framew ork-availability.html

     

    Dreamweaver CS7 will likely use jQuery menus instead of Spry.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2013 11:55 AM   in reply to Ashstyx1

    my brother wants the menubar to be in the header not under it... so is there a way to make it the way he wants it?

    Sure.  Simply move  the <nav> section higher up in the HTML code.

     

    <body>

         <header>

              <nav>

              </nav>

         </header>

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points