0

Recién estoy empezando a crear mi primera pagina web y me he encontrado con este problema que no puedo colocar un formulario encima de una imagen. He buscado un montón por internet y no he podido. Todas las soluciones que he visto es con la imagen como fondo de la página web (background), pero la mía no es así. Analicé mi código y no encuentro el error. También me gustaría saber cómo puedo hacer para que la sección de género quede organizada, ya que género está a lado de masculino y no sé cómo hacer para que quede abajo. Este es el código:

.body {
    font-family: 'Roboto Slab', serif;
    font-size: 70pt;
    background-color: #ffffff;
}
/* Navigation */
body {
    background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23080c47' fill-opacity='0.75' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
}

.cuadro-de-fondo {
    display: block;
    margin: auto;
    padding: 0px;
    height: 100vh;
    width: 60%;
}

#formulario{
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #666666;
    width: 500px;
    position: relative;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  border: 2px solid #000;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 100%;
}

input[type="submit"] {
    border: 3px solid white;
    background-color: white;
    border-radius: 5px;
    padding: 10px 2em;
    font-weight: bold;
    color: black;
  }

.masculino {
    background-color: darkgray;
    font-style: oblique;
    border-style: black;
}

.femenino {
    background-color: darkgray;
    font-style: oblique;
    border-style: black;
}

.otro {
    background-color: darkgray;
    font-style: oblique;
    border-style: black;
}
<body>
    <img src="fondoazulmarino.png.jpg" class="cuadro-de-fondo"/>
</body>
<form id="formulario">
    <div>
        <label for="Usuario">Nombre de usuario</label><br>
        <input type="text" name="Usuario" class="usuario" method="GET" /><br />
        <label for="Correo Electrónico">Correo electrónico</label>
        <input type="email" name="Correo Electrónico" class="correo-electronico" method="GET" /><br />
        <label for="Contraseña">Contraseña</label>
        <input type="password" name="Contraseña" class="contraseña" method="POST" />
        <label for="Género">Género</label>
        <input type="radio" name="Género" value="masculino" class="masculino" />Masculino<br />
        <input type="radio" name="Género" value="femenino" class="femenino" />Femenino<br />
        <input type="radio" name="Género" value="otro" class="otro" />Otro<br />
        <input type="submit" value="Enviar" class="enviar" action="https://medicine.cheeck.com/pagina.principal" />
    </div>
</form>

1 respuesta 1

0

Por el código que estas compartiendo creo que deberías incluir el formulario dentro del body. Por otro lado, puedes estilar la etiqueta Género con un display block. Prueba esto:

<body>
   <div>
      <form id="formulario">
         <label for="Usuario">Nombre de usuario</label><br>
         <input type="text" name="Usuario" class="usuario" method="GET" /><br />
         <label for="Correo Electrónico">Correo electrónico</label>
         <input type="email" name="Correo Electrónico" class="correo-electronico" method="GET" /><br />
         <label for="Contraseña">Contraseña</label>
         <input type="password" name="Contraseña" class="contraseña" method="POST" />
         <label for="Género" style="display: block">Género</label>
         <input type="radio" name="Género" value="masculino" class="masculino" />Masculino<br />
         <input type="radio" name="Género" value="femenino" class="femenino" />Femenino<br />
         <input type="radio" name="Género" value="otro" class="otro" />Otro<br />
         <input type="submit" value="Enviar" class="enviar" action="https://medicine.cheeck.com/pagina.principal" />
      </form>
   </div>
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/165px-Tux.svg.png" class="cuadro-de-fondo"/>
</body>

Fíjate también que sería interesante que el div incluyera todo el formulario.

Espero que te haya servido de ayuda.

1
  • Hola @r4ziel gracias por tu respuesta, he probado tu código y me llevó el formulario para arriba y la imágen para abajo.
    – Alex
    el 17 jun. 2020 a las 4:15

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.