Skip navigation
bw4415
Currently Being Moderated

Gap between header and spry menu + content div shifts when inserting menu

Feb 19, 2013 11:25 AM

Tags: #dreamweaver #cs6

I am new to dreamweaver and its driving me crazy. There is a gap between my header and the spry menu bar, also the content div shifts when i insert the menu. How can i fix this? Thank you!

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#outerWrapper {
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#contentWrapper {
width: 100%;
overflow: auto;
}
#header {
width: 100%;
}
#nav {
width: 100%;
background-color: #d59844;
margin-top: 0px;
}
#content {
width: 100%;
float: left;
}
#footer {
width: 100%;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>

<body>
<div id="outerWrapper">
  <div id="header"><img src="Images/Header short.jpg" width="1024" height="167" alt="header" ></div>
  <div id="nav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">About JA</a>
        <ul>
          <li><a href="#">What is JA</a></li>
          <li><a href="#">How we started</a></li>
          <li><a href="#">Our mission</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Info</a>      </li>
      <li><a href="#">Upcoming Events</a></li>
      <li><a href="#">Our supporters</a></li>
      <li><a href="#">Volunteers</a></li>
      <li><a href="#">Educators</a></li>
      <li><a href="#">Donate Now</a></li>
    </ul>
  </div>
  <div id="contentWrapper">
    <div id="content">content</div>
  </div>
  <div id="footer">footer</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

 
Replies
  • Currently Being Moderated
    Feb 19, 2013 11:36 AM   in reply to bw4415

    Since we can't see your Spry.css or Spry.js code, this is an incomplete picture of the problem. 

     

    Start with this:

     

    #content {

    width: 100%;

    float: left;  /**REMOVE THIS**/

    }

     

    Is there any way you can upload your test page & dependant files to a public web space you control (your remote server) and post the URL here?

     

    All HTML elements have default margins & padding.  You can zero out the CSS margins & padding on individual elements or use a separate CSS Reset to assist with this.

    http://cssresetr.com/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 11:52 AM   in reply to bw4415

    You might try clearing floats after the Spry menu.

     

    #content {

    clear:left;

    }

     

    Without a link, it's impossible to offer more advice.  Sorry.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 2:04 PM   in reply to bw4415

    Copy & paste this into a new, blank HTML document:

     

     

    <!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>
    <style type="text/css">
    /**SPRY MENU**/
    ul.MenuBarHorizontal {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    }
    ul.MenuBarActive { z-index: 1000; }
    ul.MenuBarHorizontal li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 12.5%;
    float: left;
    z-index: 1000;
    }
    ul.MenuBarHorizontal ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 100%;
    position: absolute;
    left: -1000em;
    }
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; }
    ul.MenuBarHorizontal ul li { width: 8.2em; }
    ul.MenuBarHorizontal ul ul {
    position: absolute;
    margin: 2;
    }
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
    left: auto;
    top: 0;
    }
    ul.MenuBarHorizontal ul { border: 0; }
    ul.MenuBarHorizontal a {
    display: block;
    cursor: pointer;
    background-color: #d59844;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    }
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
    background-color: #008751;
    color: #FFF;
    text-align: center;
    }
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
    background-color: #008751;
    color: #FFF;
    }
    ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }
    /* 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;
    }
    }
    
    /**LAYOUT**/
    body {
    width: 1024px;
    margin: 0 auto;
    padding: 0;
    background: #999;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 100%;
    }
    #wrapper { background: #FFF; }
    
    #header {
    margin: 0;
    padding: 0;
    }
    
    #nav {
    overflow: hidden; /**to contain floats in menu**/
    background-color: #d59844;
    margin: 0;
    padding: 0;
    }
    
    #content {
    margin: 0;
    padding: 0;
    }
    
    #footer {
    border-top: 3px solid #d59844;
    margin: 0;
    padding: 0;
    }
    
    /**TEXT STYLES**/
    h1, h2, h3, h4 {
    margin: 0;
    padding: 0 12px;
    }
    p {
    margin: 0;
    padding: 5px 12px;
    font-size: 14px
    }
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header"> <img src="Images/Header short.jpg" width="1024" height="167" alt="header" /> 
    <!--end header--> 
    </div>
    <div id="nav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">Home</a> </li>
    <li><a href="#" class="MenuBarItemSubmenu">About JA</a>
    <ul>
    <li><a href="#">What is JA</a></li>
    <li><a href="#">How we started</a></li>
    <li><a href="#">Our mission</a></li>
    </ul>
    </li>
    <li><a href="#">Contact Info</a> </li>
    <li><a href="#">Upcoming Events</a></li>
    <li><a href="#">Our supporters</a></li>
    <li><a href="#">Volunteers</a></li>
    <li><a href="#">Educators</a></li>
    <li><a href="#">Donate Now</a></li>
    </ul>
    <!--end nav--></div>
    <div id="content">
    <h3>Content</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> 
    <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> 
    <!--end content--></div>
    <div id="footer">
    <h3>footer</h3>
    <!--end footer--></div>
    <!--end wrapper--></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    
    

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Feb 25, 2013 10:23 PM   in reply to bw4415

    bw4415, on a sidenote, Spry has been deprecated and is no longer officially supported by Adobe. http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framew ork-availability.html

     

    You may want to consider moving to a jQuery menu.

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

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