3

Tengo un formulario de acceso, hecho a base de otro, solo que desde 0. Este otro formulario tenía el footer debajo del todo (donde tiene que estar) Y aunque copiase todo igual, me sale según termina el formulario, y no al pie de página.

¿A que se debe esto?

Graficamente

Comparto mi código por si hay algo mal en él.

/* 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>

3
  • 1
    juraria que tendria que tener para ello en el css el footer "position: fixed;"
    – AgusBellas
    Commented el 13 mar. 2020 a las 12:09
  • 1
    Que error más tonto... Era eso, muchas gracias. Redacta una respuesta y la marco como aceptada :)
    – Lucía
    Commented el 13 mar. 2020 a las 12:10
  • 1
    En este enlace vas a ver las diferentes significados de cada uno de los tipos de 'position' que existen, es solo para que lo veas y lo puedas entender mejor. Espero te sirva.Como dicen anterioirmente el error es que falta ponerle position: fixed. Saludos. w3schools.com/cssref/… Commented el 13 mar. 2020 a las 12:24

2 respuestas 2

2

Tienes una propiedad bottom con un valor de 0 para indicar que no avance ninguna cantidad de pixeles, sin embargo esta solo funciona si viene precedida en la propiedad position de reglas css como:

* fixed
* absolute

Entonces la regla completa debería verse de esta forma:

position: fixed/absolute;
bottom: 0;

Lo anterior le indicará al elemento que no obedezca el orden regular de los elementos, que es quedarse en la posición que le toca de acuerdo con la ubicación de su tag y en cambio quedarse en 0 pixeles al fondo; es decir no avanzar nada hacia el top

Referencia

2

Te falta poner la etiqueta dentro del css del footer:

position:fixed; 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.