Buonagiorno/buonasera.
Sono qui per chiedervi una mano per un progetto di esame che sto portando. Il titolo dice già tutto. In pratica quando vado a ridimensionare la finestra, il footer della pagine si sovrappone ad una scritta, e ciò non è gradevole da vedere. Qui di seguito vi lascio i codici html e css e relativa immagine che descrive meglio la mia situazione. Grazie per la vostra attenzione.
codice html:
codice HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>TES s.p.a</h1>
<form name = "login" method = "GET" action="test.php">
<p><input type="text" placeholder="username o email" name = "email" size = 20></br></br>
<input type="password" placeholder="password" name = "password" ssize = 20></br></br>
<button class = "button" type="submit">login</button></p></form>
<h2>non hai un account? registrati ora.</h2>
<div class="footer">
dashboard ©.
</div>
</body>
</html>
codice CSS:
codice:
h1{color:#66b3ff; text-align:center; font-size: 60px;}
h2{text-align: center; font-size: 30px }
/*body {
background: url('sfondo1.png');
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}*/
html {
background: url('sfondo1.png') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {text-align: center;}
input[type=text] {
width: 20%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;}
input[type=password] {
width: 20%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
border-radius: 13px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
immagine:
errore1.png