Absolute positioning on play buttons

HTML & CSS
1

It doesn’t seem to work on this newer code:
Why is that?

But it does work on an older code of mine:

.playButtonsc {
  width: 266px;
  height: 50px;
  position: relative;
  overflow: hidden;
  background-color:black;
}

.playButtonc {
  float: left;
  width: 83px;
  height: 44px;
  cursor: pointer;
  border-top: 3px solid #0059dd;
  border-bottom: 3px solid #0059dd;
}

.playButtonc::before,
.playButtonc::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtonc::after {
  left: 177px;
}

.playButtonc.svoefm {
  border-left: 3px solid #0059dd;
  fill: #aaff00;
}

.playButtonc.soundpark {
  width: 94px;
  fill: #ffaa00;
}

.playButtonc.cavoparadisoclub {
  border-right: 3px solid #0059dd;
  fill: #ff00aa;
}

.playc {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.pausec {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.hidec {
  display: none;
}
2

I’ll open with “WHAT doesn’t seem to work”? Absolute positioning? If your code worked without absolute positioning, why did you change it? Oh, and where did you change “it”?

1 Like
3

You’ll need to provide a more precise description of your problem
“It”… does not provide much for us to go on

edit: Ron beat me to it

1 Like
4

There’s supposed to be 3 play buttons, not 1.

As seen here:

5

Yes, the three buttons seem to be positioned in the middle. What would make them do that?

6

I have no idea.

7

Show us the version number that worked.

8

This one that uses absolute positioning worked.
But it’s an older code.

I added that to this newer code:

That newer code is seen working here:
https://jsfiddle.net/27jz1dzy/31/

9

I have not been following the evolution of those particular buttons and do not want to start now. Someone else will have to help you understand what you did.

10

@PaulOB is who helped me do it the first time. But I’ve updated the player since then.

11

It would help others if you explained

  • what you changed
  • what you were trying to accomplish with those changes
  • and why you chose to change it the way you did
2 Likes
12

I added this to the newer code:

::before, ::after

13

Why did you add those rules? What problem were you trying to solve, or what benefit did you think it would bring?

Did the code function correctly before you added those rules?

14

Which would you use?

Code 1

.playd{
  position: absolute;
  left: 6px;
  top: -4px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.paused {
  position: absolute;
  left: 2px;
  top: -4px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.playd,
.paused{
  fill: #0059dd;
  z-index: 2;

or this?

Code 2



.playd{
  left: 6px; 
}

.paused {
  left: 2px;
}

.playd,
.paused{
  position: absolute;
  top: -4px;
  right: 0;
  bottom: 0;
  margin: auto;
  fill: #0059dd;
  z-index: 2;
}
15

I’m going to say it’s okay to do it as Code 2.

16

Yes no need to keep repeating the same properties as it cuts down on code.

17

You can even reduce it a little more like this…

.playd,
.paused{
  position: absolute;
  top: -4px;
  left: 6px; /*added this in for .playd */
  right: 0;
  bottom: 0;
  margin: auto;
  fill: #0059dd;
  z-index: 2;
}
.paused { /*reset from above*/
  left: 2px;
}
1 Like
18

I updated it to this:

.playd,
.paused {
  position: absolute;
  top: -4px;
  right: 0;
  bottom: 0;
  left: 4px;
  margin: auto;
  fill: #0059dd;
  z-index: 2;
}

.paused {
  left: 0;
}
19

Is this the best I can do with this one?

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
}

.playe {
  z-index: -1;
}

.pausee {
  left: 0;
}

.activee .playe {
  z-index: auto;
}
20

Would this be better or worse?

3 rulesets

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.pausee {
  left: 0;
  z-index: auto;
}

.activee .playe {
  z-index: auto;
}

Compared to this?

4 rulesets

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
}

.playe {
  z-index: -1;
}

.pausee {
  left: 0;
}

.activee .playe {
  z-index: auto;
}