0

Mi nombre es Bernardo y ando aprendiendo HTML5 desde cero,

Ahora estoy haciendo un ejercicio básico de hacer un formulario mediante elementos semánticos y me encuentro con un problema: no sé por qué las dos últimas secciones ("Gestión de reserva" y "Pie de página" no me aparecen debajo de la que deberían estar ("Formulario de Reserva").

De las causas que barajo es que no debería usar fieldsets y cabeceras en la sección "Formulario de Reserva", aunque no le encuentro mucha lógica a que no se pueda hacer...

¿qué opináis?

Luego en estas dos secciones que os comento querría seguir metiendo cosas

Os dejo el código a ver si encontráis la causa,

Un saludo y muchas gracias de antemano,

    <html>
    
    <head>
        <title>Playas Reservas</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            *{
                margin: 0;
            }
            
            #cabeceraDelDocumento{
                width: 100%;
                height: 40px;
                background-color: aquamarine;
                text-align: center;
            }
            
            #menuHorizontal{
                width: 100%;
                height: 35px;
                background-color: azure;
            }
            
            /*Los elementos dentro del #menuHorizontal del tipo <a> hacemos que tengan un determinado
            formato. Esto es un anclaje de elementos*/
            #menuHorizontal > a{
                margin-left: 20px;
                margin-top: 10px;
                display: inline-block;
            }
            
            #menuVertical{
                width: 15%;
                background-color: beige;
                height: 200px;
                float: left;
            }
            
            #playasInfo{
                width: 85%; /*para que ocupe el 70% de la pantalla y permita tener elementos al lado*/
                height: 200px;
                float: left;
            }
            
            iframe{
                position: relative;
                border:none;
                overflow: hidden;
                height: 200px;
                width: 100%;
            }
            
            #formularioReserva{
                width: 85%; /*para que ocupe el 70% de la pantalla y permita tener elementos al lado*/
                height: 270px; /*270px;*/
                float: left;
                margin-left: 129px;
            }
            
            #gestionReserva{
                width: 85%;
                height: 22px;
                float: left;
                margin-left: 129px;
            }
            
            #pieDePagina{
                width: 85%;
                height: 5px;
                float: left;
                margin-left: 129px;
            }
            
        </style>
        
    </head>
    
    
    <body>
        <!--Solución del profesor al problema 1 sobre un formulario de reservas de playas.
        Se utiliza un elemento iframe para mostrar cada una de las playas-->
        
        <header id="cabeceraDelDocumento">
            <h1>Reserva en Playas de España</h1>
        </header>
        
        <!--Barra de navegación: los vamos a poner como enlaces, por eso ponemos ancla y href-->
        <nav id="menuHorizontal">
            <a href="#menuVertical">Playas</a>
            
            <!--El siguiente enlace queda por hacer: TODO "COMPLETAR EL LINK SIGUIENTE CON EL ID DE LA 
            SESIÓN DESTINADA A LA GESTIÓN DE RESERVAS, ES DECIR, DONDE APARECE LA TABLA"-->
            <a href="">Gestionar Reservas</a>
        </nav>
        
        <nav id="menuVertical">
            <h3>Playas Disponibles</h3> <!--Las ponemos en una lista no ordenada -->
            <ul>
                <li><a href="playa1.html" target="iframeContainer">Playa 1</a></li>
                <li><a href="playa2.html" target="iframeContainer">Playa 2</a></li>
                <li><a href="playa3.html" target="iframeContainer">Playa 3</a></li>
                <li><a href="playa4.html" target="iframeContainer">Playa 4</a></li>
                <li><a href="playa5.html" target="iframeContainer">Playa 5</a></li>
            </ul>    
        </nav>
        
        <section id="playasInfo">
            <iframe seamless src="playa1.html" name="iframeContainer" 
                    sandbox=""></iframe>
        </section>
        
        <!--Sección del formulario de reserva-->
        <section id="formularioReserva">
        <fieldset>
        <h2>Formulario de Reserva</h2>
         
                <label for="reserveSuPlaya">Reserve su Playa</label>
                <input list="playas" name="playas">
                    <datalist id="playas">
                        <option value="Playa 1">
                        <option value="Playa 2">
                        <option value="Playa 3">
                        <option value="Playa 4">
                        <option value="Playa 5">
                    </datalist>
                
                <fieldset>
                <h3>Datos Personales</h3>
                <h4>Nombre y Apellidos</h4>
                <form method="GET" action="index.html" name="datosPersonales">
                    <label for="nombre">Nombre: </label>
                    <input id="nombre" 
                           type="text" 
                           name="nombreDelCliente" 
                           placeholder="Escriba su nombre" required>
                    
                    <label for="apellido1">Primer Apellido: </label>
                    <input id="apellido1" 
                           type="text" 
                           name="apellido1DelCliente" 
                           placeholder="Escriba su apellido" required>
                    
                    <label for="apellido2">Segundo Apellido: </label>
                    <input id="apellido2" 
                           type="text" 
                           name="apellido2DelCliente" 
                           placeholder="Escriba su apellido" required>
                    
                    <h4>Identificación</h4>
                    <label for="identificacion">Seleccione tipo de documento:</label>
                    
                    <label for="dni">DNI: </label>
                    <input type="radio" 
                           name="identifDNINIE" 
                           value="DNI" 
                           id="identificacionDNI" checked>
                    
                    <label for="nie">NIE: </label>
                    <input type="radio" 
                           name="identifDNINIE" 
                           value="NIE" 
                           id="identificacionNIE" checked>
                    
                    <label for="numeroDocumento">Número del documento: </label>
                    <input id="numeroDocumento" 
                           type="text" 
                           name="numeroDocumento" 
                           placeholder="Escriba su documento" required>
                    
                    <h4>Teléfono</h4>
                    <label for="telefonoMovil">Teléfono móvil: </label>
                    <input id="telefonoMovil" 
                           type="number" 
                           name="telefonoMovil" 
                           placeholder="Número móvil" required>
                    
                    <label for="telefonoFijo">Teléfono fijo: </label>
                    <input id="telefonoFijo" 
                           type="number" 
                           name="telefonoFijo" 
                           placeholder="Número fijo">
                    
                    <h4>Correo electrónico</h4>
                    <label for="correoElectronico">Correo Electrónico: </label>
                    <input id="correoElectronico" 
                           type="email" 
                           name="correoElectronico" 
                           placeholder="Correo Electrónico" required>
                 </fieldset>
                
                <fieldset>   
                    <h4>Datos de llegada</h4>
                    <label for="fechaEntrada">Fecha de Entrada: </label>
                    <input id="fechaEntrada" 
                           type="date" 
                           name="fechaEntrada" 
                           placeholder="Introduzca la fecha de entrada" required>
                    
                    <label for="horaEntrada">Hora de entrada: </label>
                    <input id="horaEntrada" 
                           type="time" 
                           name="horaEntrada" 
                           placeholder="Introduzca hora de ingreso">
                    <br>
                    
                    <label for="fechaSalida">Fecha de salida: </label>
                    <input id="fechaSalida" 
                           type="date" 
                           name="fechaSalida" 
                           placeholder="Introduzca la fecha de salida" required>
                </fieldset>
                    
                <fieldset>
                    <h4>Otros datos</h4>
                    <h5>Hijos menores de edad</h5>
                    <label for="hijosMenores">¿Tiene hijos menores?: </label>
                    
                    <label for="afirmativo1">Sí: </label>
                    <input type="radio" 
                           name="afirmNegativo1" 
                           value="Sí" 
                           id="afirmativo1" checked>
                    
                    <label for="negativo1">No: </label>
                    <input type="radio" 
                           name="afirmNegativo1" 
                           value="No" 
                           id="negativo1" checked>
                    
                    <label for="numeroHijos">¿Cuántos?: </label>
                    <input id="numeroHijos" 
                           type="number" 
                           name="numeroHijos" 
                           placeholder="Introduzca número menores de edad">
                    <br>
                    
                    <h5>Animales de compañía</h5>
                    <label for="animalesCompañía">Va a ir con animales de compañía?: </label>
                    <label for="afirmativo2">Sí: </label>
                    <input type="radio" 
                           name="afirmNegativo2" 
                           value="Sí" 
                           id="afirmativo2" checked>
                    
                    <label for="negativo2">No: </label>
                    <input type="radio" 
                           name="afirmNegativo2" 
                           value="No" 
                           id="negativo2" checked>
                    
                    <label for="indicarAnimal">Indicar animal de compañía: </label>
                    <input list="animalesCompañía" name="animalesCompañía">
                    <datalist id="animalesCompañía">
                        <option value="Perro">
                        <option value="Gato">
                        <option value="Otros">
                    </datalist>
                    <p><b>NOTA: Se hará precio adicional en caso de perro de raza peligrosa y animal exótico</b></p>
                </fieldset>    
                    
                    <input type="submit" value="Enviar formulario">     
                </fieldset>
        </section>
        
        <!--Sección para la gestión de la reserva-->
        <section id="gestionReserva">
            <!--De momento es una tabla vacía-->
            <h3>Gestión de Reservas</h3>
            
        </section>
        
        
        <!--Pie de página-->
        <footer id="pieDePagina">
            <p>Información de contacto,
                    a través de un mapa Google, etc.</p>
        </footer>
        
    </body>
    
    
    </html>

1 respuesta 1

1

Estás 'forzando' a que el ID #formularioReserva tenga un height especifico de 270px, haciendo que se sobreponga los demás elementos por que aunque tu 'fuerces' el height a un valor especifico sigue habiendo información que quieres mostrar, y el navegador lo que hace es mostrarlo como pueda, y por eso se sobre encima.

Lo único que tienes que hacer es quitar en tu CSS en #formularioReserva el height y listo.

<html>

<head>
    <title>Playas Reservas</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        *{
            margin: 0;
        }

        #cabeceraDelDocumento{
            width: 100%;
            height: 40px;
            background-color: aquamarine;
            text-align: center;
        }

        #menuHorizontal{
            width: 100%;
            height: 35px;
            background-color: azure;
        }

        /*Los elementos dentro del #menuHorizontal del tipo <a> hacemos que tengan un determinado
        formato. Esto es un anclaje de elementos*/
        #menuHorizontal > a{
            margin-left: 20px;
            margin-top: 10px;
            display: inline-block;
        }

        #menuVertical{
            width: 15%;
            background-color: beige;
            height: 200px;
            float: left;
        }

        #playasInfo{
            width: 85%; /*para que ocupe el 70% de la pantalla y permita tener elementos al lado*/
            height: 200px;
            float: left;
        }

        iframe{
            position: relative;
            border:none;
            overflow: hidden;
            height: 200px;
            width: 100%;
        }

        #formularioReserva{
            width: 85%; /*para que ocupe el 70% de la pantalla y permita tener elementos al lado*/
             /*270px;*/
            float: left;
            margin-left: 129px;
        }

        #gestionReserva{
            width: 85%;
            height: 22px;
            float: left;
            margin-left: 129px;
        }

        #pieDePagina{
            width: 85%;
            height: 5px;
            float: left;
            margin-left: 129px;
        }

    </style>

</head>


<body>
    <!--Solución del profesor al problema 1 sobre un formulario de reservas de playas.
    Se utiliza un elemento iframe para mostrar cada una de las playas-->

    <header id="cabeceraDelDocumento">
        <h1>Reserva en Playas de España</h1>
    </header>

    <!--Barra de navegación: los vamos a poner como enlaces, por eso ponemos ancla y href-->
    <nav id="menuHorizontal">
        <a href="#menuVertical">Playas</a>

        <!--El siguiente enlace queda por hacer: TODO "COMPLETAR EL LINK SIGUIENTE CON EL ID DE LA 
        SESIÓN DESTINADA A LA GESTIÓN DE RESERVAS, ES DECIR, DONDE APARECE LA TABLA"-->
        <a href="">Gestionar Reservas</a>
    </nav>

    <nav id="menuVertical">
        <h3>Playas Disponibles</h3> <!--Las ponemos en una lista no ordenada -->
        <ul>
            <li><a href="playa1.html" target="iframeContainer">Playa 1</a></li>
            <li><a href="playa2.html" target="iframeContainer">Playa 2</a></li>
            <li><a href="playa3.html" target="iframeContainer">Playa 3</a></li>
            <li><a href="playa4.html" target="iframeContainer">Playa 4</a></li>
            <li><a href="playa5.html" target="iframeContainer">Playa 5</a></li>
        </ul>    
    </nav>

    <section id="playasInfo">
        <iframe seamless src="playa1.html" name="iframeContainer" 
                sandbox=""></iframe>
    </section>

    <!--Sección del formulario de reserva-->
    <section id="formularioReserva">
      <fieldset>
        <h2>Formulario de Reserva</h2>

            <label for="reserveSuPlaya">Reserve su Playa</label>
            <input list="playas" name="playas">
                <datalist id="playas">
                    <option value="Playa 1">
                    <option value="Playa 2">
                    <option value="Playa 3">
                    <option value="Playa 4">
                    <option value="Playa 5">
                </datalist>

            <fieldset>
            <h3>Datos Personales</h3>
            <h4>Nombre y Apellidos</h4>
            <form method="GET" action="index.html" name="datosPersonales">
                <label for="nombre">Nombre: </label>
                <input id="nombre" 
                       type="text" 
                       name="nombreDelCliente" 
                       placeholder="Escriba su nombre" required>

                <label for="apellido1">Primer Apellido: </label>
                <input id="apellido1" 
                       type="text" 
                       name="apellido1DelCliente" 
                       placeholder="Escriba su apellido" required>

                <label for="apellido2">Segundo Apellido: </label>
                <input id="apellido2" 
                       type="text" 
                       name="apellido2DelCliente" 
                       placeholder="Escriba su apellido" required>

                <h4>Identificación</h4>
                <label for="identificacion">Seleccione tipo de documento:</label>

                <label for="dni">DNI: </label>
                <input type="radio" 
                       name="identifDNINIE" 
                       value="DNI" 
                       id="identificacionDNI" checked>

                <label for="nie">NIE: </label>
                <input type="radio" 
                       name="identifDNINIE" 
                       value="NIE" 
                       id="identificacionNIE" checked>

                <label for="numeroDocumento">Número del documento: </label>
                <input id="numeroDocumento" 
                       type="text" 
                       name="numeroDocumento" 
                       placeholder="Escriba su documento" required>

                <h4>Teléfono</h4>
                <label for="telefonoMovil">Teléfono móvil: </label>
                <input id="telefonoMovil" 
                       type="number" 
                       name="telefonoMovil" 
                       placeholder="Número móvil" required>

                <label for="telefonoFijo">Teléfono fijo: </label>
                <input id="telefonoFijo" 
                       type="number" 
                       name="telefonoFijo" 
                       placeholder="Número fijo">

                <h4>Correo electrónico</h4>
                <label for="correoElectronico">Correo Electrónico: </label>
                <input id="correoElectronico" 
                       type="email" 
                       name="correoElectronico" 
                       placeholder="Correo Electrónico" required>
             </fieldset>

            <fieldset>   
                <h4>Datos de llegada</h4>
                <label for="fechaEntrada">Fecha de Entrada: </label>
                <input id="fechaEntrada" 
                       type="date" 
                       name="fechaEntrada" 
                       placeholder="Introduzca la fecha de entrada" required>

                <label for="horaEntrada">Hora de entrada: </label>
                <input id="horaEntrada" 
                       type="time" 
                       name="horaEntrada" 
                       placeholder="Introduzca hora de ingreso">
                <br>

                <label for="fechaSalida">Fecha de salida: </label>
                <input id="fechaSalida" 
                       type="date" 
                       name="fechaSalida" 
                       placeholder="Introduzca la fecha de salida" required>
            </fieldset>

            <fieldset>
                <h4>Otros datos</h4>
                <h5>Hijos menores de edad</h5>
                <label for="hijosMenores">¿Tiene hijos menores?: </label>

                <label for="afirmativo1">Sí: </label>
                <input type="radio" 
                       name="afirmNegativo1" 
                       value="Sí" 
                       id="afirmativo1" checked>

                <label for="negativo1">No: </label>
                <input type="radio" 
                       name="afirmNegativo1" 
                       value="No" 
                       id="negativo1" checked>

                <label for="numeroHijos">¿Cuántos?: </label>
                <input id="numeroHijos" 
                       type="number" 
                       name="numeroHijos" 
                       placeholder="Introduzca número menores de edad">
                <br>

                <h5>Animales de compañía</h5>
                <label for="animalesCompañía">Va a ir con animales de compañía?: </label>
                <label for="afirmativo2">Sí: </label>
                <input type="radio" 
                       name="afirmNegativo2" 
                       value="Sí" 
                       id="afirmativo2" checked>

                <label for="negativo2">No: </label>
                <input type="radio" 
                       name="afirmNegativo2" 
                       value="No" 
                       id="negativo2" checked>

                <label for="indicarAnimal">Indicar animal de compañía: </label>
                <input list="animalesCompañía" name="animalesCompañía">
                <datalist id="animalesCompañía">
                    <option value="Perro">
                    <option value="Gato">
                    <option value="Otros">
                </datalist>
                <p><b>NOTA: Se hará precio adicional en caso de perro de raza peligrosa y animal exótico</b></p>
            </fieldset>    

                <input type="submit" value="Enviar formulario">     
      </fieldset>
    </section>

    <!--Sección para la gestión de la reserva-->
    <section id="gestionReserva">
        <!--De momento es una tabla vacía-->
        <h3>Gestión de Reservas</h3>

    </section>


    <!--Pie de página-->
    <footer id="pieDePagina">
        <p>Información de contacto,
                a través de un mapa Google, etc.</p>
    </footer>

</body>


</html>

Tu Respuesta

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

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