Help Putting 2 Objects On Top of One Another

Code Help HTML/CSS/JS
1

Question:
How do I position 2 elements to be on top of one another? I’m trying to put the login and signup in the same place and not flip flopping.
Repl link:
https://replit.com/@DrRman/The-AMC-Experiment#public/style.css

HTML:

<!DOCTYPE html>
<html>
<script>
  //let hasAccount = true;
</script>
<head>
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <div class="sheet">
  <h1>Hello, AMC!</h1>
    <div>
    <form id="login" name="login" class="login">
      <h3>Login</h3>
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
    </form>
    </div>
    </br>
    <button id="linkRegisterPage" onclick="toggle()">Don't have an account?</button>
    </br>
    </br>
    <div>
    <form id="signup" name="signup" class="signup">
      <h3>New User</h3>
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
    </form>
    </div>
    
      <button class="btn btn-primary" type="submit">Submit</button>
  </div>
  <script src="frontEnd.js"></script>
</body>
</html>

CSS:

body {
  background-color: white;
}

h1 {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

a {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.login, .signup {
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  background-color: transparent;
  border-width: 0.075em;
  display: inline-block;
  border-style: solid;
  border-color: black;
  border-radius: 0.125em;
  padding: 0.25em;
}

.signup {
}

.sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-width: 0.075em;
  display: inline-block;
  border-style: solid;
  border-color: black;
  border-radius: 0.75em;
  box-shadow: 0 2px 5px 0;
}

JS:

let hasAccount = true
console.log(hasAccount)

document.getElementById("signup").style.visibility = "hidden";
document.getElementById("login").style.visibility = "visible";

function toggle(){
  if (hasAccount){
    document.getElementById("login").style.visibility = "hidden";
    document.getElementById("signup").style.visibility = "visible";
    document.getElementById("linkRegisterPage").innerHTML = "Have an account?";
    hasAccount = false
  } else{
    document.getElementById("signup").style.visibility = "hidden";
    document.getElementById("login").style.visibility = "visible";
    document.getElementById("linkRegisterPage").innerHTML = "Don't have an account?";
    hasAccount = true
  }
}
2

Use display: block to stack them. Input elements are inline by default which is why they go side-by-side. Additionally, you could also use a flex layout and use flex-direction: column

3

@CadenChau nope it doesn’t work. They still flip flop. To see it click the button Don’t have an account?.

4

I went into the Repl and was able to make it work using JS.

function Buttontoggle()
{
  if (hasAccount){
    document.getElementById("login").classList.toggle("hideMe");
    document.getElementById("signup").classList.toggle("hideMe");
    document.getElementById("linkRegisterPage").innerHTML = "Have an account?";
    document.getElementById("login_title").innerHTML = "Sign up";
    hasAccount = false
  } else{
    document.getElementById("login").classList.toggle("hideMe");
    document.getElementById("signup").classList.toggle("hideMe");
    document.getElementById("linkRegisterPage").innerHTML = "Don't have an account?"; 
    document.getElementById("login_title").innerHTML = "Log in";
    hasAccount = true
  }
}
2 Likes
5

I went to the website and added display: block onto them and it works wym? I just added in element.style which is <input style="display: block"> I think

6

@CadenChau I needed JS for it. It works because the code is already there.

2 Likes
7

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