0

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.

Imagen del problema: introducir la descripción de la imagen aquí

2
  • Ahora mismo te aparece al lado como esta en la imagen. Verdad?
    – Einer
    el 25 dic. 2017 a las 11:50
  • Así es. La imagen es el resultado final al pulsar BUSCAR dentro del div búsqueda. De inicio el div búsqueda se me centra perfectamente.
    – omaza1990
    el 25 dic. 2017 a las 11:52

1 respuesta 1

1

Crea un div que sea en contenedor de ambos divs y display:flex se encargara de posicionarlos ambos en el centro de la pantalla:

* {
	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;
}
#contenedor{
   width:100%;
  height:100%;
  margin:auto;
}


.sesion_cliente{
	position: absolute;
    top: 10px;
    right: 10px;
	float: right;	
	text-align: right;
}

.negrita{
	font-weight: bold;
	color: white;
}

a:link {
    color: white;
}

a:visited {
    color: red;
}


.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;
}


.form-link{
	font-size: 12px;
}

.mostrar_cabanas{
  background:red;
}
<!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 id="contenedor">
         <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">
          RESULTADO DE LA BUSQUEDA
        </div>
      </div>
    </body>
</html>

7
  • El problema que si elimino la propiedad display:flex, no se me centra el div de búsqueda... Y se me coloca centrado horizontalmente pero NO verticalmente.
    – omaza1990
    el 25 dic. 2017 a las 12:09
  • @omaza1990 Lo logras aplicandole la misma regla que el css del formulario. Acabo de editar la respuesta con los nuevos estilos del contenedor de los resultados.
    – Einer
    el 25 dic. 2017 a las 12:11
  • Me has entendido mal. No me refiero a centrar .mostrar_cabanas, sino a centrar el cuadro de RESERVAR, donde pide la fecha de entrada y fecha de salida. Ese formulario se me centra horizontalmente pero no verticalmente
    – omaza1990
    el 25 dic. 2017 a las 12:15
  • @omaza1990 Te fieres al texto dentro del fomulario que no salen centrados? Porque el div del form me aparece centrado verticalmente.
    – Einer
    el 25 dic. 2017 a las 12:18
  • No me refiero al CUADRO, al div "busqueda" que sale justo pegado al margen superior y no sale centrado en la página HTML.
    – omaza1990
    el 25 dic. 2017 a las 12:19

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.