Intestazione CSS che non si allinea.Cercando di visualizzare il logo utilizzando il resto del menu Top -20px che non si allinea

Question

Sto cercando di creare una barra di intestazione che contiene un'immagine seguita da un titolo e da un'auto di un menu. La barra viene visualizzata dopo 50px e voglio che l'immagine venga spostata leggermente in modo che sia sulla parte superiore del div wrapping e mostrando un po 'nel 50px sopra. Usando la posizione assoluta sul confezionamento del div e sulla posizione relativa con l'immagine che lo spostamento di 20px funziona bene, ma quando lo faccio il resto degli elementi nel div resta sotto di esso. C'è un modo per spostare quegli altri elementi fino a che sono in linea con l'immagine?

Ho fatto un semplice jsfiddle di quello che sto cercando di fare qui: http://jsfiddle.net/ 67STT /

HTML:

<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
  <h2>Header</h2>
</div>
<nav class='menu'>
  <ul>
      <li>first</li>
      <li>second</li>
  </ul>
</nav>
</div>

.

CSS:

.headerContainer {
  top: 50px;
  background-color: green;
  position: absolute;
  width: 100%;
}

.logoContainer {
  height: 120px;
  width: 120px;
  background-color: red;
  display: inline-block;
  position: relative;
  top: -20px;
}

.title {
  font-style: italic;
  display: inline-block;
  position: relative;
  padding: 0;
}

.menu {
  display: inline-block;
  position: relative;
}

.

Ho bisogno del titolo e del menu per allinearsi nel mezzo dell'immagine (la scatola rossa).

Utilizzo della posizione: Absolute li sposta in alto che va bene ma il titolo e il livello del menu sulla parte superiore dell'altro.

So che potrei usarlo e dare il menu un po 'di imbottitura a sinistra in modo che si sieda accanto al titolo ma quando la dimensione della pagina viene riduce il menu si sposta sotto l'immagine e il titolo, quindi non voglio il riempimento mostrato Poi, e preferirei non venire con un modo di gestire un jquery hacky per gestire che se può essere fatto solo in CSS.

Answer 1

In questo modo? http://jsfiddle.net/67stt/1/

Aggiungi:

vertical-align: top

.

to menu e title