Salve sto iniziando a lavorare con i CSS. Per fare il riassunto di quello appreso finora ho provato a realizzare il seguente layout. Ma non riesco proprio a capire come mai il content non arriva in fondo al footer, ma rimane una riga con il colore del container nonostante la parte navigation è più corta del content:
Questo è l'HTML
Questo è il CSS:<html>
<head>
<title>Prova Layout</title>
<link rel="stylesheet" type="text/CSS" href="style1.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Prova Layout</h1>
</div>
<div id="navigation">
<ul>
[*]Home
[*]Link pagina 2
[*]Link pagina 3
[*]Link pagina 4
[*]Link pagina 5
[*]Link pagina 5
[/list]
</div>
<div id="content">
<h2>Prova Layout</h2>
Realizzazione di pagine html con l'utilizzo dei fogli di stile</p>
Uso di JavaScript per l'interattivit</p></br>
<form action="http://localhost/prova.php" method="post">
<div id="form">Nome</div><input type="text" name="Nome" id="input"></br></br>
<div id="form">Cognome</div><input type="text" name="Cognome"id="input"></br></br>
<div id="form">Corso di Laurea</div><select name="Corso" id="input">
<option value="1">Informatica</option>
<option value="2">Scienze Biologiche</option>
<option value="3">Scienze Naturali</option>
<option value="4">Ottica</option>
</select></br></br>
<div id="form">E-mail </div><input type="text" name="email" id="input"></br></br>
<div id="form">Controlla e-mail</div><input type="button" value="Controlla" ></br></br>
<div id="form">Invio dati</div><input type="submit" value="Invia" ></br></br>
</form>
</div>
<div id="footer">Prova layout fogli di stile</div>
</div>
</body>
</html>
Grazie a chi mi illuminerà
html, body{margin:0; padding:0}
body{font-family:arial, sans-serif; font-size:16px; text-align:center}
#container{width:760px; margin:0 auto; border-left:solid 2px red; border-right: solid 2px red; text-align:left; background-color:#00c; }
h1,h2{margin:0; padding:0}
h1{font: bold 26px/80px arial, sans-serif; padding-left:10px}
h2{color:blue; font:bold 20px; }
div#form{width:150px; float:left; font-weight:bold;}
#input{width:250px}
#header{background-color:#0ff; color:red}
#navigation{float:right; width:160px; margin:0;}
#content{margin-right:160px; background-color:#ff9;padding-left:20px; margin-bottom:0}
#footer{text-align:center; color:#fff; background-color:#f6f; clear:right; font-size:18px; padding:10px;margin-top:0}
#navigation ul{margin:0; padding:0; list-style-type:none}
#navigation li{margin:0; padding:0}
#navigation a{display:block; text-decoration:none; color:yellow; font-size:18px; padding-left:15px; line-height:45px}
#navigation a:hover{background-color:green; color:white}
Rispondi quotando
