Dimensionamento container login

**plaztinum** · 28-05-2018, 21:48

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 &copy
   </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>

**KillerWorm** · 30-05-2018, 23:16

Ciao, giusto una dritta, potresti applicare min-width e max-width per limitare la larghezza minima e massima per il contenitore del form e/o per i relativi campi input, in modo che non si riducano o allarghino troppo al variare della larghezza della finestra.
Fai qualche prova.

Discussione: Dimensionamento container login

Strumenti discussione

Ricerca discussione

Visualizza

Dimensionamento container login

Permessi di invio