Dispongo de un div
búsqueda y quiero tener otro div
mostrar_cabañas. Deseo que en el formulario, cual está dentro de búsqueda, si pulsamos Buscar se nos abra/cargue el div
mostrar_cabañas y que éste aparezca debajo del div
búsqueda con un pequeño espacio entra ambos divs
...
¿Cómo coloco un div debajo de otro div con css?
Deseo que coloque cada cabana dentro de un div
a su vez, cual div
contendrá nombre de la cabaña, imágenes y sus opiniones.
Código HTML/PHP:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Reservar</title>
</head>
<body background="imagenes/fondo_campo1.jpg">
<div class="busqueda">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="mibusqueda" id="mibusqueda" method="POST" class="form_buscar">
<h2>RESERVAR</h2>
<label for="check_in"><b>Entrada:</b></label>
<input type="text" placeholder="Fecha de entrada" name="check_in" id="check_in" value="<?php if(isset($_POST['check_in'])){ echo $_POST['check_in']; }?>">
<label for="check_out"><b>Salida:</b></label>
<input type="text" placeholder="Fecha de salida" name="check_out" id="check_out" onchange="calculoNoches();" value="<?php if(isset($_POST['check_out'])){ echo $_POST['check_out']; }?>" disabled>
<div align="center">
<input type="submit" value="Buscar" name="buscar" id="buscar"><br/>
</div>
</form>
</div>
<br/><br/><br/><br/>
<div class="mostrar_cabanas">
<!--Código si hemos pulsado el botón Buscar...-->
</div>
</div>
</body>
</html>
Código CSS:
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body{
/*background: #DEDEDE;*/
display: flex; /*Centrado en la página tanto vertical como horizontal.*/
min-height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed; /*Imagen de fondo no se vaya con el scroll de la página.*/
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
.busqueda{
margin: auto;
width: 50%;
max-width: 500px;
background: #F3F3F3;
padding: 18px;
border: 2px solid rgba(0,0,0,0.2);
}
h2{
text-align: center;
margin-bottom: 20px;
color: rgba(0,0,0,0.5);
}
input{
display: block;
padding: 10px;
width: 100%;
margin: 30px 0;
font-size: 14px;
}
input[type="submit"] {
background: linear-gradient(#FFDA63, #FFB940);
border: 0;
width: 160px;
color: brown;
opacity: 0.8;
cursor: pointer;
border-radius: 20px;
margin-bottom: 0;
}
De inicio el div
búsqueda se me centra en toda la página (TODO OK), cuando pulso "Buscar", me salen todas las cabañas disponibles pero al lado del div
búsqueda y se me descentra todo.
Solución posible:
1) Lo que quiero es que al pulsar button
BUSCAR, se nos genere el div
mostrar_cabanas pero DEBAJO del div
búsqueda.
2) Tengo de fondo una imagen para toda la página (incorporada en el body
), ¿cómo haría independiente la imagen de fondo a la imagen de fondo de los divs
mostrar_cabanas? Es decir, que el div
mostrar_cabanas tenga el fondo blanco para poder visualizar bien los datos.