Guber-X Posted July 21, 2012 Share Posted July 21, 2012 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: GuberX Web Dev & Des 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: /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ 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> Quote Link to comment Share on other sites More sharing options...
Mahngiel Posted July 21, 2012 Share Posted July 21, 2012 http://184.66.76.75/gxwd_v2/images/mobile/ You should turn indexing off. To make an element scroll within the page body, you need to set the height to a definitive amount and add overflow-y scroll to your CSS. There was so much else wrong with the code, I had to almost rewrite it just to check my work. http://i.imm.io/xkOv.png You do development/design work? Quote Link to comment Share on other sites More sharing options...
Guber-X Posted July 21, 2012 Author Share Posted July 21, 2012 lol, goes to show how up to date Dreamweaver CS6 is.... ive been noticing a lot of people using jsFiddle haha. and yes i do Development and Design work as a Freelancer. trying to keep up dated with all the new stuff . im thinking i might have to try a different approach with my site... specially with the "content_overlap" div Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.