Use margins or absolute positioning?

What exactly is happening here, and how do you fix it? I just made this code, I put it into blogger and it’s not working properly. Does anyone know what the issue is that is causing that to occur?

https://debugplaybutton.blogspot.com/

Before Click:

After Click

<style>


  .playButton {
    width: 266px;
    height: 174px;
  }
  
  .initial {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton.playing {
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: #000000;
    margin: -112px 0 0 108px;
    fill: #aaff00;
    box-Shadow: inset 0 0 0 3px #;
  }
  
  .scrl div {
    margin: 0 0 12px 0;
  }
  
  .scrl a {
    display: block;
    width: 50px;
    height: 50px;
    margin: -50px 0 0;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  .scrl a:visited {
    box-Shadow: inset 0 0 0 3px red;
  }
  
  a.x1 {
    margin: 0;
  }
  
  a.x2 {
    margin-left: 54px;
  }
  
  a.x3 {
    margin-left: 108px;
  }
  
  a.x4 {
    margin-left: 162px;
  }
  
  a.x5 {
    margin-left: 216px;
  }
  
  .hide {
    display: none;
  }
  
  .scrl div:last-child {
    margin-bottom: 0;
  }

</style>


<div class="myLinkDiv">
  <div class="scrl">
    <div>
      <a class="x1" href="#" target="_blank"></a>
      <a class="x2" href="#" target="_blank"></a>
      <a class="x3" href="#" target="_blank"></a>
      <a class="x4" href="#" target="_blank"></a>
      <a class="x5" href="#" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="#" target="_blank"></a>
      <a class="x2" href="#" target="_blank"></a>

      <a class="x4" href="#" target="_blank"></a>
      <a class="x5" href="#" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="#" target="_blank"></a>
      <a class="x2" href="#" target="_blank"></a>
      <a class="x3" href="#" target="_blank"></a>
      <a class="x4" href="#" target="_blank"></a>
      <a class="x5" href="#" target="_blank"></a>
    </div>
  </div>
</div>

<div class="playButton">

  <div class="initial ">Links</div>

  <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="play hide " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
</div>

<audio id="player" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
  </source>
</audio>

<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLinkDiv").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLinkDiv").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      document.querySelector('.playButton .initial').style.display = 'none';
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton .play").style.display = "none";
        document.querySelector(".playButton .pause").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton .play").style.display = "inline-block";
        document.querySelector(".playButton .pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

The issue is because you haven’t listened to a single thing I’ve said about your negative margin approach and are still using a non-viable approach that only causes you more pain the deeper you get into this. I gave you a much simpler answer a 100 posts ago but you ignored it.

The negative top margin you are applying to your play button is reducing the height of the red div and thus no longer is tall enough for its content. You should be absolutely placing that play button into position which I think I pointed out 500 posts ago.

You can fix your current issue with another hacky approach by increasing the bottom positive margin as you increase the negative margin in order to maintain a consistent height.

e.g.

.playButton.playing {margin:-112px 0 60px 108px}

Specifically the bottom margin will push the container back down enough to make the red color encompass the content. This is magic numbers at its worst and unnecessary if you had followed my previous advice

If you don’t listen and continue with the wrong approach each time there there is no hope I’m afraid :slight_smile:

(Did I just say that out loud?)

3 Likes

That didn’t work.

margin:-112px 0 60px 108px
https://testing45435.blogspot.com/

ok. let me try that.

Yes it did. It absolutely does work!!! You just have not implemented it correctly (you seem to have just removed the margin altogether).

1 Like

I thought you meant, use this?

 position: absolute;
    top: 0;
    left: 0;
    width:px;
    height: px;

no???

How many times have I told you that you need a stacking content in order to absolutely place something properly (e.g. you need position:relative on a common parent.).

Just use the margin hack I gave you or we will be here all day :slight_smile:

https://testing45435.blogspot.com/

You’re off by a few numbers.

Then adjust the bottom margin to suit. I don’t care about odd pixels :slight_smile:

Got it:
margin:-112px 0 62px 108px;

So the only way to do that is using margin then.

No the correct way would be to contain both the div and the playbutton in a parent that has position:relative set and then absolutely place the button to the middle of those blocks. You’ve done this numerous times already in other threads and with other buttons.

Negative margins don’t just move things they drag other things with them that you may not notice until you want to do something else (such as when you tried to add a background). As usual with CSS you have to understand why things work and when best to use them and then you can decide the best approach. Just beccause things appear to work or get the job done doesn’t mean its the right approach.

Generally when you want something smaller on top of something bigger then absolutely place it into position because the flow of the document is already controlled by the larger object.

2 Likes

Shouldn’t the text be below, not on top?

.playButton is set at 50px high and yet inside it you have placed .initial which is 168px high. As far as I remember from advanced mathematics 168px will not fit inside 50px.

Your text therefore sits below the 50px mark and the overflowing .initial div is ignored.

Unfortunately I have to go and watch some paint dry to keep my brain alive so I will be back tomorrow now :slight_smile:

3 Likes

Relative fixed that.

 .playButton {
    position:relative;
    width: 50px;
    height: 50px;
  }

Now I will try this as you suggested.

Relative didn’t fix that, my bad.

Initial is the cover picture. Playbutton is what’s inside it???

Why is that wrong?

Next is this if I can figure it out:

contain both the div and the playbutton in a parent

<style>


  .playButton {
    position: relative;
    width: 50px;
    height: 50px;
  }
  
  .initial {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton.playing {
    position: absolute;
    top: 70px;
    left: 116px;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: #000000;
    fill: #aaff00;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  .link div {
    margin: 0 0 12px 0;
  }
  
  .link a {
    display: block;
    width: 50px;
    height: 50px;
    margin: -50px 0 0;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  a.x1 {
    margin: 0;
  }
  
  a.x2 {
    margin-left: 54px;
  }
  
  a.x3 {
    margin-left: 108px;
  }
  
  a.x4 {
    margin-left: 162px;
  }
  
  a.x5 {
    margin-left: 216px;
  }
  
  .hide {
    display: none;
  }
  
  .link div:last-child {
    margin-bottom: 0;
  }

</style>



<div class="myLink">
  <div class="link">
    <div>
      <a class="x1" href="#" target="_blank"></a>
      <a class="x2" href="#" target="_blank"></a>
      <a class="x3" href="#" target="_blank"></a>
      <a class="x4" href="#" target="_blank"></a>
      <a class="x5" href="#" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="#" target="_blank"></a>
      <a class="x2" href="#" target="_blank"></a>

      <a class="x4" href="#" target="_blank"></a>
      <a class="x5" href="#" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="#" target="_blank"></a>
      <a class="x2" href="#" target="_blank"></a>
      <a class="x3" href="#" target="_blank"></a>
      <a class="x4" href="#" target="_blank"></a>
      <a class="x5" href="#" target="_blank"></a>
    </div>
  </div>
</div>

<div class="playButton">

  <div class="initial ">Links</div>

  <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="play hide " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
</div>

<audio id="player" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
  </source>
</audio>

<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      document.querySelector('.playButton .initial').style.display = 'none';
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton .play").style.display = "none";
        document.querySelector(".playButton .pause").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton .play").style.display = "inline-block";
        document.querySelector(".playButton .pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

The playButton is the inside. which is 50 x 50.

initial starts the player, which is the cover.

No this is your html:

<div class="playButton playing">

  <div class="initial ">Links</div>
  etc..
 
</div>

.initial is clearly inside playButton.

Remove the height from playbutton and test again to see the difference. No more clues as I am offline now.

1 Like