My webpage i am currently working on only has one main content div that is set to a fixed size. I would like to make it scrollable with the browser window scroll bar and not the “in div” scroll bar.
content div size is width: 1076px, height: 475px
basicly what I have done is I have a edge fading image in a floating div actually over my content div so if I were to use the scroll bar inside the div, I would not be able to select it or click on it because the of the floating div. So im looking for some help to get a scroll bar to work with my layout.
I have been trying to get this to work for my page, but I dont know how to go about doing this, especially with my layout. heres my test link to my page:
http://184.66.76.75/gxwd_v2/
So what I’m looking for is to use the main scroll bar from browser to scroll the “maincontent” div with its fixed size. so when content is larger than fixed size you can scroll the content down. With my layout, if i was to use the div scroll bar inside div. you can’t scroll because the div is not “active”. not only that, you can select that div because of my content_overlap div, it floats over the content box.
CSS File:
body {
background-color: #000000;
background-image: url(images/background.png);
background-repeat: no-repeat;
background-position: center;
margin: 0px auto;
padding: 0px;
color: #000000;
overflow: hidden;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 1076px;
height: 530px;
margin: 220px auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ This is the layout information. ~~ */
.menu {
width: 800px;
margin-left: 13%;
margin-right: 13%;
text-align: center;
}
.content {
padding: 0px 0px;
}
.content_overlap {
width: 1079px;
height: 504px;
background-image: url(images/fade.png);
background-position: top;
background-repeat: no-repeat;
position: absolute;
top: 252px;
left: 50%;
margin-left: -538px;
}
.maincontent {
position: relative;
top: 20px;
max-width: 1076px !important;
max-height: 460px !important;
overflow: auto;
padding: 0px 0px 0px 0px;
}
PHP file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GuberX Web Development & Design</title>
<link rel="stylesheet" type="text/css" href="oneColFixCtr.css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4s.css" />
<link rel="stylesheet" media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css">
<meta name="viewport" content="initial-scale=0.5">
</head>
<body>
<div class="container">
<div class="content">
<div class="menu"><img src="images/menu/home-1.png"><img src="images/menu/spacer.png"><img src="images/menu/portfolio-1.png"><img src="images/menu/spacer.png"><img src="images/menu/services-1.png"><img src="images/menu/spacer.png"><img src="images/menu/contact-1.png"></div>
<div class="maincontent">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
Test Possition of Text and whatnot5<br />
Test Possition of Text and whatnot6<br />
Test Possition of Text and whatnot7<br />
Test Possition of Text and whatnot8<br />
Test Possition of Text and whatnot9<br />
Test Possition of Text and whatnot10<br />
Test Possition of Text and whatnot11<br />
Test Possition of Text and whatnot12<br />
Test Possition of Text and whatnot13<br />
Test Possition of Text and whatnot14<br />
Test Possition of Text and whatnot15<br />
Test Possition of Text and whatnot16<br />
Test Possition of Text and whatnot17<br />
Test Possition of Text and whatnot18<br />
Test Possition of Text and whatnot19<br />
Test Possition of Text and whatnot20<br />
Test Possition of Text and whatnot21<br />
Test Possition of Text and whatnot22<br />
Test Possition of Text and whatnot23<br />
Test Possition of Text and whatnot24<br />
Test Possition of Text and whatnot25<br />
Test Possition of Text and whatnot26<br />
Test Possition of Text and whatnot27<br />
Test Possition of Text and whatnot28<br />
Test Possition of Text and whatnot29<br />
Test Possition of Text and whatnot30<br />
</div>
</div><!-- end .content -->
<div class="content_overlap"></div> <!-- This div has a background image that has fading edges for the content box --!>
</div><!-- end .container -->
</body>
</html>
The browser window scroll bar is “created” by the browser, so I don’t think you will be able to directly control where the scroll bar is or what part of your page it scrolls. Having said that, I think it is possible to get the effect you want by scrolling the whole page, but only making it appear as if a div is scrolling.
This can be done by creating a “window”, if you will, that the user “looks into the
divwith”. It’s difficult for me to explain the idea, so instead here is the code:HTML
CSS
jsFiddle DEMO
Judging from the link you provided, I think you might be able to incorporate the idea into your current layout. The downside to this though is that it relies on
position: fixedto get the effect you want. Basically, you can either scroll the whole page with the browser scroll bar, or you can scroll the div content with the div scroll bar.