How to keep 2 buttons aligned and even so they are not bumping into each other

HTML & CSS
1

I added them on the bottom of page 2 and 3. https://jsfiddle.net/uya4c0q9/

How would this be done?

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  clip-path: circle(50%);
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

.exit.exitblue {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 200px;
  left: 0;
  border: 5px solid blue;
}

.exit.exitblue::before,
.exit.exitblue::after {
  background-color: blue;
}

.exit.exitblue2 {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 200px;
  left: 0;
  border: 5px solid blue;
}

.exit.exitblue2::before,
.exit.exitblue2::after {
  background-color: blue;
}

.hide {
  display: none;
}


2

How would I do this?

Keep them separated, but not bumping into each other?

3

The easiest way would to be to place both buttons in a parent container and position that container at the bottom. The container would be wide enough for the two buttons and positioned absolutely into place. You probably also want display flex on the container to align the buttons side by side.

The buttons could live side by side in that container without being absolutely placed but would need to be position relative so the pseudo elements have a context.

Alternatively place the buttons as you have done in the centre and offset them from each other with a transform in the opposite direction.

1 Like
4

Would I be able to use 3 buttons in total instead of needing 6?

Place them outside of all 3 containers?

Toggle between each of them?

Like a carousel.

https://jsfiddle.net/0t1dfomp/1/

        </div>
      </div>
    </div>
  </div>
</div>

<button class="exit" type="button"></button>
<button class="exit exitpPage2" type="button"></button>
<button class="exit exitpPage3" type="button"></button>

Like this:

 <div class="button-container">
<button class="exit" type="button"></button>
<button class="exit exitpPage2" type="button"></button>
<button class="exit exitpPage3" type="button"></button>
</div>

What would be the css for the button container?

If it’s all the way at the bottom.

.button-container {}

Am I supposed to wrap another container around all 3 containers?

https://jsfiddle.net/dfbukavp/1/

.button-container {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  background: green;
}

5

If you place the 3 buttons outside of all the containers then you would need some JS logic in order to know which page to show. (You’d also need to take care with the positioning if you need them aligned to the video in some way.)

You would need to detect which page was active and then show the previous or the next as required as well as starting and closing the correct video etc.

Why would you need 3 buttons? Surely the option would be previous or next buttons only? What does the third button do?

6

I realized after I did that the javascript broke.

3 pages, let user decide.

7

Then you’d only need 2 buttons.

Current page requires no action which means you only need buttons for previous and next (or 2 named pages).

Why would you need 3 buttons?

1 Like
8

I will edit this code here. https://jsfiddle.net/fLhc3s14/2/

If I wanted to create a column of 5 videos, how would I do that?

Would that work?

Clicking on the 1st button here gives me a line of 5 horizontal videos.

https://jsfiddle.net/bcdw20f1/

How do I make them vertical?


Would I be able to get videos to appear in the other boxes?

9

Try removing display:flex from .container.

You have multiple videos in your other demos. What’s different here?

10

How would I fix this? https://jsfiddle.net/5y0sz3ov/2/

The exit buttons somehow found their way into the curtain area.

It seems as though they have gotten stuck inside there.

.button-container {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 50px;
  background: green;
}

.exit {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  clip-path: circle(50%);
}

    <div class="button-container">
      <button class="exit exitPage2" type="button"></button>
      <button class="exit exitPage3" type="button"></button>
    </div>

11

I also noticed this:

But that is mostly do to the green/width. being too wide.

12

You probably need a max-width instead of width so the element can shrink.

Not sure what you are asking as the buttons are indeed inside the curtain element. Did you mean you wanted them positioned a bit lower?

Try absolute position on them.

I’m on a mobile until later so can’t test code at the moment.

1 Like
13

I will wait, I’m stuck.

14

Something like this.

.button-container {
  position:absolute;
  left:0;
  right:0;
  display: flex;
  flex-wrap: wrap;
  margin:1rem  auto 0;
  justify-content: center;
  align-content: center;
  max-width: 290px;
  gap: 50px;
  background: green;
}

Adjust the top margin to position where you want.

1 Like
15

https://jsfiddle.net/a0L3gmd5/1/

Figured it out: .container would need min-width: 255px;

How come page 1 behaves this way:

And page 2 & 3 behaves this way?

16

Yes you have a min-width on container1 but nothing on container2 or 3.

1 Like
18

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