L'en-tête CSS ne douille pas.Essayer d'afficher le logo en utilisant le haut-20px reste du menu ne tapissant pas

Question

J'essaie de faire une barre d'en-tête contenant une image suivie d'un titre et de la voiture de menu. La barre est affichée après 50px et je souhaite que l'image soit déplacée légèrement de sorte que celle-ci sur le dessus de l'emballage div et montrant un peu dans le 50px ci-dessus. Utilisation de la position Absolute sur l'emballage DIV et la position relative avec l'image puis la déplaçant par 20px fonctionne bien, mais lorsque je le fais, le reste des éléments de la DIV reste en dessous. Y a-t-il un moyen de déplacer ces autres éléments jusqu'à ce qu'ils sont en ligne avec l'image?

J'ai fait un simple jsfiddle de ce que j'essaie de faire ici: 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;
}

J'ai besoin du titre et du menu pour aligner au milieu de l'image (la boîte rouge).

Utilisation de la position: Absolute les déplace vers le haut qui va bien mais le titre et la couche de menu sur le dessus l'un de l'autre.

Je sais que je pourrais utiliser cela et donner au menu un peu de remplissage à gauche afin qu'il se trouve à côté du titre, mais lorsque la taille de la page est réduite, le menu se déplace sous l'image et le titre, donc je ne veux pas que le rembourrage soit montré. Ensuite, et je préférerais ne pas proposer une manière hacky jQuery de gérer que si cela peut être fait dans CSS uniquement.

Answer 1

Comme ça? http://jsfiddle.net/67stt/1/

Ajouter:

vertical-align: top

au menu et au titre