CODEWITHSUNDEEP
htmlcsspositioning
Bartolinek
Bartolinek

Reputation: 1

Trouble with html code positioning div how to position it as i described it

trouble with a code I am still begginer ant tried to make some 'game' for fun but it looked like that first later i tried to add another div on that brown thing with a css code like that

#energy_and_coins {
    margin: 0 auto;
    margin-top: 1%;
    height: 60px;
    width: 60px;
    border: solid 3px black;
}

and website bugged and looked like that that border is that div, i wanted to have it on the middle of the website and the brown thing still on the left but it jumped to the right and that di isn't even on the center how to fix it? full code looks like that

<!DOCTYPE html>
<html lang="PL-pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="images/thunder_icon.png" type="image/x-icon">
    <link rel="stylesheet" href="styles/style.css">

</head>

<body>
    <div id="energy_and_coins">

    </div>
    <div id="upgrade_panel">
        <div id="current_stats">

        </div>


        
        <div id="upgrades_list">
            
        </div>
    </div>
    <div class="center-container">
        <button style="background: url(images/main_click.png)" onclick="GainPower()" class="blinking-btn"></button>
    </div>



    <script src="script.js"></script>
</body>
</html>

body {cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAoVJREFUWEel1z/oV1UYBvCPZQUplbaIOmhDkxBECQ1uopQaOISLEjkYldAgYtRkDYmIghgOTaIogkO6GOIYoRhaDkIQ0WCghUMZqJQWDxzjy8/fvefc+33X+5z3fc777zx3jn6bg5U4jhcq2H/xLTbh1wr2/88J0GdzsQ8fNjr8B28Xwk1HagSexFd4vckbd/Eavm/EqxF4ClfxYqPDlGA17jTiqwSeLfWc1+hwJw7gfiO+SuAlXEQyUbO/sGpI+uOwVoKNOIknatFxDpvxewO2eQp2YA8yDTX7CPvxdw04+b2WgS/wLh6vOL2BLTg/JHhLCb7GmoZSXcGujgWUBXULv81Gri8Dj+EHrGi41R/4BQ9mwYbAT9iNazO/9xFYjG+wvIFADXKvNOipIQReLVswRKa13Dw9cnkIgYzgl3h+yuhZz3tLCR4pUV8JtuNzzJ+CQOqfPlrf9UL2EUjw7IGWJdTFMbV/Bye6AH0EDuIDZBrG2umiD0JkVusjkCc4GVjUsQeS3kzI0x2+M/cbcAnBDiaQA8uwoONsSpPUdimlrPBPa09zbRX3pT4L6iyWzgKKIIkyipbotWkIZK7TJ8/NiBAx8lmZoFr86nPc5+ChVpx8KVPrC8gOuVmN3vDIdPl4Bkfx5gxAuj2qON3fZGNLkPofQxTTpB3Be7XGmzwwlsAbJQMLJ5xFE6xtabxpCUScvF8a8KGviNCMXHZ+dn+zjclAlHKk19aJKN+V5/bH5sgFOIbAEpzBy8XHbXyMQ0ODBz+GQBowN45Uz9hFtKxDiAy2oQTyMEV6p9tjf+KtIskHBx+TgTTgJ0Vc5Pzh8uM6SIpPMwXJ2CtlBK9jG34edfVy6D9c7W8hrYLr7gAAAABJRU5ErkJggg==) 0 0, default;
    margin: 0;
    display: flex;
    height: 100vh;
    width: 186vh;
}

button {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAaxJREFUWEfFlj1LA0EQhp8xMaMWERsRtRBsBIUgfv3/zg8QURBsrLRQERQLHfxYOUiCJHe7s5cLXnuzs8+88+7uCPFPgEMLHCfihr9VWAfuvfHFBrGvbYFPb7JBnAqpvMOUqcCOBSwHQIVd4MK7JgWgFvjwJiviVFgA3r1rUgCLFnjxJusDtIFv75oUQM+CX85c+QvIKIAFgreSfvXLwFPOmqYBOpB3apoGSLV0TJymAbZL5C/a+Aw8lrUmBjBjwe/mVN9VKOCuR+NiAKsW/FdqCqBv0rH9YgAHFjj1JPbEqLAHnLsVyD2CKQgVWsDPvwDEXsjKFjSpQOx1nDqACnNQ/aJOFUCFI+AMqq/01M21ASxVGGzWAicx83me5hRALP+OBa6qAlToAZep01EbIGVS71g2FQAVVoCHVPXJeSCSoGuB14j87sLcgSObVfbfY7y/uWoBVPXfa7xJAVoW+CqTX4V5yJui6yhQOimrsAXceIw3qQJrFrgb3ch77NyvYaSSMQOq0AXecquvcwxLx7S61dcBGDOgCtmj+CQeKEy7PxjVVNgEbutIP1jzC8SEeyEVBqUUAAAAAElFTkSuQmCC) 0 0, default;
}

.blinking-btn {
    width: 356px;
    height: 356px;
    background-size: cover;
    border: solid 2px black;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.center-container {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: auto;
}



#energy_and_coins {
    margin: 0 auto;
    margin-top: 1%;
    height: 60px;
    width: 60px;
    border: solid 3px black;
}

#upgrade_panel {
    margin-top: 5%;
    width: 32%;
    height: 90%;
    border-top: solid 3px black;
    border-right: solid 3px black;
    background-color:  #b7760e;
}

#current_stats {
    margin: 5%;
    height: 80px;
    border: solid 1px black;
    background-color: #754904;
    box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0.5);
}

#upgrades_list {
    height: 75%;
    border:  solid 2px black;
    border-radius: 5%;
    margin: 10%;
}



I was expecting that the

'''
#energy_and_coins {
margin: 0 auto;
margin-top: 1%;
height: 60px;
width: 60px;
border: solid 3px black;
}
'''

div would be on center and top of the website and the brown thing would be to the left as in the first img

Upvotes: 0

Views: 29

Answers (1)

Melissa Silva
Melissa Silva

Reputation: 1

In the html try placing the div#energy_and_coins inside the div#upgrades_list like this:

<div id="upgrade_panel">
    <div id="current_stats"></div>
    <div id="upgrades_list">
      <div id="energy_and_coins"></div>
    </div>
</div>

In the css in the #upgrade_list put display:flex and align-items:center like this:

#upgrades_list {
    height: 75%;
    border:  solid 2px black;
    border-radius: 5%;
    margin: 10%;
    display: flex;
    align-items: center;
}

I hope this helps!

Upvotes: 0

Related Questions