Wir haben unser HTML-Dokument so strukturiert, dass das body-Element nicht unmittelbar die Elemente unserer Webseite enthält. Stattdessen fügen wir in das body-Element ein div-Element ein, das dann die sichtbaren Elemente unserer Webseite aufnimmt. Auf diese Weise können wir die beiden Bereiche unterschiedlich formatieren.
Für Selektionszwecke und um die Bedeutung des div-Elements deutlich zu machen, weisen wir diesem die ID page zu.
Aufgabe 3-9: Formatierung body, #page und main
Formatierungsvorgaben
Die folgenden Formatierungsvorgaben sollen für alle Webseiten unseres Webauftritts gelten:
HTML-Element
Formatierung
body
Abstand zwischen dem Rand des Elements und seinem Inhalt: 30 Pixel
#page
Breite: 80%
Maximale Breite: 900 Pixel
Minimale Breite: 800 Pixel
Abstand ober- und unterhalb des Elements: 0 Pixel
Element horizontal zentrieren
Abstand zwischen dem Element und seinem Inhalt:
oben: 15 Pixel
rechts und links: 50 Pixel
unten: 25 Pixel
Hintergrundfarbe: weiß (white)
Schattierung:
horizontale Verschiebung des Schattens: 2 Pixel
vertikale Verschiebung des Schattens: 2 Pixel
Bereich, in dem der Schatten von der angegebenen Farbe ins Transparente verschwimmt: 15 Pixel
Jede Webseite unseres Webauftritts soll den gleichen Kopfbereich besitzen, bestehend aus dem Logo, dem Namen der Schule und dem Navigationsmenü.
Da es auf der Startseite nur dieses header-Element gibt, erscheint es naheliegend für eine entsprechende CSS-Regel den Typselektors header zu verwenden. Möchte man sich jedoch die Möglichkeit offen halten, auf anderen Seiten des Webauftritts neben dem Kopfbereich weitere header-Elemente einzusetzen, zum Beispiel in einem article-Element, ist dieser Selektor nicht mehr eindeutig.
Im HTML-Dokument ist das Element, das den Kopfbereich der Webseite abbildet, innerhalb seines Elternelements (ID page) das erste Element vom Typ header. Der entsprechende Selektor – #page > header:nth-of-type(1) – ist jedoch relativ komplex. Die Verwendung einer ID, die deutlich macht, dass es sich um den Kopfbereich der Webseite handelt, bietet demgegenüber zwei Vorteile. Sie erleichtert es den strukturellen Aufbau der Webseite im HTML-Dokument nachzuvollziehen und zeigt als ID-Selektor auf einen Blick, für welches Element die CSS-Regel gilt. Wir vergeben daher an dieses Element die ID page_header und nutzen zur Formatierung den entsprechenden ID-Selektor.
Der Kopfbereich soll so gestaltet werden, dass das Logo links neben dem Schulnamen und der Navigationsleiste angeordnet ist.
Dies könnten wir zum Beispiel dadurch erreichen, dass wir die CSS-Eigenschaft float des #logo-Elements auf left setzen. Das Logo würde dadurch an den linken Rand verschoben und von den nachfolgenden Elementen h1 und nav rechts umflossen.
Alternativ können wir den Kopfbereich in zwei nebeneinanderliegende Bereiche unterteilen. Der linke Bereich nimmt dann das Logo auf, der rechte den Schulnamen und die Navigationsleiste.
Dazu fügen wir in den page_header zwei div-Elemente ein. Damit beide nebeneinander angeordnet werden, setzen wir deren CSS-Eigenschaft display auf table-cell. Bei ihrem Elternelement page_header weisen wir der display-Eigenschaft den Wert table zu. Der page_header erhält dadurch ein Layout, das dem einer Tabelle gleicht, die aus einer Zeile besteht, in der wiederum zwei Zellen – die beiden div-Elemente – enthalten sind.
Ein solches Layout ist sehr flexibel und kann leicht angepasst werden. Sollen zum Beispiel mehr als zwei Bereiche nebeneinander liegen, werden einfach weitere div-Elemente eingefügt deren display-Eigenschaft jeweils auf table-cell gesetzt wird. Soll das Layout auch vertikal aus mehreren Bereichen bestehen, müssen die div-Elemente, die nebeneinander erscheinen sollen, jeweils in ein div-Element eingefügt werden, dessen display-Eigenschaft den Wert table-row besitzt.
Aufgabe 3-10: Formatierung #page_header
Formatierungsvorgaben
Die folgenden Formatierungsvorgaben sollen für alle Webseiten unseres Webauftritts gelten:
HTML-Element
Formatierung
#page_header
Das Element dient der Layoutgestaltung. Es enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile (display: table).
Element horizontal zentrieren
Abstand zwischen dem rechten Rand des Elements und seinem Inhalt: 90 Pixel
Rahmentyp unterer Rand: durchgezogen
Rahmenbreite unterer Rand: 2 Pixel
Rahmenfarbe unterer Rand: hellgrau (#D8D8D8)
Schriftfarbe: dunkelgrün (green)
Textausrichtung: zentriert
#page_header > div
Das Element dient der Layoutgestaltung. Es soll so behandelt werden, als wäre es eine eine Zelle innerhalb einer Tabelle (display: table-cell).
Element vertikal zentrieren
Abstand zwischen dem oberen bzw. unteren Rand des Elements und seinem Inhalt: 20 Pixel
Abstand zwischen dem rechten bzw. linken Rand des Elements und seinem Inhalt: 10 Pixel