Send an item below the whole in a div

Question

Send an item below the whole in a div

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I would like to know if there is any way to send an element below the whole of a div. It would be something of the style:

: last-child { float: left; }

But instead of left-right, it would be up-down.

This would be the current code:

html{
  background-color: #f2f2f2;
  margin: 0;
}

body{
    margin: 0;
    padding: 0;
}

nav{
    background-color: white;
    width: 100%;
}

.nonav{
    display: flex;
}

.lateral{
    background-color: #f2f2f2;
    border-right: 2px solid white;
    height: 100%;
}

.central{
    background-color: #f2f2f2;
    flex: 90%;
}

.logobar{
    height: 40px;
    margin: auto;
    display: flex;
}

.lateral a {
    background-color: #f2f2f2;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
    border-bottom: 2px solid white;
    text-align: center;

    font: 100 0.65em/1 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.lateral a:last-child{
    
}

.lateral a.active{
    background-color: #f695ad;
}

.lateral a:hover{
    background-color: lightgray;
}

<?php
	 	session_start();
	 	require 'conexion.php';
		use baseDeDatos\conexion as conexion;
	 	if($_SESSION['Tipo']!="0"){
	 		header("Location: index.php");
	 	}
 ?>
<html>
    <head>
    	<link rel="icon" href="resources/rfebmlogo.png">
 	    <title>Test Reglas de Juego</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" type="text/css" href="styles/administrador.css">
    </head>
    <body>
		<nav>
			<a href="mainpagearbitros.php"><img class="logobar" src="resources/logoleonpeque.png"></a>
			<!--a href="index.php"><img class="exit" src="resources/exit.png"></a-->
		</nav>
    	<div class="nonav">
			<div class="lateral">
				<a href="#" class="active">Home</a>
				<a href="#">Mis datos</a>
				<a href="#">Tests de reglamento</a>
				<a href="#">Estadísticas</a>
				<a href="#">Vídeo mensual</a>
				<a href="#">Cerrar sesión</a>
			</div>
			<div class="central">

			</div>
		</div>
    </body>
 </html>

And this what I intend to achieve (close session at the bottom):

If you are curious, for the image, what I did was put a margin of 470%, but that does not look the same on each computer. Greetings and thanks.

html css

asked by Pablo González 25.09.2018 в 20:27

source

2 answers

0

You could do something like this using the property justify-content: space-between.

Test Game Rules

<style>
    html{
      background-color: #f2f2f2;
      margin: 0;
    }

    body{
        margin: 0;
        padding: 0;
    }

    nav{
        background-color: white;
        width: 100%;
    }

    .nonav{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        position: fixed;
        height: 100%;
    }

    .lateral{
        background-color: #f2f2f2;
        border-right: 2px solid white;
        flex: 30%;

    }

    .central{
        background-color: #f2f2f2;
        flex: 60%;

    }

    .inferior{
        height: 20px;
        flex: 10%;

    }

    .logobar{
        height: 40px;
        margin: auto;
        display: flex;
    }

    .lateral a, .inferior a {
        background-color: #f2f2f2;
        color: black;
        display: block;
        padding: 12px;
        text-decoration: none;
        border-bottom: 2px solid white;
        text-align: center;

        font: 100 0.65em/1 'Raleway', sans-serif;
        color: rgba(0,0,0,.5);
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .lateral a:last-child{

    }

    .lateral a.active, .inferior a.active{
        background-color: #f695ad;
    }

    .lateral a:hover, .inferior a:hover{
        background-color: lightgray;
    }




</style>


<body>
    <nav>
        <a href="mainpagearbitros.php"><img class="logobar" src="resources/logoleonpeque.png"></a>
        <!--a href="index.php"><img class="exit" src="resources/exit.png"></a-->
    </nav>
    <div class="nonav">
        <div class="lateral">
            <a href="#" class="active">Home</a>
            <a href="#">Mis datos</a>
            <a href="#">Tests de reglamento</a>
            <a href="#">Estadísticas</a>
            <a href="#">Vídeo mensual</a>
        </div>
        <div class="central"></div>
        <div class="inferior">
            <a href="#">Cerrar sesión</a>
        </div>

    </div>
</body>

answered by 25.09.2018 в 21:01

Use Git in local network, with several collaborators Save a browser cached image

score 2 · Accepted Answer

This is the best I could. Use position: fixed and bottom:0 . It would stay like this:

html{
  background-color: #f2f2f2;
  margin: 0;
  height: 100%;
}

body{
    margin: 0;
    padding: 0;
    height: 100%
}

nav{
    background-color: white;
    width: 100%;
}

.nonav{
    display: flex;
    height: 100%;
}

.lateral{
    background-color: #f2f2f2;
    border-right: 2px solid white;
    height: 100%;
}

.central{
    background-color: #f2f2f2;
    flex: 90%;
}

.logobar{
    height: 40px;
    margin: auto;
    display: flex;
}

.lateral a {
    background-color: #f2f2f2;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
    border-bottom: 2px solid white;
    text-align: center;

    font: 100 0.65em/1 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.lateral a:last-child{
    bottom: 0px;
    left: 15px;
    position: fixed;
}

.lateral a.active{
    background-color: #f695ad;
}

.lateral a:hover{
    background-color: lightgray;
}

<html>
    <head>
    	<link rel="icon" href="resources/rfebmlogo.png">
 	    <title>Test Reglas de Juego</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" type="text/css" href="styles/administrador.css">
    </head>
    <body>
		<nav>
			<a href="mainpagearbitros.php"><img class="logobar" src="resources/logoleonpeque.png"></a>
			<!--a href="index.php"><img class="exit" src="resources/exit.png"></a-->
		</nav>
    	<div class="nonav">
			<div class="lateral">
				<a href="#" class="active">Home</a>
				<a href="#">Mis datos</a>
				<a href="#">Tests de reglamento</a>
				<a href="#">Estadísticas</a>
				<a href="#">Vídeo mensual</a>
				<a href="#">Cerrar sesión</a>
			</div>
			<div class="central">

			</div>
		</div>
    </body>
 </html>