Problem in Layout

**SumanMusique** · 08-13-2012 03:12 PM

Hi I am beginner in html and css coding, i have made a html page using css and jquery for scrolling images, the outer layout using 'div' in which other div resides, some how the footer or any other divs that I use after the scrolling image, bounces off from the main outer div.

Here is d Image:http://s10.postimage.org/wsvqksjeh/Untitled.png

Please Help

Please tell me how to fix this?

html code:

HTML Code:

<body> 

<div id="page">
    
    <div id="topbar"><h1>Scrolling Images</h1></div>
    
    <!--Menubar-->
  <div id="menubar">
    <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 3nnhgh</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>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </div>  
    <!--End of Menubar-->
    
    <!--topbar(holding)-->
    <div id="top">
      <div class="controller" id="right"></div>
      <div id="slider"> <img id="1" src="images/1.jpg" width="625" height="417" /> <img id="2" src="images/2.jpg" width="625" height="417" /> <img id="3" src="images/3.jpg" width="625" height="417" /> <img id="4" src="images/5.jpg" width="625" height="417" /> </div>
      <div class="controller" id="left"></div>
    </div>
    <!--End of Top bar-->
    
        
        <div id="offers">
  </div>
    
    
    <div id="footer">
    <h3></h3>
    </div>
    
</div>


<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>

css:

Code:

body {
    background-color: #e1e1e1;
    margin:0 auto;
    text-shadow:#666;
}
#right {
    background-image: url(images/rss.png);
        padding-right: 10px;
    padding-left: 10px;

}
#page {
    background-color: #CCC;
    margin:0 auto;
    width: 960px;
    
    
}

#inside{    background-color: #CCC;
width: 960px;
    
    }


#topbar{    margin:0 auto;
    width:900px;
    height:50px;
    background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(188,19,3,1) 47%, rgba(211,0,59,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(47%,rgba(188,19,3,1)), color-stop(100%,rgba(211,0,59,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(188,19,3,1) 47%,rgba(211,0,59,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(188,19,3,1) 47%,rgba(211,0,59,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(188,19,3,1) 47%,rgba(211,0,59,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(188,19,3,1) 47%,rgba(211,0,59,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#d3003b',GradientType=0 ); /* IE6-9 */

    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    box-shadow:3px 3px 7px #990033;
    padding-top:1px;
    padding-left:30px;
    padding-bottom:15px;
    }
    
    
#menubar{
            width:900px;
            height:17px;;
            margin:0 auto;
            margin-top:20px;
            padding-bottom:20px;
            border-radius:15px;
            padding-left:15px;
                background: rgb(191,210,85); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */

            box-shadow:#360 3px 3px 7px;
        

}

#top {
    overflow: auto;
    margin:30px auto;
    width:800px;
    
    border:1px #666 solid;
    border-radius:15px;
    box-shadow:#999 3px 3px 7px;
    
    
    
}


.controller {
    background-image: url(images/presscoders.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 417px;
    width: 52px;
    float: left;
    /* [disabled]padding:30px; */
}
#left {
    padding-right: 10px;
    padding-left: 10px;
    float:left;
}
#right    { padding-left:30px;float:left;    }

#slider {
    height: 417px;
    width: 625px;
    float: left;
    overflow: hidden;
}


body,td,th {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    color: #FFFFFF;
}

#footer{
    float:left;
    width:800px;
    height:50px;
    margin-top:30px;
    padding:30px;
    text-align:center;
    clear:both;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    border: 1px solid #999;
    border: inset 1.5px solid #333;
    color:#FFF;

}

**nap0leon** · 08-13-2012 06:25 PM

If "bounces off" means "big space between", the issue is that id=top has 30 pixels in margin-bottom and id=footer has 30 pixels in margin-top which creates a 60 pixel buffer between them.

I don't have any of the images that your page uses, so my local test looks drastically different... but to fix the issue as I described it:
in #top, change:
margin:30px auto;
to:
margin-top:30px;

in #footer remove:
margin-top:30px;

**SumanMusique** · 08-14-2012 01:11 AM

Thanks Mr.nap0leon
It Helped a bit, but I want that all the other divs should reside inside div id=page,

when I insert other divs inside div=page, it resides outside the div id=page,
i want all the other div to stay inside it..

Please Help..

**nap0leon** · 08-14-2012 07:32 AM

add overflow:auto to #page

Thread: Problem in Layout

Thread Tools

Display

Problem in Layout

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions