Ragazzi sono alle prese con questa pagina, ma come potete vedere la riga del menù non è un granchè, cioè non è allineata come si deve, dovrebbe essere spostata un pò più in alto, in modo da combaciare col margine superiore e se possibile vorrei questa riga più sottile, come posso fare, modifico i parametri, ma mi modifica tutta la struttura quasi, spero in un vostro aiuto. Ecco il codice
codice:
<html>
<head>
<title>Esempio 3 aree con CSS e DIV</title>
<style>
body { font-family: sans-serif; font-size: 11px; margin: 2px; padding: 0px; height: 100%;}
.main { height: 100%; }
.top { height: 25%; border-bottom: 1px solid #555; padding: 4px; }
.menu {height: 5%; border-bottom: 1px solid #555; line-height: 14px; background-color: #00A86B }
.content { letter-spacing: 2px; line-height: 16px; text-align: justify; padding: 4px;}

ul#menu {
    font-family: Trebuchet MS, Verdana, sans-serif;
    font-size: 15px;
    margin: 5;
    padding: 0;
    list-style: none;
}
  
ul#menu li {
    background-color: #00A86B;
    border-bottom: 5px solid #00A86B;
    display: block;
    width: 150px;
    height: 21px;
    margin: 4px;
    float: left; /* elementi su singola riga */
}
  
ul#menu li a {
    color: #fff;
    display: block;
    font-weight: bold;
    line-height: 25px;
    text-decoration: none;
    width: 150px;
    height: 30px;
    text-align: center;
}
  
ul#menu li.active, ul#menu li:hover {
    background-color: #77dd77;
    border-bottom: 5px solid #00A86B;
}

</style>
</head>
<body>
<div class="main">
<div class="top"><h3>Titolo</h3></div>
<div class="menu">
<ul id="menu">[*]Home[*]About Us[*]Services[*]Portfolio[*]Contact[/list]

</div>
<div class="content">



</div>
</div>
</body>
</html>