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

    problemi di visualizzazione con ridimensionamento finestra

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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, se vuoi mantenere fisso un elemento rispetto alla finestra puoi usare position:fixed; piuttosto che absolute.
    Prova quindi a modificare questa proprietà per .footer.

    Noto che confondere questi due valori sembra un errore abbastanza frequente; proprio qualche giorno fa ho spiegato grossomodo la differenza ad un altro utente che è incappato nello stesso tuo "equivoco". Se può esserti utile, vedi qui.

    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Ti ringrazio, hai risolto il mio problema.Però ora mi piacerebbe che il footer fosse a fine pagina, perchè quando ridimensiono è fisso lì. Siccome sotto la scritta "registrati ora" vorrei aggiungere tra quadrati uno accanto all'altro che, diciamo, diano il senso di affidabilità del servizio, però questo poco interessa.
    Quindi come lo posso mettere sotto e tenerlo lì senza che rimanga fisso anche quando ridimensiono l'immagine?

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Non ho capito granché, puoi spiegare meglio. Se possibile, puoi linkare qualche sito da esempio dove è possibile vedere ciò che vorresti fare?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    si scusami, mi sono accorto ora che non mi sono spiegato bene
    In pratica la barra quando faccio su e gi� per pagina, anche lei sale e rimane sempre l� fissa.
    se provi il codice (correggendo l' errore di prima), e scrolli su e giù per la pagina, ti accorgerai che la barra rimane lì. Invece vorrei che il footer fosse proprio in fondo alla pagina.

    ps: ho sbagliato immagine
    Immagini allegate Immagini allegate
    Ultima modifica di plaztinum; 20-05-2018 a 14:26

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Quote Originariamente inviata da plaztinum
    se provi il codice (correggendo l' errore di prima), e scrolli su e giù per la pagina, ti accorgerai che la barra rimane lì. Invece vorrei che il footer fosse proprio in fondo alla pagina.
    Ok, allora avevo frainteso fin dall'inizio, non considerare la mia prima risposta, il position:fixed non ti serve in questo caso ma è più opportuno absolute, come appunto avevi fatto.
    Usando absolute dovrai chiaramente fare degli accorgimenti per correggere alcune problematiche che in parte riguardano il problema iniziale da te lamentato, ma non solo.

    Una soluzione potrebbe essere questa (regole da aggiungere/rimpiazzare nei selettori già presenti nel tuo codice):
    codice:
    html{
       height: 100%;              /* Garantisce che il tag html si estenda sempre per tutta l'area della finestra e non in base ai contenuti */
    }
    
    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 */
    }
    
    .footer {
       position: absolute;        /* Posiziona il footer in modo assoluto, sempre in fondo alla pagina, cioè rispetto al body */
       bottom: 0;
    }
    Tutti i dettagli del funzionamento sono riportati nei commenti; se hai comunque qualche dubbio, chiedi pure.

    Buon proseguimento e un in-bocca-al-lupo per l'esame.



    PS: occhio, nel tuo codice ci sono vari errori che lo rendono non valido. Un codice non valido potrebbe restituire una visualizzazione non corretta del layout. Consiglio di utilizzare sempre un validatore per controllare e correggere tutti gli eventuali errori presenti nei propri elaborati (vedi questo).
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #7
    Mi hai aiutato molto, grazie mille.
    Mi potresti spiegare in che senso il codice non è valido? Inoltre quale codice è errato? Il CSS o l'HTML?

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Mi hai aiutato molto, grazie mille.
    Figurati

    Mi potresti spiegare in che senso il codice non è valido? Inoltre quale codice è errato? Il CSS o l'HTML?
    Nello specifico ci sono errori di sintassi nel codice HTML. Puoi verificare tu stesso. Vedi il link che ho postato; quello è uno dei vari validatori disponibili online; puoi copiare e incollare l'intero tuo codice nel text input di quel validatore e cliccare su check; ti verrà restituito il risultato dell'analisi con tutti gli eventuali errori e relativi dettagli. A quel punto non dovrai fare altro che correggerli sul tuo codice (o cercare di farlo). Se trovi difficoltà su qualche particolare errore per il quale non riesci a comprendere come fixarlo, puoi fare intanto qualche ricerca online o, male che vada, puoi rivolgerti qui sul forum, aprendo un'opportuna discussione.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #9
    si ho verificato su quel sito e ho notato che ho fatto degli errori anche abbastanza banali
    colgo l'occasione per ringraziarti ancora

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.