3.7 Seitenstrukturierung

3.7.1 Formatierung von body, #page und main

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.

HTML
<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Kaufmännische Schule Tauberbischofsheim</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

    <body>
        <div id="page">
            <header>
                <img id="logo" src="img/logo.png" alt="Logo der Kaufmännischen Schule Tauberbischofsheim">
                <h1>Kaufmännische Schule Tauberbischofsheim</h1>
                <nav>
                    <ul>
                        <li> <a href="index.html">Startseite</a> </li>
                        <li> <a href="bildungswege.html">Bildungswege</a> </li>
                        <li> <a href="termine.html">Termine</a> </li>
                        <li> <a href="impressum.html">Impressum</a> </li>
                    </ul>
                </nav>
            </header>

            <main>
                <h2>Herzlich Willkommen</h2>
                <img src="img/eingang.jpg" alt="Haupteingang der Kaufmännischen Schule Tauberbischofsheim">
                <p>Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.</p>
            </main>
        </div>
    </body>

</html>
Abb. 3-43: Startseite index.html (Zwischenstand nach Aufgabe 3-9)
Aufgabe

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
    • Farbe des Schattens: #999999
main Abstand oberhalb des Elements: 25 Pixel
CSS-Eigenschaften
Abb. 3-44: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS
Vorschau
Abb. 3-45: Startseite index.html (Zwischenstand nach Aufgabe 3-9)
Lösung
Lösung
CSS
body {
    ...
    padding: 30px;
}

#page {
    width: 80%;
    max-width: 900px;
    min-width: 800px;
    margin: 0 auto;
    padding: 15px 50px 25px;
    background-color: white;
    box-shadow: 2px 2px 15px #999999;

}
main {
    ...
    margin-top: 25px;
}
Abb. 3-46: Ergänzung CSS-Datei styles.css

3.7.2 Formatierung des Kopfbereichs der Webseite

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.

HTML
<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Kaufmännische Schule Tauberbischofsheim</title>
    </head>

    <body>
        <div id="page">
            <header id="page_header">
                <img id="logo" src="img/logo.png" alt="Logo der Kaufmännischen Schule Tauberbischofsheim">
                <h1>Kaufmännische Schule Tauberbischofsheim</h1>
                <nav>
                    <ul>
                        <li> <a href="index.html">Startseite</a> </li>
                        <li> <a href="bildungswege.html">Bildungswege</a> </li>
                        <li> <a href="termine.html">Termine</a> </li>
                        <li> <a href="impressum.html">Impressum</a> </li>
                    </ul>
                </nav>
            </header>

            <main>
                <h2>Herzlich Willkommen</h2>
                <img src="img/eingang.jpg" alt="Haupteingang der Kaufmännischen Schule Tauberbischofsheim">
                <p>Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.</p>
            </main>
        </div>
    </body>

</html>
Abb. 3-47: Startseite index.html (Zwischenstand)

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.

HTML
<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Kaufmännische Schule Tauberbischofsheim</title>
    </head>

    <body>
        <div id="page">
            <header id="page_header">
                <div>
                    <img id="logo" src="img/logo.png" alt="Logo der Kaufmännischen Schule Tauberbischofsheim">
                </div>
                <div>
                    <h1>Kaufmännische Schule Tauberbischofsheim</h1>
                    <nav>
                        <ul>
                            <li> <a href="index.html">Startseite</a> </li>
                            <li> <a href="bildungswege.html">Bildungswege</a> </li>
                            <li> <a href="termine.html">Termine</a> </li>
                            <li> <a href="impressum.html">Impressum</a> </li>
                        </ul>
                    </nav>
                </div>
            </header>

            <main>
                <h2>Herzlich Willkommen</h2>
                <img src="img/eingang.jpg" alt="Haupteingang der Kaufmännischen Schule Tauberbischofsheim">
                <p>Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.</p>
            </main>
        </div>
    </body>

</html>
Abb. 3-48: Startseite index.html (Zwischenstand nach Aufgabe 3-11)
Aufgabe

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
CSS-Eigenschaften
Abb. 3-49: Vorgaben zur Formatierung des Elements mit CSS
Vorschau
Abb. 3-50: Startseite index.html (Zwischenstand nach Aufgabe 3-10)
Lösung
Lösung
CSS
#page_header {
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding-right: 90px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #D8D8D8;
    color: green;
    text-align: center;
}

#page_header > div{
    display: table-cell;
    vertical-align: middle;
    padding:20px 10px;
}
Abb. 3-51: Ergänzung CSS-Datei styles.css