HTML / CSS - Praxistutorial 1 - Aufbau

1. Die Abschnitte

• Überblick
• Basisdefinitionen
• Aufbau
• Hauptmenü
• Untermenü
• Inhalt
• Zusatzinfos

2. Anlegen der Strukturelemente

Unter dem Punkt Strukturierung habe ich schon gezeigt, wie man ein HTML-Dokument sinnvoll aufbaut, und genau dieses Beispiel nehmen wir uns jetzt vor. Baut den folgenden Code innerhalb des body-Tags der urquhart.htm ein (den Text "Test" benötigen wir, damit ihr etwas zu sehen bekommt):

<div class="rahmen">
  <div class="schmuck">Test</div>
  <div class="navi">Test</div>
  <div class="subnavi">Test</div>
  <div class="inhalt">Test</div>
  <div class="info">Test</div>
  <div class="abschluss">Test</div>
</div>

3. Formatieren mit CSS

rahmen

Dieses Element wird benötigt, weil wir unseren Inhalt horizontal zentriert aufbauen wollen. Damit es anschaulicher wird, versehen wir es erst mal mit einem Rahmen. Tragt jetzt in die styles.css folgenden Code ein:

.rahmen
{
  width: 740px;           /* Anpassung für 800x600 */
  margin: 0px auto;
  border: 1px solid #f00; /* nur zur Anschauung */
}

schmuck

In diesem Bereich wollen wir Schmuckelemente unterbringen, also Bilder oder auch Flash-Animationen. Da ich von Letzterem aber keine Ahnung habe, nehmen wir das Bild head_urquhart.jpg mit den Maßen 740x100 Pixeln. In der CSS-Anweisung benötigen wir also nur die entsprechenden Größenangaben.

.schmuck
{
  width: 740px;
  height: 100px;
}

Das Bild selber binden wir in der urquhart.htm zwischen dem schmuck-Div ein. Und schmeißt da jetzt bitte den "Test" raus.

<div class="schmuck">
  <img src="../../pics/schloesser/head_urquhart.jpg"
    width="740" height="100" alt="Urquhart Castle">
</div>

navi

Hier gilt eigentlich dasselbe, wie bei schmuck, Breite und Höhe definieren, das war es. Warum wir 24 Pixel bei der Höhe genommen haben, erfahrt ihr später. Der Anschaulichkeit halber setzen wir auch mal eine Hintergrundfarbe.

.navi
{
  width: 740px;
  height: 24px;
  background-color: #002274;
}

Leider hat der Internet Explorer 6 die unangenehme Eigenschaft, Zeilenumbrüche im Quellcode in die Darstellung mit einzubeziehen. Das könnt ihr wunderbar daran sehen, dass es zwischen dem Bild und der blauen Leiste eine Lücke gibt. In diesem Fall könnt ihr das sehr leicht korrigieren. Schreibt den gesamten Code des schmuck-Divs in eine Zeile, dann passt es wieder. Das ist zwar nicht das Gelbe vom Ei, aber in diesem Tutorial pfuschen wir ein wenig, damit es für den Anfang nicht zu schwer wird.

subnavi, inhalt, info

Diese drei Elemente sollen einen Abstand von 10 Pixeln zur Hauptnavigation und zueinander haben. Die Breitenangaben setzen wir einfach mal absolut, da lässt es sich leichter rechnen. Die Hintergrundfarben dienen wieder erst mal der Veranschaulichung.

.subnavi
{
  width: 140px;
  margin-top: 10px;       /* Abstand nach oben   */
  margin-right: 10px;     /* Abstand nach rechts */
  margin-bottom: 10px;    /* Abstand nach unten   */
  background-color: #f00;
}

.inhalt
{
  width: 440px;
  margin-top: 10px;       /* Abstand nach oben   */
  margin-right: 10px;     /* Abstand nach rechts */
  margin-bottom: 10px;    /* Abstand nach unten  */
  background-color: #f00;
}

.info
{
  width: 140px;
  margin-top: 10px;       /* Abstand nach oben */
  background-color: #f00;
}

4. Textfluss

So und nun wird es etwas komplizierter. Wir wollen die drei oben genannten div-Elemente nebeneinander positionieren. Da es sich aber um Block-Elemente handelt (und es auch so bleiben sollte), wird das ein wenig schwer. Noch mal kurz zur Erinnerung, Block-Elemente zeichnen sich dadurch aus, dass an ihrem Ende automatisch ein Zeilenumbruch erfolgt. Um nun unsere drei Rubriken subnavi, inhalt und info nebeneinander zu platzieren, müssen wir sie aus dem normalen Textfluss herausreißen. Das geschieht mit der CSS-Eigenschaft float, die wir auf alle drei CSS-Definitionen anwenden.

float: left;

Et voilà - sie stehen tatsächlich nebeneinander! Die Details zu diesem "Phänomen" hab ich ja schon an dieser Stelle erklärt.

abschluss

Kommen wir nun zum letzten Element. Da wir einen Rahmen mit fester Breite definiert haben, befindet sich unser Element bereits unterhalb der oben genannten Divs subnavi, inhalt und info. Kommentiert mal spaßeshalber den kompletten Selektor .rahmen in der styles.css aus und schaut euch an, was nun passiert. Auch das Element abschluss befindet sich nicht mehr im "normalen" Textfluss. Das geschah mit dem float in der Klasse info. Wir gehen also auf Nummer sicher und bringen es wieder in den normalen Fluss. Das geschieht mit dem Wert clear. Dazu definieren wir noch ein paar zusätzliche Eigenschaften.

.abschluss
{
  /* macht das float: left aus info rückgängig */
  clear: left;
  border-top: 1px solid #000;
  padding: 5px;
}

Damit hätten wir den Aufbau abgeschlossen. Als nächstes wenden wir uns der Hauptnavigation zu. Löscht bitte vorher die Einträge background-color bei subnavi, inhalt und info, die brauchen wir nicht mehr.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt