DIV-Container richtig positionieren

[derSchweriner]

Hallo alle zusammen,

ich bin neu hier und bitte daher um etwas Nachsicht, wenn meine Fragen oder Probleme als noch sehr anfängerhaft durchgehen sollten.

Folgendes Problem: Ich möchte auf einer Seite einen Header erzeugen, bei dem ein grafisches Element (zum Teil transparent) den oberen Bereich bedeckt und auf ihm soll ein Logo und die Hauptnavigation liegen. Die Grafik, das Logo und die Navigation ist "FIX". Ebenfalls oben anfangen soll das Hintergrundbild, welches den Beginn aller nachfolgenden Elemente Markiert und unter dem Header durchscrollen kann. Das heist, alles scheint durch den Header etwas durch. So weit - so gut… Nur leider funktioniert das bei mir nicht so richtig. Ich denke, die DIV`s sind falsch formatiert, denn auch alles, was nach dem Hintergrundbild kommt fängt ganz oben an. Habe alles versucht. Mit z-index die Reihenfolge der Sichtbarkeit... Mit clear: left; das floaten aufheben und und und.

Eventuell könnt ihr mir helfen.

Hier mal Auszüge aus meinem Quelltext:

HTML:

...
<div id="ges">
`!-- Header - anfang --`
		<div id="header"> 
    <div id="logo">
      <svg class="oben" viewBox="0 0 2200 180">
        <path d="M-1,-1 L2200,-1 L2200,130 C1500,40,300,180,-1,100" style="fill-opacity: 0.85;" fill="#F0F0F0"></path> 
        <path d="M2200,130 C1500,40,300,180,-1,100" style="stroke-width: 5;" fill="rgba(0,0,0,0)" stroke="#b22222"></path> 
      </svg> 
      <div class="hnav1"><a href="#"><img src="daten/pics/logo_grau.png" width="230" height="100"></a></div>
      <div class="hnav2"><a href="#" title="...">Tätigkeitsschwerpunkte</a></div>
      <div class="hnav3"><a href="#" title="...">Vita</a></div>
      <div class="hnav4"><a href="#" title="...">Office</a></div>
      <div class="hnav5"><a href="#" title="...">Terminsvertretung</a></div>
    </div>
  </div>
<!-- Header - ende -->

<!-- Mitte - Anfang -->
  <div class="mitte"> 
    <img src="daten/pics/HeaderBilder/schwerin1.jpg" width="100%">        
    <svg class="mitte" viewBox="0 0 2200 130">
      <path d="M2200,33 C1500,-57,300,83,-1,3" style="stroke-width: 5;" fill="rgba(0,0,0,0)" stroke="#b22222"></path> 
      <path d="M2200,33 C1500,-57,300,83,-1,3 v127 L2200,130 Z" style="" fill="#ffffff"></path>
    </svg>
...
  </div>  
<!-- Mitte - ende -->
...
</div>

CSS:

body{ margin:0; padding:0; font-size:100.01%; }
img{ border:0 }
.clearing { clear: both; }
#ges { position:relative; margin: 0px auto; top:0px; width:auto; height:auto; z-index:0; display: block;}
#header { position:fixed; width:100%; top:0px; display:block;}
#logo{ position:relative; top:0px; width:100%; z-index:1;}
a{color:#000; font-family: Arial; font-size: 18px;text-DECORATION: none; font-weight: bold; }
a:hover { color: #b22222; Text-DECORATION: none; }

.oben { z-index:10; position:absolute; }
.mitte { z-index:-10; position:relative; }
.hnav1, .hnav2, .hnav3, .hnav4 { float: left; padding: 5px; } /* border: 2px solid #000;  */
.hnav5 { clear: left; padding: 5px; } /* border: 2px solid #000;  */
.hnav2, .hnav3, .hnav4, .hnav5 { margin-top: 10px; }
.hnav1 { width: 40%;} .hnav2 { width: 18%} .hnav3 { width: 8%;} .hnav4 { width: 8%;} .hnav5 { width: 13%; }
#inhalt{ position:relativee; border: 2px solid #222;}
...

Warum die Vorschau keine Zeilenumbrüche und kein Einrücken anzeigt...? Da seht ihr mal. Da fängt es schon an ;-(

Edit: Ich (JürgenB) habe das mal korrigiert.

Für eure Mühen möchte ich mich schon im Vorfeld recht herzlich bedanken!!!