3

Mi pregunta es la siguiente, estoy haciendo un login form por mi cuenta, y el form debería quedar a la derecha de la imagen pero no lo hace, desaparece cuando aplico estilos y como que se posiciona detrás del body, ¿será algo del display flex?

Entiendo conceptos básicos como display flex o position, max min width/height, pero la verdad que esto me supera un poco y bueno también me sirve como aprendizaje al preguntar aquí.

Como pueden ver en la imagen, esos botones pertenecientes al form se quedan flotando y el form mas su container desaparecen, o en este caso se va directo abajo.

introducir la descripción de la imagen aquí

Les paso mi código:

*{
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
img{
    border: 2px red solid;
    height: 100%;
    max-width: 100%;
}
h1{
    font-size: 2.5em;
    color: white;
    font-weight: bold;
    margin: 20px 0;
}
form{
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-color:gray;
    padding: 0;
    height: 100%;
}
.container{
    background-color: whitesmoke;
    border-radius: 10px;
    width: 1300px;
    overflow: hidden;
    position: relative;
    max-width: 100%;
    margin: 5% auto;
    border: 1px blue solid;
}
.form-container{
    position: absolute;
    max-width: 100%;
    top: 25%;
    left: 50%;
    height: 100%;
}

.buttons-top{
    height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign up / Sign in page </title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container"> 
        <img src="Images/background.webp" alt="">
            <div class="form-container signUp-container">
                <div class="buttons-top">
                    <button class="btn btn-su-top">Sign Up</button>
                    <button class="btn btn-si-top">Sign In</button>
                </div>
                <form action="#">
                    <h1>Sign Up for Free</h1>
                    <input type="text" placeholder="Your Name">
                    <input type="email" placeholder="Your Email">
                    <input type="password" placeholder="Your Password">
                    <button class="btn-su-bot">Get Started</button>

                </form>
            </div>
            <div class="form-container signIn-container">
                <div class="buttons-top">
                    <button class="btn btn-su-top">Sign Up</button>
                    <button class="btn btn-si-top">Sign In</button>
                </div>
                <form action="#">
                    <h1>Welcome Back!</h1>
                    <input type="email" placeholder="Email Adress">
                    <input type="password" placeholder="Password">
                    <a href="#">Forgot Your Password?</a>
                    <button class="btn-si-bot">Log In</button>
                </form>
            </div> 
    </div>

    <script src="script.js"></script>
</body>

</html>
    <script src="script.js"></script>
</body>

2 respuestas 2

1

Replicando tu código tienes algunos errores, te recomendaría leer un poco mas acerca de css y display flex, también te recomiendo usar una sola unidad de medida, ya sea en rem, em o px, %, etc, según lo requieras, combinarlas hace mas complejo la comprensión del código.

Otra observación es que al agregar imágenes es bueno hacerlo dentro de un contenedor div, con esto evitamos desbordamientos y es mas practico asignar estilos.

* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-size: 2.5em;
  color: white;
  font-weight: bold;
  margin: 20px 0;
}


/*ELEMENTO CONTENEDOR PADRE*/
#container {
  /*ASIGNAS DISPLAY FLEX*/
  display: flex;
  /*ALINEAMOS EN FILAS*/
  flex-direction: row;
  /*CENTRAMOS TODOS LOS ELEMENTOS HIJOS EN EJE X*/
  justify-content: center;
  /*CENTRAMOS TODOS LOS ELEMENTOS HIJOS EN EJE Y*/
  align-items: center;
  /*DAMOS EL ANCHO TOTAL AL CONTENEDOR*/
  width: 100%;
  background-color: whitesmoke;
  border-radius: 10px;
  overflow: hidden;
  margin: 5% auto;
  border: 1px blue solid;
}


/*CONTENEDOR DE LA IMAGEN*/

#container-image {
  /*TOMAMAMOS EL 60% DEL ANCHO RESPECTO AL CONTENEDOR PADRE*/
  width: 60%;
  /*BORDE DE SEPARACION*/
  margin: 5px;
}


/*IMAGEN*/

#container-image>img {
  border: 2px red solid;
  height: 100%;
  /*ESPECIFICAMOS EL ANCHO TOTAL RESPECTO A SU CONTENEDOR*/
  width: 100%;
}

.form-container {
  width: 30%;
  height: 50%;
  margin: 5px;
}


/*ACCEDEMOS AL FORM MEDIANTE SU TAG*/

form {
  /*ASIGNAMOS EL DISPLAY EN FLEX*/
  display: flex;
  /*SE ALINEA EN COLUMNAS*/
  flex-direction: column;
  /*CENTRAMOS RESPECTO EJE Y*/
  align-items: center;
  /*CENTRAMOS RESPECTO EJE X*/
  justify-content: center;
  /*ALTURA DEL CONTENEDOR DEL FORM EN PIXELES*/
  height: 210px;
  width: 100%;
  text-align: center;
  background-color: gray;
  padding: 0;
}

.buttons-top {
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign up / Sign in page </title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container">
    <div id="container-image">
      <img src="https://c8.alamy.com/compes/2ab8f4w/cartoon-vectores-stick-figura-dibujo-ilustracion-conceptual-del-hombre-en-el-espacio-cohete-volando-alto-en-el-espacio-dejando-el-planeta-tierra-tecnologia-o-concepto-empresarial-2ab8f4w.jpg" alt="">
    </div>

    <div class="form-container signUp-container">
      <div class="buttons-top">
        <button class="btn btn-su-top">Sign Up</button>
        <button class="btn btn-si-top">Sign In</button>
      </div>
      <form action="#">
        <h1>Sign Up for Free</h1>
        <input type="text" placeholder="Your Name">
        <input type="email" placeholder="Your Email">
        <input type="password" placeholder="Your Password">
        <button class="btn-su-bot">Get Started</button>

      </form>
    </div>
    <div class="form-container signIn-container">
      <div class="buttons-top">
        <button class="btn btn-su-top">Sign Up</button>
        <button class="btn btn-si-top">Sign In</button>
      </div>
      <form action="#">
        <h1>Welcome Back!</h1>
        <input type="email" placeholder="Email Adress">
        <input type="password" placeholder="Password">
        <a href="#">Forgot Your Password?</a>
        <button class="btn-si-bot">Log In</button>
      </form>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>
<script src="script.js"></script>
</body>

Ejecútalo en tu navegador para que lo visualices correctamente y dime si te sirvió.

3
  • hola como te va, si por lo que estuve viendo vos le agregaste un display flex al container y ahi se alinearon digamos la imagen y el form. lo aplique en mi codigo pero al hacerlo el form sigue apareciendo invisible en la parte inferior, y lo copie tal cual tu codigo, si lo podrias revisar me harias un gran favor y gracias por tomarte el tiempo de responder y ayudarme de verdad buen aporte. el 1 sep. a las 21:38
  • Lo verificaste aquí con el botón ejecutar?, no hace eso que mencionas, creo yo haz de tener un error en alguna parte de tu código que no podemos ver, intenta replicar mi código en un proyecto nuevo y dime si hace lo mismo. el 2 sep. a las 0:02
  • sisi tranqui igual, gracias a tu codigo pude entender mejor el tema del display o de la herencia padre/hijo que era lo que no entendia muy bien, gracias de nuevo bro el 4 sep. a las 15:51
1

¿Has intentado ordenar todo dentro de un row?

 <div class="row"> 
                                                        
    <div class="col-sm-8 content-fluid" >
     // tu contenido de la izquierda
    </div>
    <div class="col-sm-4 content-fluid" >
     // tu contenido del form
    </div>

</div>

A la clase col-sm-8 se le asigna un valor, el total es 12, si a cada col-sm-6 y al otro 6, te quedarán ambos del mismo tamaño. Esa puede ser una alternativa.

2
  • no, no intente eso la verdad pero me suena a bootstrap puede ser? ahora que lo veo asi, tambien podria aplicar un display block para obtener resultado similar? el 31 ago. a las 13:37
  • @worldSinger si, es bootstrap, ayuda bastante la verdad, lo mejor también es que hay buena documentación al respecto y la comunidad de desarrolladores es gigante.
    – Emerson
    el 31 ago. a las 13:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.