Beginner Beginner - 1 year ago 48
CSS Question

how to get page to stop vertical scroll?

I have a really annoying issue. Im trying to create a page with a full background image which resizes and fills the browser screen. Currently its half working but for some reason have to scroll like 20-30px down. Which the user should not be able to do.

This is the page source:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/Content/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="/Scripts/backstretch.js" type="text/javascript"></script>

<script type="text/javascript">

/** var images = [

"/content/images/bghome.jpg",

"/content/images/background.jpg"

];

var index = 0;
$.backstretch(images[index], { speed: 500 });

setInterval(function () {

index = (index >= images.length - 1) ? 0 : index + 1;

$.backstretch(images[index]);

}, 5000);
**/
$.backstretch("/content/images/background.jpg");
</script>
</head>
<div class="menu-link">

<ul>

<li>
<a href="/Home/Index">home</a>
</li>
<li>
<a href="/content/1/10/background.html">profile</a>
</li>
<li>
<a href="/content/1/3/portfolio.html">portfolio</a>
</li>
<li>
<a href="/news/">news</a>
</li>
<li>
<a href="/project/">current projects</a>
</li>
<li class="on">
<a href="/content/1/6/awards.html">awards</a>
</li>
<li>
<a href="/ContactUs/">contact</a>

</li>

</ul> </div>

<div id="left-sidebar">

<div id ="logo">

<image src="/content/images/logo.png"/>
</div>
<div id = "leftcontent">
<p>
</p>
</div>
<div id ="foot">
<ul>
<li>
<a href="/content/2/20/privacy.html">Privacy</a>
</li>
<li>
<a href="/content/2/21/sitemap.html">Sitemap</a>
</li>
<li class="last">
<a href="/content/2/19/terms---conditions.html">Terms & Conditions</a>
</li>
</ul>
© 2012 SH Structures. All rights reserved. &nbsp;&nbsp;&nbsp;<image src="/content/images/footimg.png"/>
</div>
</div>
<div id="right-sidebar">
</div>
<div id="content">
<div id = "freestylecontent">
<h1>awards</h1>
<br><br><br>
<div id = "freecontent">
<p>
</p>
<br><br>
</div>
</div>
</div>
</html>


Css:

html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}

body {

}

/* IE7 Fix */
* html #container {
display: table;
height: 100%
}

/* Opera Fix */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}

/* IE6 Fix */
* html div#body {
overflow: visible;
}

div#container {
height: 100%;
height: auto !important;

background: url("left-sidebar-back.gif") repeat-y top left;
}

div#main {
overflow: auto;
padding-bottom: 100px;
}

div#header {
height: 100px;
background: #ba6f19;
border-bottom: 1px solid #000;
padding: 20px;
}

div#body {
overflow: hidden;
height: 100%;
}

div#content {
margin: 0px 0px 0px 415px;
width: 375px;
padding: 20px;
background:url(../images/greenfade.png);
opacity:0.8;
height:100%;
color:White;
}

div#left-sidebar {
width: 375px;
float: left;
height:100%;
padding: 20px;
background:black;
opacity:0.8;
color:White;
}

div#right-sidebar {
width: 260px;
float: right;
padding: 20px;
}

div#footer {
background: #ba6f19;
border-top: 1px solid #000;

position: relative;
height: 100px;
margin-top: -101px;
clear: both;
}

div#footer p {
padding: 20px;
margin: 0px;
}
.menu-link{
font-size:1em;
height:40px;
padding-left:10px;
width:100%;
margin-left:auto;
margin-right:auto;
background:black;

}

.menu-link a{
padding: 10px 0px 10px 0px;
height:40px;
color:#fff;
text-decoration:none;
float:left;
}

.menu-link ul {
padding:0px 0px 0px 20px;
}

.menu-link ul li
{
text-decoration:none;
float:left;
/**background: url(/Content/img/border-line-inside.png) no-repeat right;**/
}

.menu-link ul li a {
color:#fff;
padding: 0px 10px 0px 10px;
line-height:40px;
display: block;
text-align:center;
}

.menu-link a:hover{
background:url(../images/menu-nav-hov.png) repeat-x;
cursor:pointer;
}

.menu-link ul li.on {
background:url(../images/menu-nav-hov.png) repeat-x;
/** background-position:center bottom;
background-repeat:no-repeat;
**/
}

/** Side Menu **/

.sideMenu ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;
}

.sideMenu ul
{
padding: 15px 0px 0px 0px;
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;
margin-left:-10px;
}

.sideMenu ul a{
padding: 2px 20px 0px 0px;
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}

.sideMenu li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}

.sideMenu li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer;
padding-left:-15px;
}

.sideMenu h4{
display:none;
}

/** Footer **/

#foot
{
padding-left: 20px;
padding-right: 20px;
position:absolute;
bottom:0;
height:60px;
height:1.5em;
font-size:.8em;
}

#foot li a
{
padding: 10px 0px 10px 0px;
color:#fff;
text-decoration:none;
}


Am i missing something obvious? thanks

Answer Source

It's hard to tell exactly what you're asking, but if all you want to do is disable scrolling the page, you first need to add a <body> tag and give it the following style properties:

<body style="overflow:hidden;">
    <!-- Page contents -->
</body>