Aufgrund der Nachfrage habe ich nun eine Artikelserie begonnen, deren Ziel es ist ein tabellenlos “Layout” bzw. “Design” zu entwerfen.

Hinzugefügt:
1. Teil: 03.10.2004, 12.42 Uhr
2. Teil: 24.10.2004, 21.17 Uhr
2. Teil überarbeitet: 29.03.2005, 23.30 Uhr
3. Teil: 30.03.2005, 08.36 Uhr
4. Teil: 30.03.2005, 14.47 Uhr

Einführung

Wie Sie sich sicher noch erinnern geht es in dieser kleinen nicht mehr ganz so kleinen Serie um die Erstellung von Webseiten ohne Layouttabellen oder ähnliche Mittel.

Wir benutzen lediglich CSS um die XHTML-Datei zu formatieren. Aber unsere XHTML-Datei weiß noch gar nichts von ihrem Glück, wir müssen ihr sagen, dass sie ein Stylesheed bekommt. Dazu fügen wir folgende Zeile in den head-Bereich ein:
<link href="style.css" rel="stylesheet" type="text/css" />

Zu den einzelnen Attributen:

  • href: Verweis auf die Stylesheet-Datei (sie liegt hier im gleichen Verzeichnis und heißt style.css).
  • rel: Relation zum XHTML-Dokument. Dies bedeutet so etwas wie Verwandschaft, der Wert stylesheet zeigt dem Browser an, dass die Datei style.css zum Dokument gehört.
  • type: Es gab früher noch eine andere Art Stylesheets (deren Name mir aber gerade entfallen ist), wir nutzen Standard-CSS.

Nun gilt es nur noch in dem Ordner, in dem die XHTML-Datei liegt auch eine Datei zu erstellen, die style.css heißt. Da dies (wie XHTML) ein reines Textformat ist reicht der “normale” Windows-Editor dafür aus.

Erste Schritte

Der erste Eintrag in unsere CSS-Datei ist der folgende:

* {
    margin: 0;
    padding: 0;
}

Diese Angaben setzen margin (“Außenabstand”) und padding (“Innenabstand”) Null. Das Ergebnis wirkt verstörend: Alle Elemente kleben aneinander.

Weshalb ist das erwünscht:
Verschiedene Browser benutzen verschiedene interne CSS-Angaben. Was im einen Browser standardmäßig einen Abstand von 20px nach oben hat, hat im anderen eventuell überhaupt keinen. Durch diese Angabe bringen wir alle Browser auf einen Stand. Das Sternchen (*) steht dabei für “alle Elemente”.

Als weiteren Eintrag in die CSS-Datei bietet sich folgendes an:

body {
    padding: 15px;
    background-color: #333;
    color: #eee;
}

Die Ausgabe hat sich jetzt schon deutlich verändert: Der Hintergrund ist dunkel-, die Schrift hellgrau.

Die nächste Anweisung sollte so lauten:

#wrap {
    width: 770px;
    background: #777;
    border: 2px solid #aaa;
    margin: 20px auto;
}

In modernen Browsern (Mozilla, Opera, IE 6.0) ist unser Layout nun zentriert und 770 Pixel breit. In IE 5.x ist die Box zwar 770px breit, aber linksbündig.
Diese Browser lassen sich durch folgendes Workaround besänftigen: In die body-Anweisung wird ein text-align: center; eingefügt, in die #wrap-Anweisung text-align: left;.

Das #wrap steht hier im Übrigen für “Element mit der id wrap”.

Und weiter geht es:

#head {
    border-bottom: 2px solid #aaa;
}

#foot {
    border-top: 2px solid #aaa;    
}

Damit sind Kopf- und Fußzeile schon mal abgetrennt. Die schwierigste Operation liegt aber noch vor uns: 2 Spalten.

Dazu gibt es die float-Anweisung, die ein Element aus dem Textfluss heraus nimmt und an eine Seite positioniert wird, das hört sich seltsam an, ist aber in der Praxis unproblematisch.

#content {
    width: 550px;
    float: right;
}

#side {
    width: 200px;
    float: left;
}

Das Verhalten, dass alle Browser jetzt an den Tag legen verwirrt die meisten Anfänger, aber eine Erklärung ist schnell gefunden: Dadurch, dass die beiden Elemente aus dem Textfluss genommen werden sind sie nicht da, nehmen 0 Pixel Höhe ein. Im Internet-Explorer wird die umgebende Box bis unter die beiden Spalten gezogen, dieses Verhalten ist allerdings falsch.

Nun gibt es eine ganz einfache Art und Weise diesen Missstand zu beheben: Wir eben dem foot folgende Eigenschaft: clear: both;. Dadurch werden alle Floats beendet und die Fußzeile, die vorher eher unorthodox daher kam befindet sich wieder an ihrem angestammten Platz: unten.

Cleaning out the closet

Es gibt aber noch einige “Schönheitsfehler”: Unsere Navigationsliste hat in modernen Browsern noch Listenpunkte (s. Screenshot). Um diese zu entfernen (das Gestalten von Listen, insbesondere von Navigationslisten, folgt später) tragen wir .nav {list-style: none;} ein.

Was gemerkt? Der Punkt vor der Bezeichnung deutet an, dass es um eine Klasse geht. Klassen werden benutzt, wenn es mehrere gleiche Elemente auf einer Seite geben kann. Für einmalige Elemente ist eine ID die bessere Wahl.

Ein weiterer “Fehler”: Die Absätze erkennt man nicht, sie hängen einfach zusammen, die Überschrift zweiter Ordnung klebt auch am Rand. Bevor wir nun jedem Absatz eine Klasse zuweisen benutzen wir das, was wir für body schon benutzt haben: Stile für ganze Elemente.

h2 {
    margin-top: 20px;
}

h2, p {
    margin-bottom: 15px;
    margin-right: 10px;
}

Beide Selektoren, h2 und p, haben gemeinsame Werte, deshalb können diese direkt in einen Block geschrieben werden.

Die Dateien

Damit ist unser Basislayout fertig. Im nächsten Teil der Serie geht es um ein elastisches Layout, basierend auf dem gleichen XHTML-Code.


Die Vorstellung von einer autoritär geordneten, homogenen Gesellschaft offensichtlich für viele Wähler ansprechend, insbesondere für solche, die über eine geringe formale Bildung verfügen. Die Analysen zeigen, dass die Rechten gerade von jungen, schlecht ausgebildeten Männern gewählt werden, die hier ihre traditionellen Rollenbilder und ihre Vorstellungen von Männlichkeit wiederfinden.

[…]

Wenn sich die Rechten in aktuelle Themen einmischen, werden die anderen Parteien nervös, statt ihnen selbstbewusst entgegenzutreten. Es kann aber nicht sein, dass alle anderen weglaufen, wenn ein NPDler das Wort ergreift und sich dann auch noch wundern, dass er zwei grammatikalisch korrekte Sätze hervorbringt.

[…]

Ich halte [die geplante Verschärfung des Versammlungsrechts] für einen Fehler. Das Ziel der Rechtsextremen ist es, die Freiheit zu zerschlagen, und die demokratischen Parteien nehmen diese Beschneidung der Grundrechte jetzt im Kleinen vorweg. Es hat doch keinen Sinn, dass ich mir – aus Angst, jemand könne mir Arme und Beine amputieren – prophylaktisch schon mal einen Finger abhacke.

[…]

Die Stabilität des politischen Systems ist überhaupt nicht gefährdet, denn die Kräfteverhältnisse sind klar verteilt. Aber auch wenn die Rechtsextremen auf lange Sicht keine Chance haben, ihre Vorstellungen politisch umzusetzen, gibt es keinen Grund zur Entwarnung. Im Bereich der Alltagsgewalt und tagtäglichen Diskriminierung macht sich ihr Einfluss längst bemerkbar. Minderheiten müssen in einer Atmosphäre leben, die von Angst und immer wieder auch von Gewalt geprägt ist. Das ist genug Anlass zur Sorge. Peter Widmann im Interview

Unsere Seite benötigt natürlich jetzt noch ein schickes Layout. Zuerst einmal habe ich unser Beispiel um etwas Blindtext erweitert. Zudem habe ich die Seitenleiste (das <div> mit der Bezeichnung side) nach dem content-<div> im Quelltext gesetzt. Das sorgt dafür, dass beispielsweise bei Vorlesegeräten zuerst der Inhalt und später dann die Seitenleiste vorgelesen wird. Gerade bei langen Navigationsleisten ist das natürlich ein Vorteil (Was aber, wenn der Leser nur schnell navigieren will und nicht auf den Inhalt zugreifen? – Die Antwort folgt in einem der nächsten Teile).

Was für ein Layout darf es sein?

Prinzipiell gibt es mehrere Möglichkeiten wie eine Webseite aufgebaut werden kann. Hier bietet sich eine 2-spaltige Lösung an. Es gibt jetzt aber kein Patentrezept für einen einfachen 2-Spalter sondern mehrere Möglichkeiten, die alle eine Betrachtung Wert sind:

1. Das Fixed-Width-Layout

Schema: Fixed-Width-Layout Wer dem Englischen mächtig ist hat schon messerscharf erkannt: Es geht um ein Layout, das seine Breite nicht verändert. Diese Layouts werden meist in Pixeln angegeben und sind – vom Verständnis her – die einfachsten. Im Normalfall werden diese Layouts mittig gesetzt.

Dies hat natürlich aber auch einige Nachteile:

  • Bei Schriftvergrößerung wird das Layout buchstäblich zerrissen.
  • Der Inhalt muss unter allen Umständen in den Bereich des
    Content

    passen, bei meist 400 bis 500 Pixeln Platz ist das nicht so einfach einzuhalten.

2. Das elastische Layout

Diese Layoutform erschließt sich auch dem erfahrenen Leser nicht leicht. Gemeint ist ein Layout, welches bei Vergrößerung der Schrift wächst und bei Verkleinerung der Schrift schrumpft. Es liegt nahe, dass man da mit Pixeln nicht weit kommt – diese sind ja nicht von der Schriftgröße abhängig. Es gibt aber eine Einheit in CSS, die genau das ist: em (und ex, was aber sehr fehlerhaft interpretiert wird).

em bezeichnet die Buchstabenhöhe, also die Schriftgröße. Deshalb wird es im Normalfall auch nur dafür genutzt: font-size: 1.3em; besagt, dass die Schrift 130% größer sein soll als die Schrift des Elternelements – klingt kompliziert, ist es auch (zumindest in dieser theoretischen Betrachtung).

Schema: Fixed-Width-Layout Die Schemazeichnung fällt beim “elastischen Layout genauso aus wie bei einem Layout mit fester Breite:

3. Das fluide Layout

Schema: Fluides Layout “Fluide” oder “flüssig” sind Layouts, die sich der Bildschirmbreite anpassen. Dies bedeutet, dass der Fließtext unangenehm lang werden kann, was sicherlich der größte Nachteil dieser Methode ist. In modernen Browsern kann dem zwar Abhilfe geschaffen werden indem man die Laufweite per max-width beschränkt, der Internet Explorer versteht das allerdings nicht.

Schema: Fluid-Fixed-Layout Im Normalfall sind beide Spalten in Prozent der Fensterbreite angegeben, oder eine der Spalten (meist die Seitenleiste ist) bekommt eine fixe Breite. Diese könnte man natürlich auch elastisch auszeichnen, aber wir wollen es ja nicht komplizierter machen als es sein muss…

OK, soviel zur Theorie, beim vierten Teil geht’s um die Praxis: Wir beginnen mit ein Paar einfachen CSS-Anweisungen und nehmen uns ein Fixed-Width-Layout mit Kopf und Fußzeile vor. In der Zwischenzeit könnte man seine CSS-Kenntnisse auffrischen, aber keine Angst, alles wird Schritt für Schritt erklärt.

Nachdem im 1.Teil die Grundlagen für das Layout gelegt wurden gehe ich nun auf die Struktur der XHTML-Datei ein:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <title>[Seitentitel]</title>
    </head>

    <body>
        [Seiteninhalt]
    </body>
</html>

In den Zeilen 1 und 2 wird der Dokumententyp deklariert – hier eine XHTML 1.0-Strict-Datei.
In Zeile 4 wird der <html>-Bereich geöffnet, in dem sich alle Daten des Dokuments befinden.
In den Zeilen 4-7 befindet sich der <head>-Bereich in dem (Zeile 6) der Seitentitel festgelegt wird.

Zuvor wird der Zeichensatz angegeben in dem das Dokument gesetzt wurde, damit wir deutsche Umlaute einfach in das Dokument schreiben können. Die Angabe iso-8859-1 steht dabei für den Standard-Zeichensatz von Windows. Eine andere gebräuchliche Angabe ist utf-8.

Der Inhalt des Dokuments (was also letztendlich ausgegeben wird) wird im <body> festgelegt.

Dies ist die Grundlegende Struktur, die in jedem XHTML-Dokument vorhanden sein muss. Die meisten Anweisungen kommen in den <body>, zum Beispiel auch folgende Zeilen:

<div id="wrap">
    <div id="head">
        <h1>Unsere Beispielseite</h1>
    </div>
    <div id="content">
        <h2>Inhalt</h2>
        <p>Dies ist ein Beispieltext.</p>
    </div>
    <div id="side">
        <ul class="nav">
        <li><a href="index.html">Startseite</a></li>
        <li><a href="uebermich.html">&Uuml;ber mich</a></li>
        <li><a href="artikel.html">Artikel</a></li>
        <li><a href="impressum.html">Impressum</a></li>
        </ul>
    </div>
    <div id="foot">
        <p>All Rights reserved.</p>
    </div>
</div>

Dies ist die spätere Struktur der Seite. Alle Bereiche sind durch wrap zusammengefasst, das ist praktisch, wenn wir später unserer Datei eine Form geben. Das head<div> soll platz für das Logo und den Namen der Website enthalten, welcher auch in einem <h1>-Element steht.

Darauf folgt der eigentliche Inhalt (content) sowie die Seiten-Leiste. Zum Schluß der Seitenfuß.

Die fertige XHTML-Seite sehen sie hier.