Salve ragazzi, stavo seguendo la guida sui layout con i css del vostro sito.

Già da quello monolitico ho alcune perplessità, queste le mie pagine, rispettivamente html e css:

<html>

<head>
<title>Layout monolitico</title>
<link rel="stylesheet" type="text/css" href="layout_monolitico.css">
</head>

<body>
<div id="container">
<div id="header"> [img]....[/img]
</div>
<div id="navigation">
<ul>
[*]Chi sono
[*]informazioni
[*]giochi
[*]contatti
[*]siti segnalati
[/list]
</div>
<div id="content"><h2>Layout monolitico</h2>Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni (generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con macrosezioni (sottositi)
</div>
<div id="footer">Sito realizzato da stino90, tutti i diritti riservati.
</div>
</div>
</body>

</html>




/*stili generici*/
html,body{margin:0; padding: 0}
body{font-family: arial,sans-serif; font-size: 76%;}
#container{width:60%; margin:auto;}

/*stili per l'header*/
#header{background-image:url(immagini/logo.jpeg);}
h2{color:red;}

/*stili per la navoigazione*/
#navigation{background-color:#99CCFF; font-size:1.2em;padding:0.5em 0.5em;}
#navigation ul{margin: 0;padding: 0; list-style-type: none;}
#navigation li{display: inline; margin: 0 0 0 1em;padding: 0;}

/*stili per il contenuto*/

#content{padding:0 1.5em; background-color:yellow;}
#content p{line-height:1.3em;}

/*stili per il footer*/
#footer{padding:0.5em; background-color:#99CCFF; color:#FFCC33; text-align:center;}



Il problema vero e proprio è uno: perché tra l'header ed il content c'è uno spazio anche se io non l'ho dichiarato nel css?

La perplessità è un'altra invece:

a che serve usare le liste per il menù? Non ci sarebbe un modo più semplice ed intuitivo?

Grazie a chi risponderà, ciao.