htmlcoding3456 htmlcoding3456 - 1 year ago 31
HTML Question

About margin and trying to get the button on the red background

My Code:

1.) Am I supposed to have 2 different margins like this, and if not, how do I fix it?


2.) Also, I'm having trouble getting the button on the red background.


<div style="width:266px;" onclick="myObject=document.getElementById('myObj5h');'block';'none'">

<div style="width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000;
border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> </div></div>

<div id="myObj5h" style="display: none;">

<div style="width: 88px; height: 24px; cursor: pointer; background-color:blue; color:#000000;
border-left: 89px solid orange;border-right: 89px solid red;border-radius: 50px;">

<audio id="player" preload="none" style="display:none;">
<source src='' type='audio/mpeg'/></audio>

<button style="cursor: pointer;margin-left:-60px; background-color:transparent;padding-bottom:1px;padding-left:0px;padding-right:0px;" onclick="document.getElementById('player').play()">Play</button>

<button style="cursor: pointer; background-color:green;padding-bottom:1px;padding-left:0px;padding-right:0px;margin-left: 100px;" onclick="document.getElementById('player').pause()">Pause</button>

Answer Source

I updated A LOT of your code, so please check it out!

So what I did was I deleted the whole one big div box thing, and created three separate divs so that the placement of the buttons becomes infinitely easier. I then placed the buttons inside their corresponding divs, and aligned them to the center so everything looks neat.

Here is one 'box'

<div style = "width: 88px; height:24px; background-color:red;
      border-top-right-radius:50px;border-bottom-right-radius:50px; float:left; 

          <button style="cursor: pointer; background-color:green;" onclick="document.getElementById('player').pause()">Pause</button>


As you can see, I kept your radius and everything, I just split up that one messy div into 3 neat ones.

I also cleaned up your code, and spaced everything out nicely for anyone to understand. I suggest you do this in the future for yourself.

I hope everything came out how you wanted it!