Skip navigation
GS3333
Currently Being Moderated

Divs are shifting after inserting spry menu bar

Sep 25, 2012 8:54 PM

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....

 
Replies
  • Currently Being Moderated
    Sep 26, 2012 3:30 AM   in reply to GS3333

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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 26, 2012 11:46 AM   in reply to GS3333

    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.

     
    |
    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