Positioning div - CSS

Question

Positioning div - CSS

Navigation

#1 by (1 votes)

0

I want a div to be placed in the upper right margin of the page but not to untick the other div that should be centered on the whole page. That is, a div to "greet the user" on the top right, and a div "book" in the center of the page.

When I include the div of "to greet the user", the one of "reserve" is misplaced.

What happens? CSS Code:

* {
    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;
}

.sesion_cliente{
    margin: auto;
    padding: 5px;
    background: #F3F3F3;
    text-align: right;
    border: 1px solid rgba(0,0,0,0.2);
}


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

PHP Code:

<?php
//Iniciar una nueva sesión o reanudar la existente.
session_start();
//Si existe la sesión "cliente"..., la guardamos en una variable.
if (isset($_SESSION['cliente'])){
    $cliente = $_SESSION['cliente'];
}
?>

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Reservar</title>
        <link rel="stylesheet" href="css/estilos_reservar.css">
    </head>

    <body background="imagenes/fondo_campo1.jpg">
        <div class="sesion_cliente">
            <?php 
            //Si existe la sesión "cliente"...
            if(isset($_SESSION['cliente'])){
                echo "Bienvenido ".$cliente."&nbsp;&nbsp;";
                echo "<a href='reservar.php?salir=1'>Salir</a>";
                //Si existe y hemos pulsado el link "Salir"...
                if(isset($_REQUEST["salir"])){
                    //Borramos o destruimos la sesión "cliente".
                    unset($_SESSION["cliente"]);
                    //Redireccionamos a la página "iniciar_sesion_cliente.php" en 0 segundos.
                    header("Refresh:0; url=iniciar_sesion_cliente.php");
                }
            }
            ?>
        </div>

        <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>
    </body>
</html>

html css div

asked by omaza1990 24.12.2017 в 11:50

source

1 answer

Positioning divs CSS How can I pass two arguments with props in React?

score 1 · Accepted Answer

It is enough that the div of class "session_client" gives you an absolute positioning (position:absolute) to be placed on the top right, this way you will not only get it in that position but also as it leaves the normal flow of the page, will not be able to disturb the other div and that will simply ignore it.

In the css the class "session_client" will be as follows:

.sesion_cliente{

    /*Codigo añadido*/
    position: absolute;
    top: 10px;
    right: 10px;
    /*---------------*/
    padding: 5px;
    background: #F3F3F3;
    text-align: right;
    border: 1px solid rgba(0,0,0,0.2);
}

The rest you leave as it was