Moin,
ich habe den ersten HTML Code umgesetzt wie ich mir denken, dass es richtig sein könnte. Laut validator.w3.org scheint kein Fehler vorhanden zu sein.
<body>
<header>
<h1>Titel der Seite</h1>
</header>
<main>
<section>
<h2>Titel der Section</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.</p>
<article>
<h2>Leistung 1</h2>
<figure>
<img src="http://placehold.it/350x150" alt="Bild 1">
</figure>
<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.</p>
<p>... weiterlesen</p>
</article>
<article>
<h2>Leistung 1</h2>
<figure>
<img src="http://placehold.it/350x150" alt="Bild 1">
</figure>
<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.</p>
<p>... weiterlesen</p>
</article>
<article>
<h2>Leistung 1</h2>
<figure>
<img src="http://placehold.it/350x150" alt="Bild 1">
</figure>
<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.</p>
<p>... weiterlesen</p>
</article>
</section>
</main>
<footer> </footer>
</body>
Die Frage ist nun, wie und wo platziere ich das Bild das zwischen den beiden blauen Ecken eingeschlossen werden soll sowie die Navigation, die so ausschaut:
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Referenzen</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</nav>
Meine Einfache Zeichnung, wie es ausschauen soll, habe ich ja bereits im gezeigt.