Also, das ist jetzt nur ein klitzekleiner Hinweis - nicht vollständig und so nicht zu kopieren, sondern einfach als Anhaltspunkt. Für mehr fehlt mir leider grad die Zeit.
Schau' mal:
HTML-Code:
<!DOCTYPE HTML>
<html>
<head>
<title>GuS Gesundheits- und Sozialdienstleistungen</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Und raus damit: -->
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
<!-- bis hierher -->
</head>
<body>
<div id="main"> <!--- umschließt die gesamte Seite und bekommt die Definition margin: 5px auto; für die Zentrierung der gesamten Seite und die Definition der Breite -->
<div id="content"> <!-- hier kommt dann ein float: left; hinein -->
<header id="title"> <!-- umschließt den gesamten Kopfbereich inklusive Navigation - hier kommt dann ein float: left; hinein width: 100%; -->
<!-- Anfang Logobereich -->
<div id="logo"><!-- hier kommt dann ein float: left; hinein -->
<h1><p ">GuS Gesundheits- und</h1> <!-- ins CSS schreibst Du #logo h1 { ....} und #logo h2 { .... } und hinein, was Du an Schrift, Schriftgröße und padding (h1 4em, h2 7em) haben willst und natürlich float: left; width: 100%;-->
<h2>Sozialdienstleistungen</h2>
</div>
<!-- Ende Logobereich -->
<!-- Anfang Navibereich -->
<nav id="nav"> <!-- hier kommt dann ein float: left; hinein width: 100%; -->
<ul> <!-- ul wird hier auch als #nav ul (width: 100%;) ... ins CSS geschrieben ebenso die Definiton für li und a--> <!-- hier kommt dann ein float: left; hinein -->
<li><a href="index.html">Home</a></li>
<li><a href="betreuung.html">Betreuung</a></li>
<li><a href="beratung.html">Beratung</a></li>
<li><a href="begleitung.html">Begleitung</a></li>
<li><a href="sterbebegleitung.html">Sterbebegleitung</a></li>
<li><a href="#">Anwendungen</a> <!-- Mach' hier eine anständige Seite dazu! -->
<ul>
<li><a href="aroma.html">Aroma Massage</a></li>
<li><a href="relax.html">Relax Massage</a></li>
<li><a href="hand.html">Fuß- und Handmassage</a></li>
<li><a href="breuss.html">Breuss Massage</a></li>
<li><a href="reiki.html">Reiki-Behandlung</a></li>
<li><a href="wirbel.html">Energetische Wirbelsäulenbegradigung</a></li>
</ul>
</li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<!-- Ende Navibereich -->
</header>
<!-- Ende von header -->
<!-- Anfang vom Inhaltsbereich -->
<div id="site_content"> <!-- hier kommt dann ein float: left; hinein width: 100%; -->
<!-- Slideshow - welche Vorlage ? -->
<div class="gallery"><!-- hier kommt dann ein float: left; hinein width: 100%; -->
<ul class="images">
<li class="show"><img width="1100" height="350" src="images/hauptimage_3.jpg" alt="" /></li>
<li><img width="1100" height="350" src="images/hauptimage_2.jpg" alt="" /></li>
<li><img width="1100" height="350" src="images/hauptimage_4.jpg" alt="" /></li>
</ul>
</div>
<div class="content-text"> <!-- Schreib' hier ins CSS ! width: 100%; float:left; -->
<!-- Das sollte eigentlich als Zitat formatiert werden - Gib' in Google mal "CSS cite" ein -->
<h3>"Wenn Worte überflüssig werden,<br/>weil der Augenblick<br/>bis an den Rand mit Sinn gefüllt ist,<br/>
beginnt das Leben unwiderstehlich<br/>von sich zu erzählen<br/>mitten hinein in faszinierende<br/>Geschichten...<br/>
wenn wir nur lauschen."<br/>
</h3>
<p class="small">(Hans Kruppa)</p>
</div>
</div>
<!-- Ende von Inhaltsbereich -->
<!-- Anfang von Fußbereich -->
<footer id="footer"> <!-- hier kommt dann ein float: left; hinein width: 100%; -->
<p class="grossabstand"> <!-- float: left ins CSS -->
<a href="https://www.facebook.com/gus.dienst.sparta" target="_blank"></p>
<p class="grossabstand"><img src="images/F_icon.jpg" alt="" border="" height="14" width="14"></a></p>
<p class="grossabstand"><a href="links.html">Links</a></p>
<p class="grossabstand"><a href="impressum.html">Impressum</a></p>
</footer>
<!-- Ende vom Fußbereich -->
</div>
</div>
<!-- Ende vom umschließendem Container -->
<!-- JS für Slideshow -->
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript" src="js/image_fade.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
Schau' mal, ob Du das verstehst - und bitte kauf' und lies das Buch!