5

Tengo un problema con 3 select y un label dentro de mi formulario, no encunetro la forma de separarlos para darles las posiciones correctas

Código html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/Imagenes/favicon.ico" type="image/x-icon">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" media="screen" href="css/Registros.css" />
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="/js/Regiones.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Registro - Adopción</title>
</head>
<body>
    <h1 class="FormTitulo">Registro de Adopción</h1>
    <form action="" class="Registro">
        <h2 class="FormSubtitulo">CREA UNA NUEVA CUENTA</h2>
        <div class="Contenedor-Registro">
            <input type="email" name="TxtCorreo" placeholder="Correo Electronico" id="TxtCorreo" class="input-100">
            <input type="text" name="TxtNombres" placeholder="Nombre Completo" id="TxtNombres" class="input-100">
            <input type="text" name="TxtRut" placeholder="Rut" id="TxtRut" class="input-48">
            <input type="number" name="Telefono" placeholder="Teléfono de contacto" id="Telefono" class="input-dif">
            <label for="">Fecha de nacimiento</label>
            <input type="date" name="FechaNaci" placeholder="Año de nacimiento" id="FechaNaci" class="input-dif2">
            <select name="" id=""></select>
            <select id="regiones"></select>
            <select id="comunas" ></select>
            <input type="button" value="Registrar!" name="BtnRegistro" id="BtnRegistro" class="Boton">
        </div>
    </form>
</body>
</html>

Mi código CSS de mi proyecto:

    *{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("/Imagenes/Ahorasi.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1{
    color: white;
    text-align: center;
}

select {
    width: 48%;
    height: 52px;
    margin-bottom: 2%;
}

.Registro{
    width: 95%;
    max-width: 500px;
    margin: auto;
    background: rgba(63, 59, 59, 0.733);
    border-radius: 7px;
}

.FormTitulo {
    background: rgba(0, 0, 0, 0.171);
    color: rgb(255, 255, 255);
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.FormSubtitulo {
    background: rgba(0, 0, 0, 0.24);
    color: rgb(255, 255, 255);
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.Contenedor-Registro{
    padding: 10px 30px;
    display: flex;
    flex-wrap: wrap;
}

input{
    margin-bottom: 15px;
    padding: 15px;
    font-size: 16px;
}

.input-48{
    width: 48%;
}

.input-100{
    width: 100%;
}

.input-dif{
    margin-left: 4%;
    width: 48%;
}

.input-dif2{
    margin-left: 52%;
    width: 48%;
}

.Boton {
    border: none;
    color: rgba(255, 255, 255, 0.212);
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.Boton {
    background-color: rgba(0, 0, 0, 0.493); 
    color: rgb(255, 255, 255); 
    border: 2px solid rgb(119, 121, 119);
}

.Boton:hover {
    background-color: rgba(54, 54, 54, 0.226);
    color: rgb(161, 161, 161);
}

Imagen de cómo se ve la página

No logro colocar los select de forma correcta dentro de mi formulario, siguiendo con el mismo diseño del resto de la página. eh probado con br con padding todo

5
  • No te parece usar bootstrap? el 31 ago. 2018 a las 16:12
  • La verdad no tengo conocimiento de bootstrap, estoy recién comenzando en el desarrollo web @PauloUrbanoRivera el 31 ago. 2018 a las 16:20
  • Bootstrap es una librería que te facilita de forma extraordinaria el diseño de un sistema o página web, ya que tiene clases predefinidas que te sirven para ello. Te recomiendo enormemente que lo comiences a utilizar colega el 31 ago. 2018 a las 16:25
  • Si es para algo sencillo, puedes usar una librería ligera, minimalista. Hay varias muy buenas. Te recomiendo bulma. Bootstrap es una buena librería, pero en diseños simples es como usar un camión para transportar un hoja de papel. Bulma usa solamente este archivo, que pesa muy poco. Lo incluyes al principio de tu HTML y listo. Está explicado en su documentación.
    – A. Cedano
    el 31 ago. 2018 a las 16:31
  • Alguna forma para poder solucionar el problema con mi diseño ? el 31 ago. 2018 a las 16:44

1 respuesta 1

3

esto es mas o menos lo que debes hacer, utiliza div para agrupar estilos y anchos:

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("/Imagenes/Ahorasi.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1{
    color: white;
    text-align: center;
}

select {
    width: 48%;
    height: 52px;
    margin-bottom: 2%;
}

.Registro{
    width: 95%;
    max-width: 500px;
    margin: auto;
    background: rgba(63, 59, 59, 0.733);
    border-radius: 7px;
}

.FormTitulo {
    background: rgba(0, 0, 0, 0.171);
    color: rgb(255, 255, 255);
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.FormSubtitulo {
    background: rgba(0, 0, 0, 0.24);
    color: rgb(255, 255, 255);
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.Contenedor-Registro{
    padding: 10px 30px;
    display: flex;
    flex-wrap: wrap;
}

input{
    margin-bottom: 15px;
    padding: 15px;
    font-size: 16px;
}

.input-48{
    width: 48%;
}

.input-100{
    width: 100%;
}

.input-dif{
    margin-left: 4%;
    width: 48%;
}

.div-dif{
  width: 100%; 
  display:table;
}

.div-dif2{
  width: 50%; 
  float:left;
}

select {
  width:200px;
}

.Boton {
    border: none;
    color: rgba(255, 255, 255, 0.212);
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.Boton {
    background-color: rgba(0, 0, 0, 0.493); 
    color: rgb(255, 255, 255); 
    border: 2px solid rgb(119, 121, 119);
}

.Boton:hover {
    background-color: rgba(54, 54, 54, 0.226);
    color: rgb(161, 161, 161);
}
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/Imagenes/favicon.ico" type="image/x-icon">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="/js/Regiones.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Registro - Adopción</title>
</head>
<body>
    <h1 class="FormTitulo">Registro de Adopción</h1>
    <form action="" class="Registro">
        <h2 class="FormSubtitulo">CREA UNA NUEVA CUENTA</h2>
        <div class="Contenedor-Registro">
            <input type="email" name="TxtCorreo" placeholder="Correo Electronico" id="TxtCorreo" class="input-100">
            <input type="text" name="TxtNombres" placeholder="Nombre Completo" id="TxtNombres" class="input-100">
            <input type="text" name="TxtRut" placeholder="Rut" id="TxtRut" class="input-48">
            <input type="number" name="Telefono" placeholder="Teléfono de contacto" id="Telefono" class="input-dif">
            <div class="div-dif" >
            <div class="div-dif2" >
              <label for="FechaNaci" >Fecha de nacimiento</label>
              <input type="date" name="FechaNaci" placeholder="Año de nacimiento" id="FechaNaci"   />
             </div>
            <div class="div-dif2" style="margin-top:20px;">
               <select name=""></select>
            </div>
            </div>
            <div class="div-dif" >
            <div class="div-dif2" >
            <select id="regiones"  ></select>
            </div>
            <div class="div-dif2">
            <select id="comunas" ></select>
            </div>
            </div>
            <input type="button" value="Registrar!" name="BtnRegistro" id="BtnRegistro" class="Boton">
        </div>
    </form>
</body>
</html>

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.