problema dimensionamento header

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

Buongiorno/buonasera.

Come da titolo ho un problema nel ridimensionare l'header della mia pagina, anche se ho messo che la larghezza debba occupare il 100%. Ho provato in molti modi ma purtroppo non sono riuscito a risolvere. Spero in un vostro aiuto. Qui di seguito lascio codici HTML e CSS:

HTML:

codice HTML:

<!DOCTYPE html>
<html lang="it">
<head>
    <title>TES</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class ="header">
    <div class="headerContent">
        TES s.p.a
    </div>
</div><br><br><br><br>
 <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" size = 20><br/><br/>
     <button class = "button" type="submit">login</button>
    </p>
 </form>
    <h2>non hai un account? registrati ora.</h2><br/>
    <div class="footer">
           Developed by TES spa. All rights reserved &copy
   </div>
</body>
</html>

CSS:

codice:

  h2{text-align: center; font-size: 30px }
    
  .header{
    background-color: grey;
    }

.headerContent{
  font-size: 50px;
  font-weight: bold;

  }

    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 */
         }
    
   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 */

   }
        
    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: 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;
 }

grazie per l'interessamento.

**KillerWorm** · 22-05-2018, 00:42

Ciao, da ciò che hai indicato e dal codice (che ho testato) non è chiaro a cosa ti riferisci esattamente. Sarebbe utile chiarire quale è il risultato che ottieni e quale invece quello che ti aspetti.

anche se ho messo che la larghezza debba occupare il 100%

Sul tuo codice non vedo particolari regole applicate per il dimensionamento di .header ma ad ogni modo, essendo un div (quindi un elemento block), questo di norma va ad estendersi già al 100% della larghezza disponibile.

Quello che invece noto, testando il tuo codice, è un "sovradimensionamento" di .footer in cui effettivamente hai applicato un width:100% ma risulta più largo del suo contenitore e del body stesso e quindi viene mostrata la barra di scorrimento orizzontale della pagina. E' forse questo il problema?

In qualunque caso è utile sapere che tale comportamento è dato dall'algoritmo di elaborazione del box model CSS che normalmente esclude il valore di padding e border dal calcolo delle dimensioni di un qualsiasi elemento. Tu infatti hai applicato un padding:15px che appunto crea un eccesso di 30px sulla larghezza totale di .footer (cioè 100% della larghezza del genitore più 15px a sinistra e altri 15px a destra).

Questo fattore è comunque una nozione di base del CSS riguardo il box model. Per ulteriori informazioni su tale argomento posso consigliarti questa guida:
http://www.html.it/pag/19463/box-sizing/

C'è da tener presente che questo è il normale comportamento riguardo il box model ma in generale, quantomeno nello sviluppo dei più moderni layout, viene applicata una proprietà (descritta anche su quella guida) che serve proprio ad "aggiustare" il calcolo delle dimensioni effettive in modo da comprendere padding e border. Si tratta di box-sizing applicata col valore border-box.

Puoi applicarla agli elementi che presenta questo problema, il tuo .footer o .header che sia, oppure applicarla in modo generale a tutti gli elementi della pagina. Fra i più comuni framework CSS viene infatti usata una regola del genere:

codice:

* {box-sizing: border-box;}

Che appunto non fa altro che applicare a ciascun elemento della pagina tale proprietà.

Consiglio inoltre di dare uno sguardo tra i link utili CSS (discussione in evidenza), se già non lo hai fatto; tra i primi capitoli (in particolare il capitolo 2) puoi trovare vari riferimenti a guide che spiegano i concetti di base e i meccanismi di funzionamento del CSS tra cui il box-model.

Buono studio e buon proseguimento.

... Ovviamente se il problema era un altro, prova a chiarire meglio.

Discussione: problema dimensionamento header

Strumenti discussione

Ricerca discussione

Visualizza

problema dimensionamento header

Permessi di invio