Keeping 2 images centered and separated

asasass · August 18, 2021, 3:12pm

How would I keep these centered and separated?

.playa {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;
}

.playb {
  position: absolute;
  top: 0;
  left: 200px;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  fill: blue;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;

}

asasass · August 18, 2021, 3:34pm

I was trying this way:
https://jsfiddle.net/g4byzo0h/1/

Maybe that is not a good way.


.container-middle .play-contain {
  position: relative;
   top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  float: left;
  margin-left: 25px;
  width: 277px;
  border-radius: 25px;
 
}


 .playa {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;
}

 .playb {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  fill: blue;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;
}


 <div class="container-middle">
            <div class="play-contain">
  <svg class="playa " width="100%" height="100%" viewBox="0 0 64 64">
    <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
              M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
  </svg>

 </div>



<div class="play-contain">
  <svg class="playb" width="100%" height="100%" viewBox="0 0 64 64">
    <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
              M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
  </svg>
 </div>


 </div>

PaulOB · August 18, 2021, 3:48pm

Well I wouldn’t use your existing code to do it as I would use flexbox and get automatic alignments on most things. However sticking with what you’ve got now you could do this.

.playa,.playb {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
}
.playa { 
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  transform:translateX(-50px);
}
 .playb {
  fill: blue;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  transform:translateX(50px);
}

That completely replaces the similar playa and playb code of yours.

John_Betong · August 18, 2021, 10:53pm

The simplicity of Flexbox:

A picture is worth a thousand words but the JavaScript animation is even better

asasass · August 19, 2021, 1:48pm

I’m trying to use flex here and I keep getting confused.

I wasn’t able to figure out how to get the background to show:

I made a mess of everything in here:
https://jsfiddle.net/4ntemL9g/

Maybe starting with the working version would be easier to transfer things over.
https://jsfiddle.net/y8mzn5tw/

That’s what I am doing now.
Flex seems like the simplest thing to use, and I’m having trouble with it.

I did this:

.outer {
  display: flex;
  min-height: 100%;
}

This would become what now?

This:?

.containera {
  width: 100%;
  min-height: 100%;
  background-image:]

https://jsfiddle.net/y8mzn5tw/2/

.containera {
  position: absolute;
  top: 0;
  left: 0;
  /* bottom: 0;*/
  right: 0;
  width: 100%;
  /*height: 100%;*/
  min-height: 100%;
  background-image:

PaulOB · August 19, 2021, 2:54pm

becuase you have lots of nested divs it makes it awkward but you;d need something like this.

.outer {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
}
.tcell{
   display: flex;
   min-height: 100%;
   width:100%;
   flex:1 0 100%;
}
.container{
  flex:1 0 100%;
}
.containera{
  width:100%;
  display: flex;
   min-height: 100%;
 }

I gave you a full flex version sometime ago so I’m not keen on working it all out again.

asasass · August 19, 2021, 3:00pm

I’m getting overflow and and blank page.

.containerb {
  width: 100%;
  display: flex;
  min-height: 100%;

Wouldn’t it be the same as .containera?

.containera{
  width:100%;
  display: flex;
   min-height: 100%;
 }

WebSteve · August 19, 2021, 3:05pm

Did you watch the animation posted above?

What John expected you to do is watch the animation, then look up the terms at the left in a web page that explains Flexbox. Then apply those to your page.

Not understanding Flexbox, you are adding all kinds of needless CSS that is already given to you for free with Flex.

PaulOB · August 19, 2021, 3:27pm

That’s because container and containerb are both flex items. You would need to hide .container to allow containerb to be the only one there.

As I said the structure is not built from the ground up to manage all your requirements so you keep running into problems. When you keep adding and changing things you need to decide whether to go back to scratch again or not. Simple changes are ok but when you start adding separate blocks and separate behaviours its time to sit down and map out what needs to happen.

asasass · August 19, 2021, 3:30pm

Hiding the container hides the youtube video also.
https://jsfiddle.net/2dL0e93v/1/

When does container get used?

<div class="container hide">

.container {
  flex: 1 0 100%;
}

fadea background image is showing

fadeb background is not.

document.querySelector('html').classList.add('bodyfadea');

document.querySelector('html').classList.add('bodyfadeb');

.bodyfadea,
.bodyfadeb {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadea body {
  background-image:
  background-size: 165px 165px;
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/*.bodyfadeb {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}*/

.bodyfadeab body {
  background-image:
  background-size: 165px 165px;
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

PaulOB · August 19, 2021, 3:41pm

Here is the container pushing the buttons wide.

If I set the container to display none then this happens.

You’ll have to work out how to manage it all.

I’m taking a break for my sanity and back on the weekend

asasass · August 19, 2021, 3:48pm

I did that here:
https://jsfiddle.net/2dL0e93v/3/

I also tested it here and get the same thing.
https://jsitor.com/f-3WZDqADu

Why is display: none; getting put on container?

.container {
  flex: 1 0 100%;
  display: none;
}

adding display: none;
I believe hides the video.

no video showing:

no background image showing:

asasass · August 19, 2021, 4:53pm

Added flex to buttons, removed absolute and margin from buttons.

https://jsfiddle.net/jrLkodf8/

Still, no background showing behind buttons, and youtube video is not showing.

Sometimes 3 buttons are visible, other times there are 9.

I have to figure that out.

Video is visible:
https://jsfiddle.net/vdfz1g49/3/

.container {
  flex: 1 0 100%;
  /*display: none;*/
}

Buttons are no-longer visible.

PaulOB · August 19, 2021, 8:48pm

What happens if you move the hide up one level?

<div class="container hide">

and:

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
        const theplay = cover.parentElement.querySelector(".playb");
        hide(theplay);
        const thewrap = cover.parentElement.querySelector(".container");// changed to container
etc....

asasass · August 19, 2021, 9:06pm

This?
https://jsfiddle.net/L0y5d987/

The youtube video is still not viewable.

But you can hear it here, after clicking on the button.
https://jsitor.com/O_NnVATH9

What does that tell you?

Using flex hides youtube videos?

.container {
  flex: 1 0 100%;
}

.containera {
  width: 100%;
  display: flex;
  min-height: 100%;
}

<div class="container hide">
      <div class="containera ">

 function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
        const theplay = cover.parentElement.querySelector(".playb");
        hide(theplay);
        const thewrap = cover.parentElement.querySelector(".container");
        hide(thewrap);
        document.querySelector('html').classList.add('bodyfadea');
    }

PaulOB · August 19, 2021, 9:45pm

You seem to have changed the js. In the fiddle before the next rule said show(thewrap) but in your new fiddle you say hide(thewrap).

I still have your old fiddle on a tab and it shows this:

     const thewrap = cover.parentElement.querySelector(".container");
        show(thewrap);

If I match that in your new fiddle then I see this.

asasass · August 19, 2021, 9:53pm

YouTube is viewable
https://jsfiddle.net/vu4dpkcL/

.container {
  flex: 1 0 100%;
}

<div class="containera hide">

const thewrap = cover.parentElement.querySelector(".containera");
show(thewrap);

Buttons are not viewable.

YouTube and Buttons are both viewable.
https://jsfiddle.net/vu4dpkcL/1/

https://jsitor.com/U6suAzSRu

.container {
  flex: 1 0 100%;
}

<div class="container hide">

<div class="containera">

const thewrap = cover.parentElement.querySelector(".container");
show(thewrap);

asasass · August 19, 2021, 10:01pm

Next, 2 issues, 1, the background is not viewable on the button page, it’s blank.

2, the buttons wrap when I have them set not to wrap

https://jsfiddle.net/bjtfLxpo/1/

PaulOB · August 19, 2021, 10:22pm

You haven’t applied any image to that one apart from purple?


.bodyfadea,
.bodyfadeb{
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadea body,
.bodyfadeb body{
  background-image:
    linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),

etc....

asasass · August 19, 2021, 10:26pm

There’s 2, if I give each different colors.

The 2nd one has yellow in it.

The fade works on both of them.

The image isn’t showing on the 2nd one.


.bodyfadea {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadea body {
  background-image:
    linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),

    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),

    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),

    linear-gradient(black 20px, #0000 20px 150px, black 150px),
    linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),

    linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),

    linear-gradient(black 30px, #0000 30px 140px, black 140px),
    linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),

    linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),

    linear-gradient(black 40px, #0000 40px 130px, black 130px),
    linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),

    linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),

    linear-gradient(black 50px, #0000 50px 120px, black 120px),
    linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),

    linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),

    linear-gradient(black 60px, #0000 60px 110px, black 110px),
    linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),

    linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),

    linear-gradient(black 70px, #0000 70px 100px, black 100px),
    linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),

    linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),

    linear-gradient(black 80px, #0000 80px 90px, black 90px),
    linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),

    linear-gradient(teal, teal);
  background-size: 165px 165px;
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.bodyfadeb {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadeab body {
  background-image:
    linear-gradient(yellow 5px, #0000 5px),
    linear-gradient(90deg, yellow 5px, #0000 5px),

    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),

    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),

    linear-gradient(black 20px, #0000 20px 150px, black 150px),
    linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),

    linear-gradient(yellow 25px, #0000 25px 145px, yellow 145px),
    linear-gradient(90deg, yellow 25px, #0000 25px 145px, yellow 145px),

    linear-gradient(black 30px, #0000 30px 140px, black 140px),
    linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),

    linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),

    linear-gradient(black 40px, #0000 40px 130px, black 130px),
    linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),

    linear-gradient(yellow 45px, #0000 45px 125px, yellow 125px),
    linear-gradient(90deg, yellow 45px, #0000 45px 125px, yellow 125px),

    linear-gradient(black 50px, #0000 50px 120px, black 120px),
    linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),

    linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),

    linear-gradient(black 60px, #0000 60px 110px, black 110px),
    linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),

    linear-gradient(yellow 65px, #0000 65px 105px, yellow 105px),
    linear-gradient(90deg, yellow 65px, #0000 65px 105px, yellow 105px),

    linear-gradient(black 70px, #0000 70px 100px, black 100px),
    linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),

    linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),

    linear-gradient(black 80px, #0000 80px 90px, black 90px),
    linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),

    linear-gradient(yellow, yellow);
  background-size: 165px 165px;
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Topic		Replies	Views
How can I center this graphic and keep it from moving HTML & CSS	4	588	October 8, 2014
How can I easily center images within a div? HTML & CSS	6	15534	October 8, 2014
Keep an image centered while it's increasing in size HTML & CSS	13	12711	July 11, 2019
Center images in window? HTML & CSS	3	610	October 8, 2014
Best Way to Center Two Adjacent Images? Get Started	6	639	October 8, 2014

Keeping 2 images centered and separated

Related topics