My name is Bernardo and I am learning HTML5 from scratch,
Now I'm doing a basic exercise of making a form using semantic elements and I run into a problem: I do not know why the last two sections ("Reservation Management" and "Footer" do not appear below the one they should be ("Reservation Form").
Of the causes that I am thinking is that you should not use fieldsets and headers in the "Reservation Form" section, although I do not find it logical that it can not be done ...
What do you think?
Then in these two sections that I commented to you I would like to continue putting things
I leave the code to see if you find the cause,
Greetings and many thanks in advance,
<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>