Ofcdan Ofcdan - 3 months ago 8
HTML Question

Make text not move button (html)

Basically, I have a button, that when you press it, it shows a line of text. When the text shows up it moves the buttons a bit down. I want to keep the buttons right where they are, frozen. Any help is appreciated.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body background="img/bg.jpg">
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
<!-- Content -->

<style>
.btn {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
font: menu;
color: ButtonText;
display: inline-block;
height: 80px;
width:200px;
text-align: center;
vertical-align: middle;
font-size: 18px;
margin-left: 10px;
background: #2e8ac7;
color: #ffffff;
border-radius: 0px;
border: solid #1f628d 2px;
}
.div {
vertical-align: middle;
}
</style>
<br><br><br><br><br><br><br><br>
<div id="plate" class="div">
<center> <p>123456789</p> </center>
</div>
<!-- Side buttons -->
<a href="javascript:showhide('plate')"><button class="btn"> bbutton4 </button></a><br /> <br>
<button class="btn"> button1 </button><br /> <br>
<button class="btn">button2 </button><br /> <br>
<button class="btn"> button3 </button>


<body background="img/bg.jpg">
</body>
</html>

Answer

That's because you're using display: none which hides the entire div, pushing the below content above.

Use visibility: hidden and visibility: visible instead, which just hides the content within the div.

Here's a live example: https://plnkr.co/edit/egq7RzzLpBbWlcq8EbYv?p=preview