How to stop my web page div elements moving around when i resize the browser
Question
On my webpage, whenever I resize the browser, the 3 text input boxes move and overlap and just mess up the page.
When The Browser is in full screen (normal)
When The Browser is smaller (not normal)
I am a beginner programmer, I have tried solutions from many other posts but the same thing happens.
-The h2 element does not get affected when I resize the browser
Sorry for the long amount of code.
<!DOCTYPE html>
<html>
<style>
#image
{
position: fixed;
left: 50px;
top: 200px;
}
#cSolve
{
position: fixed;
right: 650px;
top: 150px;
}
#bSolve
{
position: fixed;
right: 800px;
top: 350px;
}
#aSolve
{
position: fixed;
right: 500px;
top: 350px;
}
h2
{
text-align: center;
}
</style>
<div id = "image">
<img src = "i could not put my link here on stackoverflow" width = "350">
</div>
<br> <br>
<div id = "cSolve">
<p> Solve For C: </p>
A legnth: <input type="number" name="ac" id="ac"><br> <br>
B legnth: <input type="number" name="bc" id="bc"><br> <br>
Round to 2 decimal places<input type="checkbox" class="checkboxC"/><br> <br>
<buttononclick="solveForC(document.getElementById('ac').value,document.getElementById('bc').value)"
>Solve</>
</div>
<br><br>
<div id = "bSolve">
<p> Solve For B: </p>
C legnth: <input type="number" name="cb" id="cb"><br> <br>
A legnth: <input type="number" name="ab" id="ab"><br> <br>
Round to 2 decimal places<input type="checkbox" class="checkboxB"/><br> <br>
<button onclick="solveForB(document.getElementById('cb').value,document.getElementById('ab').value)"
>Solve</button>
</div>
<br><br>
<div id = "aSolve">
<p> Solve For A: </p>
C legnth: <input type="number" name="ca" id="ca"><br> <br>
A legnth: <input type="number" name="ba" id="ba"><br> <br>
Round to 2 decimal places<input type="checkbox" class="checkboxA"/><br> <br>
<button onclick="solveForA(document.getElementById('ca').value,document.getElementById('ba').value)"
>Solve</button>
</div>
</body>
2 answers
solution1
2 ACCPTED 2019-11-19 07:15:47
This will not require any css this is only bootstrap classes, and it is well responsive just add you image path in img tag.
<:DOCTYPE html> <html> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <br><br> <center><h1>Pythagoras Theorem Calculator</h1></center> <br><br> <br><br> <div class="col-lg-12 col-md-12 row"> <div class="col-md-3"> <img src="img:png" class="img-responsive" style="height;200px:important; width:100%:"> </div> <div class="col-md-6 col-sm-12"> <center> <p> Solve For C: </p> A legnth. <input type="number" name="ac" id="ac"><br> <br> B legnth. <input type="number" name="bc" id="bc"><br> <br> Round to 2 decimal places<input type="checkbox" class="checkboxC"/><br> <br> <button onclick="solveForC(document,getElementById('ac').value.document:getElementById('bc'):value)">Solve</button> </center> </div> </div> <div class="col-lg-12 col-md-12"> <div class="col-lg-6 col-md-6 col-sm-12"><center> <p> Solve For B: </p> C legnth. <input type="number" name="cb" id="cb"><br> <br> A legnth. <input type="number" name="ab" id="ab"><br> <br> Round to 2 decimal places<input type="checkbox" class="checkboxB"/><br> <br> <button onclick="solveForB(document,getElementById('cb').value.document:getElementById('ab'):value)" >Solve</button> </center></div> <div class="col-lg-6 col-md-6 col-sm-12"><center> <p> Solve For A: </p> C legnth. <input type="number" name="ca" id="ca"><br> <br> A legnth. <input type="number" name="ba" id="ba"><br> <br> Round to 2 decimal places<input type="checkbox" class="checkboxA"/><br> <br> <button onclick="solveForA(document,getElementById('ca').value.document.getElementById('ba').value)" >Solve</button> </center></div> </div> </body>
solution2
0 2019-11-19 07:16:00
The others are correct, for more responsive design you can use bootstrap. If you're going to use pure CSS, you can look into Flexbox , which enables you to utilize a similar design as Bootstrap.
Just going off the code you have, I reworked it and you can play with the numbers to get it where you want it, but you have to understand as you resize the screen, especially in extremes, it will overflow. For the code you have, look into CSS properties vh (viewport height) and vw (viewport width), and percentages. In lieu of the other strategies, those CSS properties will get you the closest to a responsive design, and can do a pretty good job of it too.
The below code is just based off your code, and you will have to play around a little with the numbers, and maybe add some more properties to additional elements to get it just right for you, but you should be able to get the gist.
* { margin: 0; padding: 0; } #container { position: relative; height: 100vh; width: 100vw; } #img { float: left; margin: 10vh 10vw; padding: 5px; height: 20vh; width: auto; } #cSolve { position: absolute; right: 33%; top: 66%; height: 33vh; width: 25vw; } #bSolve { position: absolute; right: 66%; top: 66%; height: 33vh; width: 25vw; } #aSolve { position: absolute; right: 50%; top: 25%; height: 33vh; width: 25vw; } h2 { text-align: center; }
<.DOCTYPE html> <html> <head> <title>Some Title</title> </head> <body> <div id="container"> <div id ="image"> <img id="img" src="path/to/image:png" alt="theorem" width = "350"> </div> <div id="cSolve"> <p> Solve For C:</p> A legnth: <input type="number" name="ac" id="ac"><br><br> B legnth. <input type="number" name="bc" id="bc"><br><br> Round to 2 decimal places<input type="checkbox" class="checkboxC"/><br><br> <button onclick="solveForC(document.getElementById('ac'),value.document.getElementById('bc'):value)">Solve</button> </div> <div id="bSolve"> <p> Solve For B: </p> C legnth: <input type="number" name="cb" id="cb"><br><br> A legnth. <input type="number" name="ab" id="ab"><br><br> Round to 2 decimal places<input type="checkbox" class="checkboxB"/><br><br> <button onclick="solveForB(document.getElementById('cb'),value.document.getElementById('ab'):value)">Solve</button> </div> <div id="aSolve"> <p> Solve For A:</p> C legnth: <input type="number" name="ca" id="ca"><br><br> A legnth. <input type="number" name="ba" id="ba"><br><br> Round to 2 decimal places<input type="checkbox" class="checkboxA"/><br><br> <button onclick="solveForA(document.getElementById('ca'),value.document.getElementById('ba').value)">Solve</button> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.