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 ©
</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.