Adding both play/pause svg to style

HTML & CSS
1

How do you double them up?


<style>
{

  .svg play, pause {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 76px;
    left: 111px;
    
 
  }
</style>
 


   <svg class="play"  width="100" height="100" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path></svg>

<svg style="display: none;" class="pause" width="100" height="100" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="red"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M27.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C29,21.5,28.5,21,27.9,21zM40.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C42,21.5,41.5,21,40.9,21z" fill="blue"></path>
</svg>
2

This didn’t work.


<style>

 .button2 div{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 76px;
    left: 111px;
    
 
  }
</style>



    <div class="button2">
    <svg class="play"  width="100" height="100" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path></svg>

<svg style="display: none;" class="pause" width="100" height="100" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="red"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M27.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C29,21.5,28.5,21,27.9,21zM40.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C42,21.5,41.5,21,40.9,21z" fill="blue"></path>
</svg>    </div>
3

You don’t have a div inside there!!!

I;m guessing you meant this:

.button2{position:relative;}
.button2 .play,
.button2 .pause{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 76px;
    left: 111px;
}
4

Not like this?

Is that wrong what I did?

Is my way acceptable code or not?


<style>
    #playButton2 {
    position: relative;
    width: 260px;
    height: 115px;
    cursor: pointer;
    background-color: black;
    border: 3px solid #0059dd;
  }
  
   .button2 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 7px;
      left: 79.4px;
    }

  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 115px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
   }



</style>






<div id="playButton2" style="" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
document.querySelector('#playButton2 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
document.querySelector('#playButton2 .pause').style.display='none';
player.pause();
}">
  <div class="button2">
    <svg class="play" width="100" height="100" viewBox="-1 0 67 66">
      <path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
      <path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
      <path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path>
    </svg>

    <svg style="display: none;" class="pause" width="100" height="100" viewBox="-1 0 67 66">
      <path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="red"></path>
      <path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
      <path d="M27.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C29,21.5,28.5,21,27.9,21zM40.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C42,21.5,41.5,21,40.9,21z"
      fill="blue"></path>
    </svg>
  </div>


  <div id="grad"></div>


</div>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
5

Your way of coding is never acceptable but you know that by now :slight_smile:

If you mean whether #grad is correctly placed then yes it will be placed in the right place because you have added position:relative to the parent (.button2) as in my example. We went through stacking contexts in detail in your other thread so I will not repeat here.

4 Likes
6

well, not to my eyes. :unhappy:

The code is far too convoluted. :wonky:

Simple code is far easier to understand and maintain. :winky:

As you are using fixed dimensions there is no need to
use SVG at all, other than as an aid to the creation of
a final image, such as a gif, jpg or png. :biggrin:

Check out the attachment.

asasass-player-no-svg.zip (21.6 KB)

coothead

4 Likes
7

I was referring to:

.button2{
}

I have this

 #playButton2 {
    position: relative;
}

.button2 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 7px;
      left: 79.4px;
    }

You have all this:

.button2{position:relative;}
.button2 .play,
.button2 .pause{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 76px;
    left: 111px;
}
8

That was in response to your first question where you had this:

.svg play, pause {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 76px;
    left: 111px;
  
  }

You were trying to absolutely place the play and pause buttons so I showed you the correct way. If you only want to absolutely place one of the elements then omit that element from the rule. Take some time to think about what you are doing and it will all make sense :slight_smile: (no it won’t)

3 Likes
9

Hi there asasass,

it seems that you have not checked out my attachment
in post #6 and that you only put your trust in “jspiddle”. :rolleyes:

So to keep you happy, I will come down to your level. :eyebrows:

jspiddle.net page

You must have a browser or you wouldn’t be here. :wonky:

Do you ever use it to test the code that you compose? :winky:

coothead

10

Are you saying that, if I do it like this, I’m doing it wrong?

 #playButton2 {
    position: relative;
}

.button2 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 7px;
      left: 79.4px;
    }

And this is the correct way?

.button2{position:relative;}
.button2 .play,
.button2 .pause{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 76px;
    left: 111px;
}
11

I was copying how I did it with this these.

Am I doing it the wrong way?

<style>
  #playButton4 {
    position: relative;
    border: 3px solid #0059dd;
    width: 260px;
    height: 194px;
    cursor: pointer;
    background-color: black;
    margin-top: 8px;
  }
  
  .img1 {
    position: absolute;
    background: url(https://i.imgur.com/ZmbeHHW.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 12px 45px;
  }
  
  .img2 {
    position: absolute;
    background: url(https://i.imgur.com/4HJbzEq.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    width: 180px;
    height: 180px;
    margin: 7px 40px;
  }
  
  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }
  
  .button div {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

</style>

<div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
button.querySelector('.play').style.display='none';
player.play();
} else {
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

  <div class="img1"></div>
  <div class="img2"></div>
  <div id="grad"></div>

  <div class="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player4" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>

And this one:

<style>
  #playButton5 {
    position: relative;
    width: 266px;
    height: 250px;
    cursor: pointer;
    background-color: #000000;
    background-image: linear-gradient( to right, transparent 0, transparent 86px, #0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px, transparent 266px), url('https://i.imgur.com/DrNBAbe.png');
    box-Shadow: inset 0 0 0 3px #0059dd;
    background-repeat: no-repeat;
  }
  
  .button2 div {
    width: 44px;
    height: 44px;
    top: 102px;
    left: 116px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

</style>

<div id="playButton5" onclick=" 
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
document.querySelector('#playButton5 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton5 .pause').style.display='none';
document.querySelector('#playButton5 .play').style.display='inline-block';
player.pause();
}">

  <svg width="266" height="250" viewbox="0 0 266 150">
    <circle cx="138" cy="74" r="24.5" stroke-width="6" fill="orange"></circle>
    <line x1="6" y1="75" x2="32" y2="75" stroke="#f00" stroke-width="6"></line>
    <line x1="39" y1="75" x2="111" y2="75" stroke="#f00" stroke-width="6"></line>
    <line x1="86" y1="44" x2="192" y2="105" stroke="#f00" stroke-width="6"></line>
    <line x1="137" y1="12" x2="137" y2="136" stroke="#f00" stroke-width="6"></line>
    <line x1="86" y1="105" x2="192" y2="44" stroke="#f00" stroke-width="6"></line>
    <line x1="152" y1="51" x2="188" y2="-12" stroke="#f00" stroke-width="6"></line>
    <line x1="191" y1="-17" x2="205" y2="-40" stroke="#f00" stroke-width="6"></line>
    <line x1="151" y1="98" x2="188" y2="161" stroke="#f00" stroke-width="6"></line>
    <line x1="191" y1="166" x2="205" y2="188" stroke="#f00" stroke-width="6"></line>
    <circle cx="138" cy="74" r="24.5" stroke="red" stroke-width="6" fill="black">
    </circle>
  </svg>

  <div class="button2">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;background-size: 16px 20px;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;background-size: 16px 20px;display: none;">
    </div>
  </div>
</div>

<audio id="player5" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
12

No I didn’t say that.

I think my post was quite clear and was an attempt to show how the css you posted should look. It did not mean it was the only way to do something as that depends on what else you are going to add onto the mix.

Please also see coothead’s post as it requires an answer I think :slight_smile:

2 Likes
13

I don’t format my codes the same way as he does.

14

Yes, you are still doing it wrong. :unhappy:

And, knowing how intransigent you are,
you will probably continue to do it wrong. :rofl:

coothead

15

Hey, I never used to use </style> before, now I’m using it. So, there’s still hope.

16

Isn’t your way adding unnecessary code that’s not needed?

And by that I’m referring to this:

.button2 .play,
.button2 .pause{
}

Rather than this?

  .button2 {
}

Wouldn’t it make more sense to do it like this, than your way then?

.button2 {
position: absolute;
width: 100px;
height: 100px;
top: 7px;
left: 79.4px;
}

as opposed to this?

.button2 .play,
.button2 .pause{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 76px;
    left: 111px;
}
17

No there is not. :unhappy:

You are, unfortunately, a lost soul. :shifty:

You should never use it before. :rolleyes:

It is a closing tag and, as such, must be used after. :biggrin:

coothead

18

In your first post you show the same code as mine except you missed out some important bits which I corrected for you. That’s what I was showing you.

How you wish to use that information is up to you once you understand it.

I already told you there’s no need for positioning the second element if that’s all that was going to be positioned in that section- which I believe answers your question:)

19

Would you recommend against doing this, and that it’s unnecessary?

And can you say why this would be a bad idea?

 #img1, #img2{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 7px;
    left: 79.4px;
  }

 <svg id="img1" class="play">

 <svg id="img2" class="pause">
20

  1. Yes, I would recommend against doing that.
    Yes, it is unnecessary.

  2. Yes, I can say why it is a bad idea.
    It is a bad idea, because the code is bloated
    and overly complicated. The use of the svg
    element as opposed to a single image is inane.

coothead