Hallo,
Ich denke du hast im Aufbau der Seite einige Denkfehler gemacht.
Du hast bei deiner Seite, wie man auch an den weiteren Seiten erkennen kann ein
einspaltiges zentriertes Layout.
Um das optimal umzusetzen nimmst das body-tag und gibst dem die passende Breite von 1000 Pixel und zentrierst dieses. Damit hast du dann dein Layout fertig.
Du hast einen Kopfbereich, das ein Menü enthält und auf allen Seiten gleich bleibt. Dieses Menü kannst du oben positionieren mit fester Höhe von 237 Pixel(Höhe Hintergrundbild plus Höhe Menü.
Dem Header gibts du das Hiintergrundbild und positionierst es oben. Das Menü positionierst du unten vom Header mit einem Abstand von 192 Pixel nach oben, dass ist die Grösse des Hintergrundbildes. Das Menü benötigt kein Div, da du beim Element UL beginnst. Damit lässt es sich dann im CSS leichter referenzieren und spart einige Divs. Alle Divs im Menü rausnehmen, die gehören da nicht hin und sind überflüssig.
Der anschliessende Content-Bereich reicht bei vielen Seiten nicht bis zum Ende der Seite. Dem Contentbereich gibts du die Hintergrundfarbe und das Hintergundbild mit Position oben. Du kannst dem Content eine Mindesthöhe geben, notwendig ist das nicht. Der Content soll sich ja dynamisch in der Höhe anpassen.
Die weiteren Seiten ausser der Startseite bedürfen keiner weiteren Besprechung, das sie sehr einfach sind.
Kommen wir also zur Startseite.
Das Bild der Frau nimmst du als Ganzes, nicht teilen und machst den Hintergrund transparent. Du speicherst das Bild als PNG.
Du positionierst das Bild an entsprechender Stelle und schiebst es mit negativem Margin nach links über dein body hinaus.
Die Texteinrückungen machst du dann wie bei Stu beschrieben
Stu Nicholls | CSSplay | Tracking your images
Dein CSS-Code ist etwas undurchsichtig, das solltest du klarer Gliedern. Und beim HTML-Code darfst du ruhig alle Elemente verwenden die vorhanden sind. Das macht den Code besser lesbar und auch besser formatierbar.
Es ist einfacher im CSS zu schreiben #content blockquote und dann zu formatieren und ist übersichtlicher, als die vielen IDs und Class-Anweisungen.
Dein HTML-Grundgerüst mit Menü am Beispiel der Seite Einzelcoaching (texte sind gekürzt)
:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aussagekraeftiger Seitentitel</title>
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<ul id="menu">
<li><a href="Startseite.html">Startseite</a></li>
<li class="activatedPage"><a href="Einzelcoaching.html">Einzelcoaching</a></li>
<li><a href="Workshop.html">Workshop</a>
<ul>
<li><a href="IchBinEinmalig.html">Ich bin einmalig</a></li>
<li><a href="WirkungsvolleKommunikation.html">Wirkungsvolle Kommunikation</a></li>
<li><a href="ZieleUndVisionen.html">Ziele und Visionen</a></li>
<li><a href="HappyDay.html">Happy Day</a></li>
<br>
<li><a href="AnmeldungWorkshop.html"><b>Anmeldung</b></a></li>
</ul>
</li>
<li><a href="UeberMich.html">Über mich</a></li>
<li><a href="Kontakt.php">Kontakt</a></li>
<li><a href="Newsletter.html">Newsletter</a></li>
<li><a href="DasSagenKlienten.html">Das sagen Klienten</a></li>
</ul>
</div>
<div id="content">
<blockquote>Wir Menschen können im Leben viel bewegen;<br>
ein Coach zur Seite zu wissen gibt<br>
Kraft, Mut und Stärke für eine tiefe innere Zufriedenheit<br>
<cite>Judith Egli<cite></blockquote>
<h2>Einzel-Coaching</h2>
<h3>Was ist Coaching?</h3>
<p>Coaching ist ...lösungsorientiert. </p>
<h3>Das erwartet Sie bei mir:</h3>
<p>1. Kostenloses Vorgespräch ... mir sehr wichtig.</p>
</div>
</body>
</html>
Schön klar gegliedert und ohne überflüssige BRs und divs.
