3 Replies Latest reply: Sep 26, 2012 2:36 PM by GS3333 RSS

    Divs are shifting after inserting spry menu bar

    GS3333 Community Member

      I have tried so much that it has driven me crazy. Initailly I created this site by APdivs and it came out perfect and worked great, except it was not fluid and looked bad on bigger browser and screen size. I decided to change it to fluid way. Now I am in bad shape as soon as I put a horizontal spry menu bar. it shifts the columns to the left and leaves a blank space next to the column 3. I am out of idea, how to fix it. As soon as I take the menu bar out, it works perfect. and columns are stretched to the end on both sides.

      Here is the link of test page

      www.hpbsurgery.net

       

      This is what I have tried-nothing worked

      put menu bar in container

      put menu bar in header div

      Put mebu bar in a horizontal div inside header div.

      changed the size and dimension of menu bar

      Any help would be greatly appreciated as I am running out of time.

      Thanks much all....

        • 1. Re: Divs are shifting after inserting spry menu bar
          osgood_ CommunityMVP

          I'm not see what you are describing...have you fixed it? If not what browser is this happening in?

          • 2. Re: Divs are shifting after inserting spry menu bar
            Nancy O. CommunityMVP

            You appear confused about how to use CSS classes and IDs.  Classes (.className) can be used multiple times in layouts as for re-usable styles.  IDs (#IDName) can be used only one time per page -- as for layout regions or when JavaScript is needed to act upon it.

             

            Try copying and pasting this code into a new blank page.  Hopefully it will make more sense than what you have now.

             

             

            <!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="http://www.hpbsurgery.net/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
            <script src="http://www.hpbsurgery.net/SpryMenuBar.js" type="text/javascript"></script>
            
            <!--NEW LAYOUT-->
            <style type="text/css">
            
            body {
            margin:0;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 16px;
            width:100%;
            min-width:400px;
            max-width: 1280px;
            background-color: silver;
            overflow:hidden; /*for float containment*/
            }
            
            #header {
            width: 100%;
            padding: 0px;
            background-color: pink;
            margin: 0px;
            }
            #horizontalmenu {
            min-height: 43px;
            width: 100%;
            overflow: hidden;
            margin: 0px;
            }
            #leftbar {
            background-color: aqua;
            float:left;
            width: 18%; /**combined width and padding = 22%**/
            padding:2%;
            }
            #middlebar {
            background-color: white;
            float:left;
            width: 52%; /**combined width and padding = 56%**/
            padding:2%;
            }
            #rightbar    {
            background-color: green;
            color:white;
            float:right;
            width: 18%; /**combined width and padding = 22%**/
            padding:2%;
            }
            #credential {
            clear:both;
            display:block;
            background-color: gold;
            width: 100%;
            padding:2%
            }
            #footer {
            background-color: maroon;
            width: 100%;
            color:white;
            padding:2%;
            }
            </style>
            </head>
            <body>
            <div id="header">
            #header
            <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>
            <!--END #HEADER--></div>
            
            <div id="leftbar">#leftbar</div>
            <div id="middlebar">#middlebar</div>
            <div id="rightbar">#rightbar</div>
            
            <div id="credential">#credential</div>
            <div id="footer">#footer</div>
            </body>
            </html>
            

             

             

            Nancy O.

            • 3. Re: Divs are shifting after inserting spry menu bar
              GS3333 Community Member
              Thanks very much for your help. I just wanted to mention one thing which I discovered this am by accident out of frustration. Originally, I was trying to control the size of the 3 columns with external CSS and it was messing up after inserting menu bar. I wrote directly in the code this am to exactly define the size besides in my CSS. AND............it fixed the problem and stretched the columns to the end on both side and sizes were appropriate, I am still not sure why did it happen. I am not a professional and trying to build my own site as I have interest in web design, but this is first time with DW. I really appreciate your help and suggestion about the code. Thanks a lot,

               

              Date: Wed, 26 Sep 2012 12:46:19 -0600 From: forums@adobe.com To: tonylove99@hotmail.com Subject: Divs are shifting after inserting spry menu bar

               

               

               

               

               

               

                                                         Re: Divs are shifting after inserting spry menu bar

               

               

                  created by Nancy O. in Dreamweaver General - View the full discussion

               

               

               

              You appear confused about how to use CSS classes and IDs.  Classes (.className) can be used multiple times in layouts as for re-usable styles.  IDs (#IDName) can be used only one time per page -- as for layout regions or when JavaScript is needed to act upon it.  Try copying and pasting this code into a new blank page.  Hopefully it will make more sense than what you have now. 






               

              <!NEW LAYOUT>

               

               

              body

               

              #header #horizontalmenu { min-height: 43px; width: 100%; overflow: hidden; margin: 0px; } #leftbar { background-color: aqua; float:left; width: 18%; /*combined width and padding = 22%*/ padding:2%; } #middlebar { background-color: white; float:left; width: 52%; /*combined width and padding = 56%*/ padding:2%; } #rightbar    { background-color: green; color:white; float:right; width: 18%; /*combined width and padding = 22%*/ padding:2%; } #credential #footer { background-color: maroon; width: 100%; color:white; padding:2%; }



              #header

              <!END #HEADER>

              #leftbar

              #middlebar

              #rightbar


              #credential

              #footer


                Nancy O.

               

               

                   Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/4729585#4729585      Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4729585#4729585      To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4729585#4729585. In the Actions box on the right, click the Stop Email Notifications link.            Start a new discussion in Dreamweaver General by email or at Adobe Community   For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.