J'essaie de créer un formulaire de connexion simple et il semble bien jusqu'à ce que je redimensionne mon navigateur. Je travaille ici avec trois <div> éléments; center, center2 et center3. Ils sont tous emballés dans main. bgpc n'est que l'image d'arrière-plan.

Dès que je redimensionne le navigateur, les 3 divisions centrales se chevauchent et rien ne reste à sa place.

J'ai déjà essayé de définir position sur absolute ou relative dans l'encapsuleur et dans les trois divisions centrales, mais rien ne semble fonctionner.

#bgpc {
  float: bottom;
  height: 100%;
  background-position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  filter: blur(3px) brightness(50%);
  background-image: url("../images/background1.gif");
  /*background-image: url("../images/home_alt.png");*/
  /*background-image: url('../images/backTest.PNG');*/
}

#center {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #35ada7;
  padding: 5px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 10px;
  font-size: 180%;
  filter: drop-shadow(8px 8px 10px gray) opacity(75%);
  color: white;
  display: block;
}

#center2 {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(8px 8px 10px gray) opacity(75%);
  display: block;
}

#center3 {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(8px 8px 10px gray) opacity(75%);
  display: block;
}

#main {
  float: bottom;
}
<div id="main">
  <div id="bgpc"></div>
  <div id="center">
    <h1>MyCalc</h1>
    <b>Si</b>mple <b>Cal</b>culator
  </div>
  <div id="center3">
    <center>
      <h1 style="color: white">Log in to use the<br> Calculator</h1>
    </center>
  </div>
  <div id="center2">
    <form method="post" action="testAspx.aspx" class="login-form">
      <div class="input-container">
        <i class="fa fa-envelope"></i>
        <input type="email" id="userName" class="input" name="email" style="background-color: transparent; color: white" placeholder="Username" />
      </div>
      <div class="input-container">
        <i class="fa fa-lock"></i>
        <input type="password" id="loginPassword" class="input" name="password" style="background-color: transparent; color: white" placeholder="Password" />
        <i id="show-password" class="fa fa-eye"></i>
      </div>
      <input id="submit" type="button" name="login" value="Login" onclick="Schleife(0)" class="button" />
    </form>
  </div>
</div>
1
Karim Hendrik Prüter 8 nov. 2019 à 16:58