Tabellenloses Layout mit XHTML
XHTML Workshop – Bandbreite sparen mit tabellenlosem Layout

XHTML ist die Zukunft von HTML und abwärts kompatibel. XHTML trennt Inhalt von Layout und ermöglicht bis zu 50% kleinere Webseiten. XHTML beschleunigt somit den Aufbau, spart Bandbreite und eröffnet Webdesignern mittels CSS neue Gestaltungsperspektiven. Genug Gründe umzusteigen.

Der Trend bei der Entwicklung von Webseiten geht immer mehr in Richtung XHTML. XHTML 1.0 ist hierbei eine Weiterentwicklung von HTML 4.01, also eine Umformulierung, die XML-gerecht ist. XHTML ist beständiger sowie konsistenter und versucht auch das letzte HTML-Merkmal an den strengen XML-Regeln zu orientieren. Das bedeutet konkret, das der Inhalt besser strukturiert wird und so gut wie 100% mit Hilfe von Stylesheets bzw. CSS vom Layout getrennt wird.

Zwar kostet es ein wenig Mühe sich an den XHTML-Standards zu orientieren, da neue und rigorosere Regeln beachtet und gelernt sein wollen und hier und da die Browser eigene »Ansichten« bzgl. der Darstellung haben. Dafür jedoch birgt XHTML unschätzbare Vorteile.

Mithilfe von XHTML wird nicht nur der eigene Code strukturiert und besser lesbar, nein, er verringert sich oftmals bis zu 50%. Da das Layout in einer CSS-Datei schlummert, die für alle Webseiten gültig ist, braucht diese vom Browser nur einmal im Cache gespeichert zu werden und steht danach für alle weiteren angeforderten Seiten zur Verfügung. Dadurch wird nicht nur der Server entlastet, sondern es entsteht ein weiterer unschlagbarer Vorteil. Sollen nämlich Veränderungen an Text-Größe, Farbe, Hintergründen oder Randlinien vorgenommen werden, verändert der Designer nur die CSS-Datei und die Änderungen gelten für alle Webseiten, die auf das CSS-Dokument zugreifen. Auch ältere Browser können XHTML-Seiten darstellen profitieren aber nicht von den neuen Vorzügen, wie die gegenwärtige Browser-Generation. Außerdem funktioniert XHTML auch hervorragend in PDAs, Mobiltelefonen und spezialisierten Browsern wie z.B. Lynx.

DOCTYPE & Namespace

XHTML Dokumente beginnen mit Elementen, die dem Browser erklären, wie er sie zu interpretieren hat. Das <!DOCTYPE>-Tag gibt hierbei die Document Type Defintion, kurz DTD, an. Das Tag muss immer in Großbuchstaben geschrieben werden und beeinflusst die Darstellung in modernen Browsern. Denn es gibt drei Möglichkeiten der DTD:

Von allen drei Versionen ist XHMTL 1.0 Transitional diejenige, die HTML am nächsten steht. Sie vergibt dem Designer, wenn Layout-Vorgaben im HTML-Dokument selbst erscheinen und erlaubt veraltete Elemente wie z.B. das <font>-Tag und das Öffnen von Links in einem neuen Fenster. Außerdem toleriert Transitional obendrein das Kolorieren von Tabellenzellen, dass die Strict-Methode vehement untersagt. Kurz und bündig: XHTML 1.0 Transitional ist die perfekte DTD für Designer, die den Übergang (Transition) zu modernen Web Standards beschreiten.

Hinter der DTD folgt auf dem Fuß die »XHTML namespace«-Deklaration. Sie erlaubt die Identifikation der Dokumente, indem sie mittels Link auf die Online-Version der Regeln verweist. Weiterhin spezifiziert sie im »lang«-Attribut, in welcher Sprache das Dokument vorliegt. Alles in allem sieht unser Dokumenten-Kopf dann so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

Los geht’s mit Struktur - <div> & <span>–Container

<span> und <div> sind zwei Tags, die erst im Zusammenhang mit Stylesheets Sinn ergeben. Beide Tags haben keinerlei Eigenschaften und dienen dazu mehrere HTML-Elemente, die visuell zusammengehören, aufzunehmen. Der kleine aber feine Unterschied zwischen beiden Elementen ist der, dass nach einem schließenden <div>-Tag ein Umbruch vom Browser erzeugt wird. So eignet sich nur das <span>-Tag für spezielle Layout-Wünsche innerhalb eines Blocks. Man bezeichnet es deswegen auch als Inline-Element.

Da wir zuerst das Layout unserer Webseite in inhaltliche Container unterteilen wollen, müssen wir diese erst einmal strukturieren. Dabei gehen wir von einem zweispaltigen Layout aus, dass eine Kopf- und Fußzeile besitzt (siehe Abbildung). Zusätzlich möchten wir noch einen Notizkasten realisieren, der innerhalb der rechten Spalte angezeigt wird. Daraus ergibt sich dann der folgende XHTML Code:

<div id="kopfzeile">
  Kopfzeile
</div>

<div id="linkespalte">
  Linke Spalte
</div>

<div id="rechtespalte">
  <div id="notizkasten">Notizen</div>
  Rechte Spalte
</div>

<div id="fusszeile">
  Fußzeile
</div>

Annotiertes Beispiel eines zweispaltigen XHTML-Layouts mit Kopf-, Fuß-, linker und rechter Spalte am Beispiel der Website id.eology.de
Zweispaltiges Layout mit Kopf- und Fußzeile

Neu hinzugekommen ist in unserem Listing der id-Selektor. In einem XHTML-Dokument darf jeweils nur ein Name pro id-Selektor vergeben werden, da sonst der Browser bei der Darstellung durcheinander kommt. Mit Hilfe der id-Selektoren verknüpfen wir unser Dokument mit dem dazugehörigen Stylesheet. Damit der Browser dieses vorher lädt, verlinken wir die HTML- mit der CSS-Datei und fügen zwischen den <head>-Tags die folgende Zeile ein:

<link rel="stylesheet" href="styles.css" type="text/css">

Wird nun das HTML-Dokument geladen, lädt der Browser außerdem unser Stylesheet mit Namen »styles.css«. Dieses beinhaltet die von uns gewünschten Layout-Vorgaben (siehe Kasten 1).

Positionierung von Boxen

Zur Positionierung von Containern bzw. Boxen mit Inhalten bietet uns CSS drei verschiedene Methoden an: »normal«, »float« und »absolute«. Die Darstellungsmethode kann für jede Box unabhängig von den anderen Boxen mit den Befehlen »position« und »float« gewählt werden. Ist keiner der Befehle gesetzt, wendet der Browser die Standardvorgehensweise an und ordnet die Boxen der Reihenfolge nach untereinander an. Das geschieht aber auch dann, wenn der Browser CSS nicht unterstützt. Bei korrekter Verschachtelung der Container bleibt somit auch hier die logische Struktur des Inhaltes erhalten.

Mit dem Attribut »float« schiebt man eine Box an den linken oder rechten Rand und der übrige Inhalt fließt an der jeweils anderen Seite vorbei. So erhält in unserem Beispiel die Kopfzeile das Verhalten »float: normal« und die linke Spalte schieben wir mit »float:left« an den linken Rand. Die rechte Spalte fließt somit um die linke. Da »float: normal« eine Standardeinstellung ist, muss sie nicht angegeben werden.

Mit der Anweisung »position« kann man Inhalte absolut oder relativ positionieren. Mit »position: absolute« lässt sich somit eine Box an einer bestimmten Stelle festnageln. Dafür braucht man nur noch den Attributen »top«, »bottom«, »right« oder »left« einen pixelgenauen Wert anzugeben. So tackert »top: 30px; left: 30px;« eine Box bei den Koordinaten 30,30 fest. Wird für die gleiche Box jedoch eine relative Positionierung angegeben, orientiert sie sich am Verhalten der anderen Boxen. Dadurch können z.B. Boxen, die ineinander verschachtelt sind, wie in unserem Beispiel der Notizkasten, innerhalb der anderen Box positioniert werden.

Das bedeutet für unser Layout: Nachdem wir mit »float:left« unsere linke Spalte an den linken Rand geschoben haben, geben wir ihr eine feste Breite von 240 Pixel. Da die Box auch einen Rand (Border) von 5 Pixeln und eine Polsterung (Padding) von weiteren 5 Pixeln bekommt, breitet sie sich in der horizontalen mit 260 Pixeln aus (2*5 + 2*5 + 240 = 260). Aus diesem Grund verschieben wir unsere rechte Spalte um 260 Pixel und geben ihr mit »margin-left: 260px« einen Rand.

Zum Schluss bleibt noch die Fußzeile übrig. Da sie auf jeden Fall unterhalb der beiden Spalten erscheinen soll, unterbrechen wir die Eigenschaften des float-Befehls. Dies geschieht mit dem Befehl »clear: both«. Sie unterbricht den Fluss um ein mit float ausgerichtetes Element.

Optisches Styling via CSS

Während das korrekte Positionieren von Box-Elemente so einige Kopfschmerzen bereitet, macht das visuelle Gestalten der Boxen so richtig Vergnügen. Dank CSS bieten sich vielfältige Möglichkeiten einem Container einen schönen Anstrich zu verpassen. Denn neben eigenen Farben für Rand (border) und Hintergrund (background), lässt sich einer Box auch ein eigenes Hintergrundbild zuweisen, dass obendrein noch ausgerichtet werden kann. Zusätzlich können Ränder auch gepunktet oder gestrichelt dargestellt werden (siehe Screenshot).

Im Browser gerenderte XHTML-Demoseite mit roten Annotationen zu den einzelnen CSS-Eigenschaften wie background-color, border und padding
Optisches Styling der Boxen via CSS

Die goldene Mitte

Zum guten Schluss möchten wir unser tabellenloses Layout noch im Browserfenster zentrieren und auf eine Breite von 700px reduzieren. Daher brauchen wir einen weiteren Container, hier »#gesamteseite«, der all unsere Boxen in sich aufnimmt. Da wir den Attributen für die linke und rechte Seite keine festen Werte zuweisen, sondern sie jeweils auf »auto« setzen, zentriert sich die Box in der Mitte.

Da der IE 5 dieses Verhalten nicht korrekt darstellt, müssen sich Webdesigner eines Tricks bedienen. Dazu wird zuallererst das <body>-Tag mit »text-align:center« zentriert. Damit nicht alle weiteren Inhalte mittig erscheinen, wirken wir dem Ganzen mit einem »text-align:left« für unseren #gesamteseite-Container entgegen. Nun sollte das Layout auch im IE 5 zentriert ausgerichtet sein.

Tipps

Für den richtigen Umgang mit tabellenlosem Layout sollten Sie sich nicht als aller erstes ihre eigene Homepage vorknüpfen, sondern erst einmal anhand einer einfachen Datei, wie in unserem Beispiel, die Funktions- und Denkweise beibringen. Außerdem sollten Sie stets das Layout in Opera, Mozilla und IE testen, da die Browser auch in ihren aktuellen Versionen noch immer (X)HTML-Inhalte verschieden darstellen. Schließlich sollten Sie beachten, dass es zur Zeit noch außerordentlich schwierig ist tabellenloses Layout bis auf den Pixel genau zu justieren. Geben Sie den Elementen darum ein wenig Raum. Sollten Elemente ihrer Website trotzdem pixelgenau dargestellt werden, so erlaubt Transitional XHTML natürlich den Einsatz von Tabellen. Sinnvoll bietet sich diese Arbeitsweise oft bei der Navigation an. Da sie meist den Brand der Marke transportiert, ist es wünschenswert, dass sie in allen Browser gleich aussieht.

Kasten 1: Die CSS-Datei

/* HAUPTEINSTELLUNGEN */
body {
  margin: 0px;
  padding: 0;
  background-color: #990000;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  text-align: center;
}

img {
  border: 5px solid #fff;
  float: left;
  margin-right: 5px;
}

/* STRUKTUR */
#gesamteseite {
  width: 700px;
  margin: 40px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  text-align: left;
}

#kopfzeile {
  margin: 0;
  padding: 5px;
  border: 0px solid #0ff;
  background-color: #aff;
  background: white url(background.jpg);
  background-repeat: repeat-x;
}

#linkespalte {
  margin: 0;
  padding: 5px;
  float: left;
  background-color: #cfc;
  border: 5px dashed #0f0;
  width: 240px;
}

#rechtespalte {
  margin: 0;
  margin-left: 260px;
  padding: 5px;
  background-color: #aaf;
  border: 5px solid #00f;
}

#notizkasten {
  margin: 0;
  padding: 5px;
  width: 30%;
  float: right;
  background-color: #fff;
  border: 5px solid #ff0;
}

#fusszeile {
  margin: 0;
  padding: 5px;
  background-color: #fcf;
  clear: both;
  border: 5px dotted #f0f;
}

Kasten 2: Die 10 wichtigen XHTML-Regeln

  1. Eröffnen Sie das XHTML-Dokument mit dem dazugehörigen DOCTYPE und NAMESPACE
  2. Deklarieren Sie den Inhalts-Typ Mithilfe des META Content Elements: <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />.
  3. Schreiben Sie alle Elemente und Attribute in Kleinschrift.
  4. Alle Attribut-Werte gehören zwischen Anführungsstriche.
  5. Weisen Sie allen Attributen Werte zu.
  6. Schließen Sie jedes Tag mit einem Endtag.
  7. Schließen Sie »leere« Tags mit einem Leerzeichen und Schrägstrich (Beispiel: <br /> oder <hr />).
  8. Benutzen Sie keine doppelten Bindestriche in einem Kommentar.
  9. Garantieren Sie, dass im Text das Kleiner-Als-Zeichen »<« und das Kaufmannsund »&« als < und & ausgeschrieben werden.
  10. Benutzen sie keine veralteten Tags wie <font>, <center>, <u>, <strike> oder <applet> und keine veralteten Attribute wie noshade, nowrap, size oder bgcolor.

Werkzeuge, Bücher & Ressourcen