Getting the red background and green svg circle to appear in each box

HTML & CSS
1

How come the red background and green circle isn’t appearing in the other boxes?

It’s only appearing in the first box.

.wrapc .song .stack{
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: red;
  background:red;
}


<div class="wrapc">
  <div class="playButton song1" data-audio="http://getradio.me/svoefm">
    <svg aria-hidden="true" class="stack" height="198" viewbox="0 0 198 198" width="198">
    <circle cx="100" cy="99" r="40.88334" stroke="lime"></circle></svg> <svg class="play" height="35.4" viewbox="0 0 1226 1481" width="28.6667">
    <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z"></path></svg> <svg class="pause hide" height="35.4" viewbox="0 0 1260 1512" width="28.6667">
    <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z"></path></svg>
  </div>
  <div class="playButton song2" data-audio="http://getradio.me/svoefm">
    <svg aria-hidden="true" class="stack" height="198" viewbox="0 0 198 198" width="198">
    <circle cx="100" cy="99" r="40.88334" stroke="lime"></circle></svg> <svg class="play" height="35.4" viewbox="0 0 1226 1481" width="28.6667">
    <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z"></path></svg> <svg class="pause hide" height="35.4" viewbox="0 0 1260 1512" width="28.6667">
    <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z"></path></svg>
  </div>
  <div class="playButton song3" data-audio="http://getradio.me/svoefm">
    <svg aria-hidden="true" class="stack" height="198" viewbox="0 0 198 198" width="198">
    <circle cx="100" cy="99" r="40.88334" stroke="lime"></circle></svg> <svg class="play" height="35.4" viewbox="0 0 1226 1481" width="28.6667">
    <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z"></path></svg> <svg class="pause hide" height="35.4" viewbox="0 0 1260 1512" width="28.6667">
    <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z"></path></svg>
  </div>
  <div class="playButton song4" data-audio="http://getradio.me/svoefm">
    <svg aria-hidden="true" class="stack" height="198" viewbox="0 0 198 198" width="198">
    <circle cx="100" cy="99" r="40.88334" stroke="lime"></circle></svg> <svg class="play" height="35.4" viewbox="0 0 1226 1481" width="28.6667">
    <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z"></path></svg> <svg class="pause hide" height="35.4" viewbox="0 0 1260 1512" width="28.6667">
    <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z"></path></svg>
  </div>
  <div class="playButton song5" data-audio="http://getradio.me/svoefm">
    <svg aria-hidden="true" class="stack" height="198" viewbox="0 0 198 198" width="198">
    <circle cx="100" cy="99" r="40.88334" stroke="lime"></circle></svg> <svg class="play" height="35.4" viewbox="0 0 1226 1481" width="28.6667">
    <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z"></path></svg> <svg class="pause hide" height="35.4" viewbox="0 0 1260 1512" width="28.6667">
    <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z"></path></svg>
  </div>
  <div class="playButton song6" data-audio="http://getradio.me/svoefm">
    <svg aria-hidden="true" class="stack" height="198" viewbox="0 0 198 198" width="198">
    <circle cx="100" cy="99" r="40.88334" stroke="lime"></circle></svg> <svg class="play" height="35.4" viewbox="0 0 1226 1481" width="28.6667">
    <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z"></path></svg> <svg class="pause hide" height="35.4" viewbox="0 0 1260 1512" width="28.6667">
    <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z"></path></svg>
  </div>
  <div class="playButton song7" data-audio="http://getradio.me/svoefm">
    <svg aria-hidden="true" class="stack" height="198" viewbox="0 0 198 198" width="198">
    <circle cx="100" cy="99" r="40.88334" stroke="lime"></circle></svg> <svg class="play" height="35.4" viewbox="0 0 1226 1481" width="28.6667">
    <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z"></path></svg> <svg class="pause hide" height="35.4" viewbox="0 0 1260 1512" width="28.6667">
    <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z"></path></svg>
  </div>
  <div class="playButton song8" data-audio="http://getradio.me/svoefm">
    <svg aria-hidden="true" class="stack" height="198" viewbox="0 0 198 198" width="198">
    <circle cx="100" cy="99" r="40.88334" stroke="lime"></circle></svg> <svg class="play" height="35.4" viewbox="0 0 1226 1481" width="28.6667">
    <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z"></path></svg> <svg class="pause hide" height="35.4" viewbox="0 0 1260 1512" width="28.6667">
    <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z"></path></svg>
  </div>
  <div class="playButton song9" data-audio="http://getradio.me/svoefm">
    <svg aria-hidden="true" class="stack" height="198" viewbox="0 0 198 198" width="198">
    <circle cx="100" cy="99" r="40.88334" stroke="lime"></circle></svg> <svg class="play" height="35.4" viewbox="0 0 1226 1481" width="28.6667">
    <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z"></path></svg> <svg class="pause hide" height="35.4" viewbox="0 0 1260 1512" width="28.6667">
    <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z"></path></svg>
  </div>
  <div class="linesa"></div>
  <div class="linesb"></div>
</div>

623×620 5.63 KB

2

Now I need to adjust it.

I’m stuck:

Before:

After
https://jsfiddle.net/qnbyg5x9/13/

3

It looks like your trying to put six floats at 600px x 600px in one wrapper that 606 x 606.
That’s why you only see one.

.wrapc {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  background-position: 0 -600px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapc svg {
  vertical-align: top;
}

.wrapc .playButton {
  float: left;
  width: 600px; /*change this*/
  height: 600px; /*change this*/
  background:white;
}
4

What am I changing it to?

I don’t understand how I would fix it.

5

600 ÷ 3 = 200

1 Like
6

thttps://jsfiddle.net/qnbyg5x9/14/

.wrapc .playButton {
  float: left;
  width: 200px;
  height: 200px;
  background:white;
}

I got it:

Before code:

All updated:


.wrapc {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  background-position: 0 -600px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapc svg {
  vertical-align: top;
}

.wrapc .playButton {
  float: left;
  width: 200px;
  height: 200px;
  background: white;
}

.wrapc .song1 .stack {
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: transparent;
  background: red;
  margin: 0;
}

.wrapc .song1 .play,
.wrapc .song1 .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 80px 88px 0;
  fill: #0059dd;
}

.wrapc .song1 .pause {
  left: -1px;
}

.wrapc .song2 .stack {
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: red;
  background: red;
  margin: 0 1px;
}

.wrapc .song2 .play,
.wrapc .song2 .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 80px 289px 0;
  fill: #0059dd;
}

.wrapc .song2 .pause {
  left: -1px;
}

.wrapc .song3 .stack {
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: red;
  background: red;
  margin: 0 2px;
  
}

.wrapc .song3 .play,
.wrapc .song3 .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 80px 490px 0;
  fill: #0059dd;
}

.wrapc .song3 .pause {
  left: -1px;
}

.wrapc .song4 .stack {
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: red;
  background: red;
  margin: 1px 0;
}

.wrapc .song4 .play,
.wrapc .song4 .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 281px 88px 0;
  fill: #0059dd;
}

.wrapc .song4 .pause {
  left: -1px;
}

.wrapc .song5 .stack {
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: red;
  background: red;
  margin: 1px 1px;
}

.wrapc .song5 .play,
.wrapc .song5 .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 281px 289px 0;
  fill: #0059dd;
}

.wrapc .song5 .pause {
  left: -1px;
}

.wrapc .song6 .stack {
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: red;
  background: red;
  margin: 1px 2px;
}

.wrapc .song6 .play,
.wrapc .song6 .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 281px 490px 0;
  fill: #0059dd;
}

.wrapc .song6 .pause {
  left: -1px;
}

.wrapc .song7 .stack {
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: red;
  background: red;
  margin: 2px 0;
}

.wrapc .song7 .play,
.wrapc .song7 .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 482px 88px 0;
  fill: #0059dd;
}

.wrapc .song7 .pause {
  left: -1px;
}

.wrapc .song8 .stack {
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: red;
  background: red;
  margin: 2px 1px;
}

.wrapc .song8 .play,
.wrapc .song8 .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 482px 289px 0;
  fill: #0059dd;
}

.wrapc .song8 .pause {
  left: -1px;
}

.wrapc .song9 .stack {
  position: relative;
  stroke-width: 6px;
  stroke: lime;
  fill: red;
  background: red;
   margin: 2px 2px;
}

.wrapc .song9 .play,
.wrapc .song9 .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 482px 490px 0;
  fill: #0059dd;
}

.wrapc .song9 .pause {
  left: -1px;
}

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

.wrapc .linesa::after {
  left: 399px;
}

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

.wrapc .linesb::after {
  top: 399px;
}

.hide {
  display: none;
}
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.