Buongiorno/buonasera.
Nella realizzazione del mio sito, ho realizzato un pagina per il login, però sono dubbioso sulle dimensioni. Perchè quando è a schermo intero si vede anche bene, però quando ridimensiono la finestra si vede male, e non vorrei avere questo effetto. Inoltre credo che il container del login sia troppo sovradimensionato perchè vorrei realizzare una cosa simile a questa (senza javascript o effetti particolari, diciamo la versiona di base.)
link: https://colorlib.com/wp/template/login-form-v14/
o anche simile a questo: https://www.w3schools.com/howto/tryi...css_login_form
vi posto qui di seguito i codici css e html/php della mia pagina
codice:
<!DOCTYPE html>
<html lang="it">
<head>
<title>TES</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="tes-ico(1).ico" />
</head>
<body>
<div class ="header">
<div class="headerContent">
<img src="tes-logo.png">
</div>
<div class="header-right">
<a class="active" href="testmatu.html">Home</a>
<a href="#contact">Contatti</a>
<a href="#about">Info</a>
</div>
</div><br><br><br>
<form name = "login" method = "POST" action="#myTESpage">
<div class ="container">
<div class="imgcontainer">
<img src="avatar.png" alt="Avatar" class="avatar">
</div>
<p>
<input type="text" placeholder="username o email" name = "email" size = 20 required><br/><br/>
<input type="password" placeholder="password" name = "password" size = 20 required><br/><br/>
<button class = "button" type="submit">login</button>
</p>
<a href="form.php"><h2>non hai un account? registrati ora.</h2></a>
</div>
</form>
<br/><br/>
<div class="footer">
Developed by TES spa. All rights reserved ©
</div>
</body>
</html>
codice:
@font-face{
src: url(font/Montserrat-ExtraLight.ttf);
font-family: montserratblack;
}
h2{
text-align: center;
font-size: 15px;
}
.header{
width: 100%;
background-color: rgba(255, 255, 255, 0.6);
overflow: hidden;
}
.headerContent{
float: left;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.header-right {
padding: 5px;
float: right;
}
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a{
color:black;
}
body {
display: inline-block; /* Serve a far collassare i magini dei contenuti adiacenti ai limiti del body, i quali influirebbero altrimenti sullo stesso body */
position: relative; /* Blocca il riferimento dei contenuti con position absolute anche durante lo scroll della pagina */
width: 100%; /* Con inline-block la larghezza è relativa ai contenuti, quindi è necessario estenderla per l'intera larghezza della finestra */
min-height: 100%; /* Estende l'altezza del body per tutta la finestra anche se ci sono pochi contenuti, evitando che in tal caso il .footer si porti in mezzo alla pagina */
margin: 0; /* Rimuove i margini di default per ottenere un corretto dimensionamento */
padding: 0;
font-family: montserratblack;
}
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;
height: 100%; /* Garantisce che il tag html si estenda sempre per tutta l'area della finestra e non in base ai contenuti */
margin: 0; padding: 0;
}
p {
text-align: center;
}
input[type=text], input[type=password] {
width: 50%;
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;}
/*.container {
padding: 50px;
background-color: #f2f2f2;
margin-right: auto;
margin-left: auto;
height: 50%;
width: 50%;
border: 1px solid #ccc;
border-radius: 4px;
}*/
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 10%;
border-radius: 50%;
}
.container {
/*margin-right: auto;
margin-left: auto;*/
padding: 30px;
margin: 0 auto;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
}
.button {
background-color: #4286f4;
border: none;
color: white;
padding: 20px 70px;
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; /* Posiziona il footer in modo assoluto, sempre in fondo alla pagina, cioè rispetto al body */
bottom: 0;
left: 0;
width: 100%;
background-color: grey;
color: white;
text-align: center;
padding: 15px;
box-sizing: border-box;
}
come posso risolvere? Grazie per l'attenzione.
RE: ho aggiornato i codici, però adesso nell'header se ridimenisiono la pagina viene un pasticcio, e il container è troppo vicino al footer e sono stato costretto a mettere dei <br>