nicht angemeldet
Hallo Chris,
im unteren Thread hat jemand [...] vorgeschlagen, dass ich es mit DIV-Tags machen solle.
In deinem speziellen Fall und nach meiner Laienmeinung hat dieser Jemand Recht ;-)
Ich habe mir die Quelltexte verschiedener Seiten angeschaut und finde immer wieder die Stelle <div id="IDName">Inhalt</div>. Dieser ID wird sicherlich mit CSS ausgerichtet, sonst würde alles untereienander stehen.
Genau, id="IDName" ist die einmalige und eindeutige ID für den Inhaltscontainer. Wenn ich deine Seite richtig in Erinnerung habe, hat sie links eine Navigation und rechts den Inhalt. Also brauchst du zwei Container nebeneinander:
<div id="navigation">Navigation</div>
<div id="inhalt">Seiteninhalt</div>
Um diese beiden Container nebeneinander zu positionieren, gibt es meines Erachtens keinen Königsweg. Ich bevorzuge den folgenden Weg (danke nochmal an Detlef G.), der auch in älteren Browser wie Netscape 4.78 oder eigensinnigen Browsern wie dem IE funktioniert.
Du positionierst zunächst das Navigations-DIV absolut (position:absolute;). Das bedeutet, dass dieser Container im Verhältnis zum ranghöheren Element ("Elternelement") immer die gleiche Position hat (das Elternelement ist in deinem Fall BODY):
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position
Jetzt musst du noch festlegen, wo das DIV anfangen und wie breit es sein sollen. Dabei dient als Ausgangswert die linke obere Ecke; in englisch top left. So heißen auch die CSS-Eigenschaften: top:0; und left:0;:
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#postop
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#left
Jetzt brauchst du noch eine Breitenangabe, hierfür ist die Eigenschaft width zuständig:
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#width
Schließlich solltest du noch Innen- und Außenabstände angeben (padding und margin):
http://selfhtml.teamone.de/css/eigenschaften/randabstand.htm (margin)
http://selfhtml.teamone.de/css/eigenschaften/innenabstand.htm (padding)
Schon ist dein DIV mit CSS formatiert:
#navigation {
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
width:10em;
}
Die CSS-Eigenschaften des Inhalts-DIV sind schnell erklärt, wichtigster Bestandteil ist der linke Außenabstand, schließlich soll ja dort Platz für die Navigation gelassen werden. Also könnte es so aussehen:
#inhalt {
margin-left:11em;
}
Diese CSS-Definitionen solltest du in einer separaten Datei unterbringen, z.B. styles.css. Diese bindest du im HEAD-Bereich deiner HTML-Seiten mit folgendem Element ein:
<link rel="stylesheet" type="text/css" href="./styles.css">
Somit stehen dir die CSS-Formatierungen zur Verfügung und du kannst die oben genannten beiden DIVs verwenden und mit den gewünschten Inhalten füllen.
Grüße
Torsten