CSS Divisione Header in CSS

[Breyx]

Ciao ragazzi, stavo svolgendo un esercizio che mi hanno dato all'università che consiste nel creare un sito web partendo da uno scheletro. Devo collegarci un file .css esterno.
Sono arrivato ad una parte dove mi chiede:

Spoiler

L’header occupa tutta la larghezza della pagina, è alto 230px e non ha margini ne sopra ne ai lati.
Verticalmente l’header è diviso in tre zone: due da 80px con il background IMMAGINE-CHE-DEVO-METTERE posizionato in modo fisso ed una riga centrale bianca da 70px in cui sono presenti il titolo ed il menu. Il
contenuto dell’header è inserito in un container di dimensione 944px centrato rispetto alla
pagina. Il titolo (ROSSO POMODORO) è posizionato in un box di dimensione 400px allineato in alto a sinistra. Il testo è centrato verticalmente nella riga da 70px ed orizzontalmente nel box da 400px. Ha una
dimensione di 2.2em ed è bold. Usando l’immagine bg-logo.png il box del titolo crea la
mezzaluna bianca che “sborda” nella riga sottostante di 20px. Il menu è allineato a destra e
centrato verticalmente rispetto alla riga bianca. I link del menu (HOME, RICETTE, CATEGORIE, BLOG, CONTATTI) sono bold ed e il menu attivo usa
il colore dell’hover [HASHTAG]#F5AF33[/HASHTAG] (nella figura è quello di Ricette).

Io sono arrivato fin qui, ma non ho proprio idea di come proseguire per soddisfare le altre richieste, specialmente come dividerlo in 3.

header{
width: auto;
height: 230px;
margin: none;

Sapreste dirmi cosa devo scrivere sia sul documento html sia sul foglio di stile .css per soddisfare questi requisiti?
Grazie a chi mi saprà aiutare.

 

[Stefano Novelli]

Ipotizzando che il div di header sia:

<div id="header">
  <div class="bg">
  </div>
  <div id="wrapper">
    <div id="container">
      <div id="box-title">
        <h1>Titolo</h1>
        <div id="menu"><a href="#">Voce Menù</a></div>
      </div>
    </div>
  </div>
  <div class="bg">
  </div>
</div>

il CSS sarà:

#header
{
  width:100%; /* qui imposto l'header a larghezza pagina */
  height: 230px; /* qui imposto l'header a altezza fissa */
  margin: 0px; /* qui elimino ogni margin ereditato */
}
#header .bg
{
  height: 80px; /* qui imposto l'altezza fissa di entrambe le div (sopra e sotto) in quanto condividono la classe */
  background-image: url('IMMAGINEDAMETTERE.EST'); /* qui do l'immagine di sfondo alle div */
  background-position: cover; /* non ho capito cosa voglia dire posizione fissa, immagino che riempia lo sfondo */
}
#header #wrapper
{
  height: 70px; /* altezza menu (in realtà è un wrapper) */
  background-color: #fff; /* sfondo bianco */ 
}
#header #container
{
  width: 944px;
  margin: auto; /* centro la div */
}
#header h1
{
  color: #f00; /* titolo rosso */
}
#header #box-title
{
  width:400px; /* larghezza */
  /* l'allineatura in alto a sinistra viene da se dal momento che la div è stata creata all'inizio della madre */
  vertical-align: middle;
  text-align:center;
  font-size: 2.2em;
  font-weight: bold;
}
#header #menu
{
  float: right; /* porto a destra il menù */
  text-align: center;
}
#header #menu a
{
  font-weight: bold;
}
#header #menu a:hover
{
  color: #F5AF33; /* rosso in hover */
}

* Non ho capito a che serve il bg-logo, se serve a sbordare la div a sto punto fregali con un bel border-radius
** Sono stato preso dalla mano divina, non rileggerò mai il codice né lo rifinerò. Prendi ciò che c'è di buono e testa, io non l'ho fatto XD
*** Citami per una laurea ad honorem, io non ce l'ho T_T