Header over Navgigation and
Hy, I am very new with Webdesign and so I am with DW ... 
I am trying to find a solution for a current problem I have right now. Sure it's probably just a simple thing, but somehow the answer doesn't come to my mind.
The thing is, i got a fixed Navigation Sidebar on the left. You are able to scroll inside the navigation if there isto much content inside. And you are able to scrole the main content, without affecting the navigation. I also made a fixed top nav (just to play i a little bit arround).
But here is the thing. I would like to add a simple Header Image - as soon as try to do that, it mess everything up.
I hope someone can help to fix this.
(Sorry for the english ^^)
Here is the code:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kombination Vertikal und Horizontal (VH)</title>
<link href="vhstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<!--Das isst der Horizontale Bereich-->
<div id="navH">
<nav id="nav1">
<ul>
<li><a href="../index.html">Vertikale Navigation</a></li>
<li><a href="../Scrollbare Navigation/scrollnavigation.html">Horizontale Navigation</a></li>
<li><a href="../Seiten Navigation/seitennavigation.html">Seiten Navigation</a></li>
<li class="Home"><a href="vertikalhorizontal.html">Kombinierte Navigation</a></li>
</ul>
</nav>
</div>
<!--Navigation Sidebar-->
<div id="nav">
<ul>
<li><a href="../index.html">Vertikale Navigation</a></li>
<li><a href="../Scrollbare Navigation/scrollnavigation.html">Horiztonale Naivgation</a></li>
<li><a href="../Seiten Navigation/seitennavigation.html">Seiten Navigation</a></li>
<li><a href="vertikalhorizontal.html">Kombinierte Navigation</a></li>
</ul>
</div>
<div id="content">
<h1> Aber Hier beginnt der Inhaltsbereich</h1>
<h2>Hier Befindet sich der eigentliche Inhalt der Seite </h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="brclear"></div>
<!--Sorgt für einen Übergang zwischen content zu Footer-->
<div id="footer">
<p>© 2017 Demo Website</p>
</div>
</div> <!--Schließt den Hauptcontainer-->
</body> <!--Schließt den Body Bereich-->
</html> <!--Schließt das HTML Dokument-->
CSS
@charset "utf-8";
/* CSS Document */
/*Vertikale Navigation*/
#aktuell {
background-color: red;
}
#navH ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
#navH li {
float: left;
}
#navH li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navH li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
/*Das War die Die Vertikale Navigation*/
/*Es folgt der Content */
#content {
padding:20px;
margin-top:30px;
background-color:#1abc9c;
height:1500px;
}
/*das War der Horizontale Teil*/
/*Es folgt der Vertikale Teil*/
#aktuell {
background-color: red;
}
body {
margin: 0;
}
#nav
{margin:auto;
margin-top: 60px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
#nav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#nav li a.active {
background-color: #4CAF50;
color: white;
}
#nav li a:hover:not(.active) {
background-color: #555;
color: white;
}
#content {
margin-left:25%;
padding:1px 16px;
height:1000px;
}
/*Responsive Anpassung*/
@media (max-width: 768px){#navH ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
#navh li {
float: left;
}
#nav {
display: none
}
}
AdChoices