javascript - When website content overflows, Cant scroll up? -
not else say, other code. cant scroll when resolution small enough, stuff overflows, , cant view stuff. although can scroll down
i used javascript allot because game. way extensive post if want tell me
html
<html> <head> </head> <body> <canvas id="canvas">you're browser not support canvas tag. go , real browser, nub</canvas> <div id="redselector"> <div class="genericbutton" id="zombiered">zombie</div> <div class="genericbutton" id="skeletonred">skeleton</div> <div class="genericbutton" id="creeperred">creeper</div> <div class="genericbutton" id="spideblue">spider</div> </div> <div id="blueselector"> <div class="genericbutton" id="zombieblue">zombie</div> <div class="genericbutton" id="skeletonblue">skeleton</div> <div class="genericbutton" id="creeperblue">creeper</div> <div class="genericbutton" id="spiderblue">spider</div> </div> <div id="options"> <div class="linecontainer"> <div class="heading" id="options-heading">insert title here</div> </div> <div class="linecontainer"> <div class="text" id="options-info">welcome insert title here. game strategic game scaled up<br> rock paper scissors concept. beat you're opponent, must select certain<br> mobs against you're opponents mobs. can make combinations<br> of mobs destroy you're opponents base must take consideration <br> prices. better mobs require more money , take more population.</div> </div> <div class="linecontainer"> <div id="restart" class="options-button">restart</div> <div id="exit" class="options-button">exit</div> <div id="play" class="options-button">play</div> </div> <div class="linecontainer"> <div id="credits" class="options-button">credits</div> <div id="support" class="options-button">contact</div> <div id="controls" class="options-button">controls</div> </div> <div class="linecontainer"> <div id="creditsinfo" class="options-tab">made entirely _____ ____</div> <div id="supportinfo" class = "options-tab">please tell me think , how improve. (link)</div> <div id="controlsinfo" class="options-tab">a-d move player 1 scrollbar. j-l move player 2 scrollbar. hover on mob see stats. press o pause.</div> </div> </div> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="main.css"> <script src="jquery.js"></script> <script src="rectangle.js"></script> <script src="main.js"></script> </body> css
html { overflow: -moz-scrollbars-horizontal; overflow-x: scroll; -webkit-user-select: none; -moz-user-select: none; } html, body { width: 100%; height: 100%; margin: 0px; background-color: rgb(50, 50, 50); } #options-info{ display: inline-block; background-color: rgb(255, 153, 0); border: 2px solid black; padding: 5px 5px; margin: 5px; } #redselector{ position: absolute; top: 0px; left: 0px; width: 0px auto; height: 100px; background-color: red; margin: 0px auto; border: 2px solid black } #blueselector{ position: absolute; top: 0px ; left: 0px; width: 0px auto; height: 100px; background-color: blue; margin: 0px auto; border: 2px solid black; } .genericbutton{ position: relative; display: inline-block; background-color: green; width: 50; height: 75; margin: 10; border: 2px solid black } #canvas{ border: 10px solid black; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: rgb(100, 100, 100); } #options{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 80%; height: 650px; border: 10px solid black; background-color: rgb(200, 200, 200); margin: auto; text-align: center; } .options-button { display: inline-block; padding: 25px 25px; font-size: 30px; background-color: rgb(255, 153, 0); margin: 5px; width: 100px; cursor: pointer; border: 2px solid black; } .options-tab{ display: none; padding: 15px 15px; font-size: 20px; width: 200px; border: 2px solid black; margin: 5px; background-color: rgb(0, 153, 255) } .options-button:hover { background-color: rgb(155, 103, 0) } .options-button:active{ position: relative; top: 1; } .heading{ font-size: 75px; display: inline-block; padding: 25px 25px; background-color: rgb(255, 153, 0); margin: 5px; border: 2px solid black; } .linecontainer{ }
you have positioned elements using absolute. fix main container has id of "options" , contains options buttons.
change: #options { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 80%; height: 650px; border: 10px solid black; background-color: rgb(200, 200, 200); margin: auto; text-align: center; }
to: #options { position: relative; width: 80%; height: 650px; border: 10px solid black; background-color: rgb(200, 200, 200); margin: 0 auto; text-align: center; }
i recommend change height property of #options auto size of container expands.
you need change way other elements positioned stop overlapping.
Comments
Post a Comment