nav

css/style.css

@@ -12,10 +12,6 @@ header, footer{
   background: silver;
   clear: both; /* stopt das floating */
 } 
-nav{
-  height: 30px;
-  background: tomato;
-}
 #hauptbereich, #seitenbereich{
   min-height: 500px;
   background: #acacac;
@@ -27,4 +23,21 @@ nav{
 #seitenbereich{
   width: 30%;
   float: right;
+}
+/*navigation*/
+nav {
+  margin: 20px 0;
+}
+nav ul{
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+nav li{
+  display: inline;
+}
+nav li a{
+  margin: 0 20px 0 0;
+  text-decoration: none;
+  padding: 10px 8px;
 }

index.html

@@ -14,7 +14,13 @@
       <img src="img/logo.png" alt="Logo der Webseite" title="Logo">
     </header>
     <nav>
-      <p>navigation</p>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Aktuell</a></li>
+        <li><a href="#">Service</a></li>
+        <li><a href="#">Produkt</a></li>
+        <li><a href="#">Kontakt</a></li>
+      </ul>
     </nav>
     <div id="hauptbereich">
       <p>da ist der Hauptbereich</p>