Jump to content

Need some help with html margins


The Mighty Goat
 Share

Recommended Posts

I have a bunch of buttons with words under each all beside each other across the page because they each have a div tag making them float to the left. I added a margin attribute thing (I don't know what's it called) with the div so the button weren't touching. I made it so when you click a button, it made is so the button and the words under it disappeared (style.display = "none").

 

The problem is that when it disappears, it still shows the margin for it, so every time you click a button and the ones to the right move left after it disappears, the left side of the next button isn't where the left side of the one clicked was. I am wondering is there is a way I can hide or take away its margin when it disappears. After you click more, there a big space between the button and the side of the screen. I am explaining this as good as I can. I can't easily show you what I mean.

Link to comment
Share on other sites

If you put the margin on the button itself instead of wrapping it in a div then the margin will disappear when the button does. Are the div tags really necessary?

Link to comment
Share on other sites

They are necessary because I need the words under each button to centered with their button. I don't think adding the div to all buttons and paragraphs would keep all words centered under their button. Will your suggestion still work?

Link to comment
Share on other sites

I'm not fully sure of your requirements. Seeing some code might help.

 

When the button disappears, does the text under the button disappear as well?

Link to comment
Share on other sites


This is part of a Cookie Clicker knock-off if you get confused about what I named one stuff.

I didn't put everything here because I'm only having a problem with the disappearing.


The div and two of the upgrade buttons


<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

float: left;

margin: 10px;

}

</style>

</head>

<body>


<center>


<div class="div1">

<button type="button" id="FarmOneButton" onClick="upgradeFarmOne()" onMouseOver="mouseFarmOne()" onMouseOut="upgradeInfoBack()">Better Fertilizer</button>

<p id="FarmOneCost">Cost: 10000</p>

<p id="FarmOneInfo">Farm CPS x 2</p></div>



<div class="div1">

<button type="button" id="DeliveryOneButton" onClick="upgradeDeliveryOne()" onMouseOver="mouseDeliveryOne()" onMouseOut="upgradeInfoBack()">Bigger Gas Tanks</button>

<p id="DeliveryOneCost">Cost: 62500</p>

<p id="DeliveryOneInfo">Delivery CPS x 2</p></div>





<script type="text/javascript">


The functions that allow buying each upgrade and then take away the button and the "paragraphs" under it.


function upgradeFarmOne() {

if (totalCabbages > 9999) {

totalCPS += farmCPS * cabbageFarms;

farmCPS += farmCPS;

totalCabbages -= 10000;

document.getElementById("TotalCabbages").innerHTML = totalCabbages;

document.getElementById("TotalCPS").innerHTML = totalCPS;

document.getElementById("FarmCPS").innerHTML = farmCPS;

document.getElementById("FarmOneButton").style.display = "none";

document.getElementById("FarmOneCost").style.display = "none";

document.getElementById("FarmOneInfo").style.display = "none";

}

}



function upgradeDeliveryOne() {

if (totalCabbages > 62499) {

totalCPS += deliveryCPS * cabDeliveries;

deliveryCPS += deliveryCPS;

totalCabbages -= 62500;

document.getElementById("TotalCabbages").innerHTML = totalCabbages;

document.getElementById("TotalCPS").innerHTML = totalCPS;

document.getElementById("DeliveryCPS").innerHTML = deliveryCPS;

document.getElementById("DeliveryOneButton").style.display = "none";

document.getElementById("DeliveryOneCost").style.display = "none";

document.getElementById("DeliveryOneInfo").style.display = "none";

}

}


</script>

</center>

</body>

</html>

Link to comment
Share on other sites

You could substitute these three lines:

document.getElementById("FarmOneButton").style.display = "none";
document.getElementById("FarmOneCost").style.display = "none";
document.getElementById("FarmOneInfo").style.display = "none";

For this:

document.getElementById("FarmOneButton").parentNode.style.display = "none";
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...