I have an access form, made based on another, only from 0. This other form had the footer below everything (where it should be) And even if I copied everything the same, it comes out as the form ends, and not at the bottom of page.
What is this about?
I share my code in case there is something wrong with it.
/* HEADER */
h2 {
text-align: center;
}
.logo {
width:200px;
height: 50px;
vertical-align: middle;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 85px;
background-color:#ff3333;
color:white;
display: table;
width: 100%;
text-align:left;
padding-left: 20px;
}
.header span{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
display: table-cell;
width: 100%;
text-align: center;
}
/* FOOTER */
#footer {
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: #171717;
color:#777766;
display: table;
width: 100%;
text-align:center;
overflow: hidden;
}
#footer span {
vertical-align:middle;
display: table-cell;
}
.back-to-top {
background: none;
margin: 0;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
z-index: 60;
display: none;
text-decoration: none;
color: #ffffff;
background-color: #171717;
}
.back-to-top i {
font-size: 60px;
}
/* FORMULARIO */
form {border: 3px solid #f1f1f1;}
.container {
padding: 16px;
}
legend {
font-size: 20px;
margin-left: 30px;
}
.imagenform {
text-align: center;
margin: 24px 0 12px 0;
}
img.imagenform {
width: 20px;
height: 20px;
border-radius: 50%;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=text]:hover, input[type=password]:hover {
border: 3px solid #ff3535;
}
span.psw {
float: right;
padding-top: 16px;
}
#logytel_acceso #login_password_errorloc #login_username_errorloc {
clear:both;
}
#logytel_acceso .error
{
font-family: Verdana, Arial, sans-serif;
font-size: 0.7em;
color: #900;
background-color : #ffff00;
}
button {
background-color: #b63f3f;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.short_explanation {
color: red;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
}
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="STYLESHEET" type="text/css" href="style/logytel_acceso.css">
<script type='text/javascript' src='scripts/gen_validatorv31.js'></script>
<link rel="STYLESHEET" type="text/css" href="style/pwdwidget.css" />
<script src="scripts/pwdwidget.js" type="text/javascript"></script>
</head>
<body>
<div class="header">
<div class="logo"><img src="images/Logo_logytel.png"></div>
<span><h2> Formulario Acceso</h2></span><br>
</div>
<h2>Login Form</h2>
<form action="login.php" method="post" accept-charset="ISO-8859-1">
<div class="imagenform">
<img src="https://btv.es/products/general/13920b_taco.png" alt="Avatar" class="imagenform">
</div>
<fieldset>
<legend>Acceder</legend>
<input type="hidden" name="submitted" id="submitted" value="1">
<div class="container">
<label for="username"><b>Username*:</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<span id="login_username_errorloc" class="error"></span>
<label for="password"><b>Password*:</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<span id="login_password_errorloc" class="error"></span>
<div class="short_explanation">* Required fields</div>
<button type="submit">Enter</button>
</div>
</fieldset>
</form>
<div id="footer">
<span>© Empresa 2020</span>
<a class="back-to-top" style="display: inline;" href="#">
<img src="images/back_to_top.png" alt="Back to Top">
</a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
You need to put the tag inside the footer css:
You have a property
bottom
with a value of 0 to indicate not to advance any amount of pixels, however this only works if it is preceded in the propertyposition
by css rules like:So the full rule should look like this:
The above will indicate to the element that it does not obey the regular order of the elements, which is to stay in the position that corresponds to it according to the location of its tag and instead stay at 0 pixels at the bottom; that is, do not advance anything towards the
top
Reference