Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Dimensionamento container login

    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>
    Ultima modifica di plaztinum; 28-05-2018 a 22:37

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,676
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.