Mehr Freiheit durch mehr Selektoren

Dies steht fest: CSS 3 wird einige neue Selektoren mitbringen. Derzeit sieht der Entwurf vor, drei neue Attributsselektoren (E[foo^='bar'], E[foo$='bar'] und E[foo*='bar']), eine Reihe neuer Pseudoklassen (wie E:root und E:not(s)) sowie einen neuen Geschwisterkombinierer ~ (E ~ F) einzuführen. Zudem wird syntaktisch zwischen Pseudoelementen und -klassen unterschieden werden, indem Pseudoelemente (wie ::first-line) mit zwei Doppelpunkten, Pseudoklassen (wie :last-child) aber nur mit einem Doppelpunkt beginnen.

Die neuen Selektoren werden es ermöglichen, wesentlich einfacheren HTML-Code zu schreiben, da in sehr vielen Fällen auf Klassen und IDs verzichtet werden kann – dies ist derzeit in der Praxis schwer zu realisieren beziehungsweise basiert mehr auf kontextuellen Selektoren. Einige Beispiele:

• h1 ~ div trifft auf alle div-Elemente zu, denen ein h1-Element vorangeht;
• a[href^='http://'] trifft auf alle a-Elemente zu, deren href-Attribut mit der Zeichenkette "http://" beginnt;
• img[src$='.gif'] trifft auf alle img-Elemente zu, deren src-Attribut mit der Zeichenkette ".gif" endet;
• div[title*='belanglos'] trifft auf alle div-Elemente zu, deren title-Attribut die Zeichenkette "belanglos" beinhaltet;
• :root trifft auf das Hauptelement des Dokuments zu (in HTML würde der Selektor body:root nicht zutreffen);
• tr:nth-child(2n) (dasselbe wie tr:nth-child(even)) trifft auf alle tr-Elemente zu, die das zweite Kind ihres Elternelements sind, in diesem Fall also jede gerade Tabellenzeile (für jede ungerade Zeile gilt tr:nth-child(2n+1) beziehungsweise tr:nth-child(odd));
• img:nth-of-type(2n) trifft auf jedes zweite img-Element zu (man beachte den Unterschied zur Pseudoklasse :nth-child(n)!);
• li:last-child trifft auf das letzte li-Element einer Liste zu;
• address:only-child trifft auf alle address-Elemente zu, die einziges Kind ihres Elternelements sind;
• h2:target trifft auf alle h2-Elemente zu, deren id-Attributswerte dem Fragmentidentifikator des Dokumentaufrufs entsprechen (beim Aufruf der URL http://www.example.org/#einleitung trifft h2:target auf das Element <h2 id="einleitung" /> zu);
• input:disabled trifft auf alle input-Elemente zu, die "deaktiviert" sind;
• div:not(.error) trifft auf alle div-Elemente zu, deren Klasse nicht error lautet;
• p::selection trifft auf jede vom Benutzer vorgenommene Auswahl oder Hervorhebung eines p-Elements zu.

In der Schwebe sind zudem Vorschläge wie die :matches- beziehungsweise :has-Pseudoklasse, die es ermöglichen würde, Elemente zu formatieren, die bestimmte Kinder haben: p:has(span) trifft auf alle Absätze zu, die ein span-Element beinhalten.

Nicht mehr ein, sondern zwei Boxmodelle mit box-sizing

Mit der box-sizing-Eigenschaft wird CSS 3 eine alternative Form des CSS-Boxmodells bieten. Nach CSS 1 und 2 definieren die Werte der width- und height-Eigenschaften die Breite und Höhe des Inhalts eines Elements, nicht seiner gesamten Box (mitsamt Inhalt, Innenabstand, Rahmen und Außenabstand). Der Standardwert von box-sizing, content-box, entspricht diesem Modell. Der alternative Wert, border-box, bezieht in die Breite und Höhe neben dem Elementinhalt auch Innenabstand und Rahmen ein.

Während der Code

div#beispiel {
padding: 50px;
width: 300px;
}

gemäß CSS 1 und 2 eine Gesamtbreite von 400 Pixel ergibt, wird dieselbe Regel mit der Deklaration box-sizing: border-box; in einer Breite von 300 Pixel resultieren, wobei dem Elementinhalt aufgrund des horizontalen Gesamtinnenabstands von 100 Pixel nur noch 200 Pixel zustehen würden.

Assistive Technologien und der reader-Medientyp

Spätestens mit Dafürhalten des Barrierefreiheitsexperten Joe Clark wurde der Medientyp reader in den Entwurf zu CSS 3 aufgenommen. Die bisherigen CSS-Spezifikationen sehen es vor, daß ein User-Agent zu einer bestimmten Zeit immer nur einen Medientyp beziehungsweise eine Ausgabeart verwendet, auch wenn er mehrere unterstützen und zwischen diesen wechseln darf. Der reader-Medientyp würde einige dieser Ausgabearten (wie screen und speech) gewissermaßen vereinen.

Prinzipiell könnte dieser Medientyp angewendet werden, um die bekannten Probleme zum Beispiel mit dem "Fahrner Image Replacement" zu umschiffen:

@media reader {
  h1 span {
  visibility: visible;
  }
}

Werte berechnen mit calc

Eine der ersehntesten Neuerungen in CSS 3 könnte die calc-Funktion werden – leider ist sie bislang noch fast gar nicht spezifiziert. Wenn sie es in angedachter Form in die Spezifikation schafft, wird sie es ermöglichen, Werte einer Eigenschaft wie folgt zu berechnen (hier bei drei angenommenen spalte-Containern):

div.spalte {
float: left;
margin: 1em;
width: calc(100%/3 - 2*1em);
}

Mehrere Hintergrundbilder mit background-image

Eine nützliche Veränderung erfährt wahrscheinlich die bereits bekannte background-image-Eigenschaft, die mit der neuen Spezifikation mehrere Hintergrundbilder zulässt. In der einfachsten Form sieht diese vor, daß bei Angabe von zwei Hintergrundbildern (in kommaseparierter Form) das erste über dem zweiten angezeigt wird:

html {
background-image: url(bild-1.gif), url(bild-2.gif);
}

In Kombination mit anderen background-Eigenschaften (wie background-position, background-repeat, aber auch dem neuen background-size) ergeben sich hieraus einige neue Möglichkeiten für Designer und Entwickler. Da dieser Artikel nur kurz auf zu erwartenden CSS-3-Zauber eingeht, wird Interessierten ein Blick in das CSS-3-Hintergrund- und Rahmen-Modul nahegelegt.

"Transparenter" mit opacity

Die opacity-Eigenschaft macht offiziell, was abseits der Spezifikation bereits in proprietärer Form vom Internet Explorer (via filter) und Gecko-User-Agents (via -moz-opacity) angeboten wird: Die Änderung der Deckkraft eines Elements. Bilder, die nur mit halber Deckkraft dargestellt werden sollen, würden mit der neuen Eigenschaft wie folgt bedacht werden:

img {
opacity: .5;
}

Abgerundete Ecken mit border-radius

Eine weitere oft gewünschte Formatierungsmöglichkeit stellen abgerundete Ecken dar, was in CSS 3 mit der border-radius-Eigenschaft adressiert werden soll. Ein ein Pixel breiter gepunkteter schwarzer Rahmen, der in allen Ecken mit fünf Pixel Radius abgerundet wird, könnte dann einfach erzielt werden:

div {
border: 1px dotted black;
border-radius: 5px;
}

Anmerkung: Die Spezifikation beschreibt bisher noch nicht, wie die border-Kurzschreibweise border-radius integriert, aus diesem Grund wurde border-radius im Beispiel separat gekennzeichnet. Mit der neuen Eigenschaft können übrigens auch Ellipsen beschrieben werden: border-radius akzeptiert zwei Längenangaben, wobei deren erste den horizontalen, die zweite den vertikalen Radius definiert (Ausnahmen davon sind noch nicht hinreichend spezifiziert).

Neue Fenster und Tabs mit target

Die target-Eigenschaft ist eine neue Eigenschaft, die aller Voraussicht nach als Kurzschreibweise für die Eigenschaften target-name, target-new und target-position dienen wird. An dieser Stelle soll nur der Einsatz der target-new-Eigenschaft beschrieben werden, die mit den drei erlaubten Werten window, tab und none auch sehr einfach gestrickt ist:

a {
target: tab;
}

…womit sich alle Links in einem neuen Tab öffnen würden (dies funktioniert, auch wenn hier die Kurzschreibweise target anstelle von target-new eingesetzt wird). Die Eigenschaft target-name mit ihrem Standardwert current spezifiziert den Namen des Linkziels, target-position mit dem Standardwert above die Plazierung des Ziels.

Anmerkung: Mit XHTML 2.0 werden voraussichtlich mehr potentielle Ziele als nur a-Elemente zur Anwendung der target-Eigenschaft zur Verfügung stehen, denn bisher sieht der W3C-Entwurf vor, daß das href-Attribut auf allen Elementen angegeben werden darf, also alle Elemente einen Hypertext-Link repräsentieren können.

Zurück in die Zukunft mit marquee

Zum Ende dieses kleinen Ausblicks auf CSS 3 begrüßen wir die CSS-Antwort auf das proprietäre und "ausgestorbene" marquee-Element: Die marquee-Eigenschaft, Kurzform für die Eigenschaften marquee-style, marquee-direction, marquee-speed und marquee-repetition. Zwar können nur vage und deshalb noch nicht stichhaltige Argumente gegen diese Eigenschaft(en) vorgebracht werden, doch wir bringen unsere besondere Wiedersehensfreude zum Ausdruck, indem wir diese Neuigkeit nur erwähnen.

Zum Autor

Jens Meiert zaubert hauptberuflich für GMX, treibt sich ständig beim W3C und in anderen Organisationen herum, hat just sein Buch Webdesign mit CSS veröffentlicht und träumt in spitzen und geschweiften Klammern.

Durch gezieltes gruppieren gleichartiger Layoutelemente als da wären Listen, Links, Absätze und so weiter und so weiter entsteht die Möglichkeit, wie wir später sehen werden, schnell vom einen zum anderen zu springen, um somit das lästige hin- und herscrollen überflüssig werden zu lassen. Die einzelnen Gruppen könnte man z.B. so unterteilen:

• Allgemein
• Links
• Struktur
• Navigation
• Listen

Das soll uns als Auswahl genügen. Diese hier gewählten Unterpunkte des Stylesheets erheben keinesfalls Anspruch auf Vollständigkeit und sollten möglichst so gewählt werden, dass man erstens selbst später noch weiß was sie bedeuten sollen und sie, zweitens, dahingehend allgemein verständlich sind, dass wenn z.B. in Gruppen an einer Webseite gearbeitet wird, jedes Teammitglied unabhängig von den anderen aus dem Quellcode des Stylesheets erkennt welche Anweisungen welchen Teil der Seite beeinflussen.

Kennzeichnung der Gruppen

Wenn man einmal eine zufriedenstellende Auswahl getroffen hat ist es ratsam das Stylesheet zu allererst optisch zu trennen bzw. die einzelnen Gruppen von einander unterscheidbar zu machen. Eine Möglichkeit wäre z.B. folgende:

/* Navigation
===============================================*/
#menu {

float: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
width: 750px;
}
/*=============================================*/

Auf diese Weise fallen einem von einander getrennte Teile schneller ins Auge und durch den einführenden Kommentar (in unserem Beispielfall /* Navigation) bekommt das ganze gleiche eine Art Zwischenüberschrift, die erklärt welche Anweisungen sich in diesem Abschnitt des Stylesheets befinden. Das hat sich mit der Zeit als sehr praktisch erwiesen, ist aber dennoch noch nicht ganz perfekt.

Gezieltes Arbeiten

Um sich letztlich möglichst präzise durch die Stylesheets, die bei größeren Projekten durchaus eine Länge von 1000 Zeilen erreichen, bewegen zu können fehlt noch eine Kleinigkeit. Man sollte sich angewöhnen gut Freund mit der Suchfunktion (STRG + F) des Editors seines Vertrauens zu werden. Diese dient quasi als Fortbewegungsmittel innerhalb des Stylesheets. Wenn man, orientiert an obigem Beispiel, also gerade relativ weit unten im Stylesheet die Listen verfeinert und sich nun der Navigation widmen möchte gibt man seinem Taxifahrer also per Eingabe von Navigation zu verstehen wo man hinmöchte. Eigentlich reichen dabei die ersten drei Buchstaben zumeist aus. Allerdings ist die jetzige Unterscheidung innerhalb unseres Stylesheets noch etwas irreführend, da man durchaus mit IDs oder Klassen arbeiten kann, die auch mit Nav
beginnen und schon wird die eigentlich sinnvolle Unterscheidung irreführend. Ein kleiner Trick schafft da Abhilfe:

/* =Navigation
===============================================*/
#menu {

float: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
width: 750px;
}
/*=============================================*/

Die einzige Veränderung, die wir noch vorgenommen haben ist das "Gleichheitszeichen" vor der "Zwischenüberschrift" im Stylesheet. Dieser kleine Effekt hat aber in der Praxis durchaus große Wirkung. Wenn man jetzt nämlich der Suchfunktion per =Nav zu verstehen gibt, dass man im Abschnitt der Navigation weiterarbeiten möchte, kommt man mit Sicherheit besser ans Ziel. Mit etwas Übung kann man sich auf diese Weise sehr schnell durch die Stylesheets bewegen und ganz nebenbei hat man sich noch eine Struktur geschaffen, die ggf. auch für andere leichter zugänglich ist.

Weiterführende Links

• CSS-Hack Management .
• CSS Tip Flags .

Zum Autor

Knut Karnapp studiert Wirtschaft in Chemnitz und beschäftigt sich seit 1998 mit Webentwicklung. Nebenbei betreibt er, wie sehr viele der Webkrauts, einen Blog.

Gehen wir von dem einfachen folgenden Beispiel aus:

  
• Home

  

• About

  

• Portfolio

  

• Kontakt

Es handelt sich hierbei also um eine Navigation mit vier Punkten. Der aktive Menüpunkt wird im Markup auf der jeweiligen Seite durch die CSS-Klasse "aktiv" gekennzeichnet.

Styling mit CSS

Zuächst wird für alle Browser eine einheitliche Ausgangssituation hergestellt, indem Innen- und Außenabstand auf 0 gesetzt werden. Mit list-style: none; werden zudem alle Aufzählungspunkte der Liste entfernt.

ul#navigation {
  list-style: none;
  margin: 0;
  padding: 0;
}

Alle anderen Stile und Funktionalit�ten werden nun den Links hinzugefügt. Zu Beginn bringen wir ein wenig Farbe ins Spiel, indem Hintergrundfarbe und die Farbe der Links angepasst werden.

ul#navigation a {
  background-color: #005;
  color: #fff;
}

Wie bereits gesagt, kann über die CSS-Klasse "aktiv" ein separates Styling für den Link zu aktuellen Seite eingeführt werden. Der Einfachheit halber beschränken wir uns hier lediglich auf eine andere Hintergrundfarbe.

ul#navigation a.aktiv {
  background-color: #eef;
  color: #005;
}

Zu einer ordentlichen Navigation gehören zudem Hover-Effekte. Die setzen wir schnell und einfach mit der Pseudo-Klasse :hover um.

ul#navigation a:hover {
  background-color: #009;
}

Vertikale Navigation

Jetzt ist entscheidend, wie die Navigation in die Seite eingebunden wird. Zum Einen besteht die Möglichkeit diese vertikal als Sidebar neben dem Inhalt zu platzieren. Zum Anderen kann die Navigation als horizontale Version am Seitenkopf platziert werden.

Beginnen wir mit der vertikalen Version. Hierfür muss zunächst die Breite der Liste eingeschränkt werden (width: 20%;).

ul#navigation {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 20%;
}

Natürlich möchten wir, dass der Link die gesamte Breite der Liste ein nimmt. Die display-Eigenschaft wird dafür auf block gesetzt.

ul#navigation a {
  background-color: #005;
  color: #fff;
  display: block;
  padding: 5px;
  text-decoration: none;
  width: 100%;
}

Hier stößt man allerdings auf die ersten Probleme bezüglich der Browserkompatibilität. Denn der Internet Explorer unter Windows interpretiert diese Eigenschaft falsch, sodass es notwendig wird, die Breite des Blocks explizit mit width: 100%; anzugeben. Das wiederrum führt zu Problemen mit Netscape, Mozilla und IE/Mac. Um diese zu umgehen, verwenden wir den Child-Selektor und setzen die Breite des Links auf auto. Diese Anweisung wird von IE/Win ignoriert, da dieser Child-Selektoren nicht interpretieren kann.


html>body ul#navigation li a {
  width: auto;
}

Horiziontale Navigation

Auch eine horizontale Anordnung der Navigation ist relativ einfach umzusetzen. Das Floating der Listenelemente wird dafür auf left gesetzt.

ul#navigation li {
  float: left;
}

Dabei ist allerdings darauf zu achten, dass die Breite eines Links nicht mit 100% anzugeben ist. Der Internet Explorer interpretiert das wieder falsch. Die Links werden dann über die gesamte Breite der Seite dargestellt. Es genügt die Angabe width: auto; für alle Browser.

ul#navigation a {
  background-color: #005;
  color: #fff;
  display: block;
  padding: 5px;
  text-decoration: none;
  width: auto;
}

Zusammenfassung

Zusammenfassend kann gesagt werden, dass durch das Zusammenspiel von HTML und CSS genügend Möglichkeiten bestehen, die Navigation als semantisch korrekte Liste auszuzeichnen, ohne das dabei Einschränkungen bezüglich des Designs entstehen. Es bestehen weitaus mehr Möglichkeiten, als das hier angeführte Beispiel zeigt.

Weiterführende Links

• Mark Newhouse: Taming Lists .
• Wolfgang Barthelme: Listen stylen mit CSS .
• SELFHTML: CSS-basierte Navigationsleisten .
• Barrierefreies Webdesign: Das Rückgrat eines Webauftrittes: Die Navigation .
• Tutorium: Barrierefreie Navigationsmen�s .
• Listutorial .
• Listamatic .

Zum Autor

Oliver Roick lebt in Jena und studiert dort Geographie mit Schwerpunkt Geoinformatik. Seine Freizeit gestaltet er mit Konsum von tschechischem Bier und Regionalliga-Fußball.

Obwohl Davids Originalskript seine Arbeit gut ausführt, ist es dennoch in der Anwendung äußerst spezifisch und beschränkt:

• Es funktioniert nur für eine einzige Tabelle, die mittels id Attribut identifiziert wird und mindestens eine tbody Sektion beinhalten muß.
• Es kann nur Hintergrundfarben setzen.
• Es sind nur zwei Farben für gerade und ungerade Zeilen erlaubt.
• Es wirkt auf Datenzellen, anstatt Zeilen, und auch nur dann, wenn noch keine class oder Hintergrundfarbe definiert ist.

Einen Schritt weiter

In einem meiner Projekte mußte ich vor kurzem einer ungeordneten Liste einen gestreiften Effekt verleihen. Anstatt einfach den Zebra Tables Code für diesen speziellen Fall zu modifizieren, entschloß ich mich, das Skript komplett neu zu schreiben, um es genereller zu machen.

Da das splintered striper Skript nun etwas mehrzweckiger ist, wurde meine Funktion zwangsweise etwas komplexer. Im Gegensatz zum Originalskript, welches nur einen einzigen Parameter brauchte (die ID der Zieltabelle), wird die neue Funktion wie folgt aufgerufen:

striper('[Elternelement Tag]','[Elternelement Klasse oder null]','[Kindelement Tag]','[komma-getrennte Klassenliste]')

Diese neue, relativ selbsterklärende Funktion:

• wirkt auf jede Art von Elternelement (und, falls man es spezifiziert hat, nur auf jene mit einer bestimmten Klasse),
• setzt den Kindelementen innerhalb der Elternelemente zwei oder mehr Klassen (anstatt nur zwei Hintergrundfarben),
• lässt jegliche Klassen, die schon an die Kindelemente vergeben wurden, intakt.

Das Skript in Aktion

Die Demoseite zeigt drei Anwendungsbeispiele. Der Einfachheit halber rufen wir die striper Funktion direkt vom onload Attribut im body auf. In einer echten Produktionssituation würden wir das Skript an den onload Handler anhängen; da wir verschiedene Variablen an die striper Funktion weitergeben müssen, würde das ungefähr so aussehen:

window.onload = function() { striper('tbody','gestreift','tr','ungerade,gerade'); }

Danke an einen anderen Patrick für diese Verfeinerung meines Originalskripts, in dem ich ursprünglich eine Wrapper-Funktion vorgeschlagen hatte.

Abschließende Gedanken

Das Skript ist für Situationen gedacht, in denen wir ein großes statisches Dokument nachträglich im Browser stylen möchten; falls das Dokument aber dynamisch mittels serverseitiger Skripte generiert wird, macht es natürlich mehr Sinn, die verschiedenen Klassen dort zu setzen.

Nur weil ich die Funktion striper nenne, heißt das nicht, daß sie nur auf Streifenmuster begrenzt ist; da es sich hier eher um ein generelles Skript zur "abwechselnden Klassen-Verleihung" handelt, kann man damit eine ganze Reihe verschiedener Effekte erzeugen.

Wie sieht es mit der Barrierefreiheit aus? Obwohl wir Javascript einsetzen, betrifft das Ergebnis nur die Präsentation und nicht die Funktionalität. Solange die Eltern- und Kindelemente schon ausreichend gestylt sind, macht es für die Barrierefreiheit keinen großen Unterschied, ob das Skript ausgeführt wird oder nicht.

In der (nicht zu fernen) Zukunft können wir uns hoffentlich das ganze Palaver mit dieser Art von Skripten sparen: wenn Browser die CSS 3-Spezifikation implementieren, werden wir diese Probleme viel eleganter mit dem nth-child Pseudo-Selektor lösen können. Aber bis es endlich soweit ist, können wir ruhig ein wenig DOM-Skripting verwenden, um Browser auf die Sprünge zu helfen.

Zum Autor

Patrick H. Lauke ist Webmaster an einer kleinen englischen Universität, arbeitet nebenbei als freier Webdesigner und Entwickler und ist ein Mitglied der WaSP Accessibility Task Force.

Zuerst müssen wir uns im Klaren sein, welche Bereiche unser 3-Spalten-Layout enthalten soll:

• Eine Kopf- und eine Fußzeile,
• eine Navigationsspalte,
• eine Hauptspalte für den eigentlichen Seiteninhalt,
• eine Spalte für Zusatzinformationen.

Screenreader sollen außerdem zuerst den Inhalt vorlesen, dann die Navigationspunkte und zuletzt die Zusatzinformationen.

Für das Design streben wir Spalten an, die bis zur Fußzeile reichen. Dass dies keine Selbstverständlichkeit ist wird sich später noch zeigen.

Die Dokumentstruktur

Der Einfachheit halber werden die hier folgenden Beispiele nur Auszüge aus dem <body>-Element sein. Für die gesamte (X)HTML-Datei kann der Quelltext der Beispielseite herangezogen werden.

Wie man am strukturellen Aufbau erkennen kann haben wir fünf Bereiche: Die Kopfzeile mit der Seitenidentität (also Logo und Tagline), die drei Spalten und den Fußbereich mit rechtlichen Hinweisen.

Die Umsetzung könnte folgendermaßen im Quelltext aussehen:


<div id="identitaet">...</div>
<div id="inhalt">...</div>
<div id="navigation">...</div>
<div id="extra">...</div>
<div id="rechtliches">...</div>


Dieser Quelltext wäre eine optimale Lösung:

• Die Elemente sind ihrem Zweck nach benannt.
• Es gibt keine Elemente, die ausschließlich für das Design eingefügt wurden.

Allerdings ist die Erstellung eines Dreispalters mit diesem Quelltext äußerst schwierig umzusetzen. Eine möglichst einfache und browserübergreifende Lösung benötigt noch ein weiteres Element. Zudem werden die Bereiche von einem weiteren <div>-Element eingefasst (<div id="wrap">), mit dem sich das Layout ebenfalls verändern lässt.


<div id="wrap">
    <div id="identitaet">...</div>
    <div id="hauptbereich">
        <div id="inhalt">...</div>
        <div id="navigation">...</div>
    </div>
    <div id="extra">...</div>
    <div id="rechtliches">...</div>
</div>


Float as float can.

Diese Struktur erlaubt es uns, die gesamte Seite mittels „Floats" (Schwebende Elemente) zu positionieren, was die nachvollziehbarste Lösung scheint. Nun müssen wir uns noch über die Breite der Spalten klar werden. Die Inhaltsspalte soll die Hälfte des wrap-Elements einnehmen, die beiden anderen Spalten jeweils 25%.

Das Prinzip der Floats ist schnell erklärt: Die Elemente werden aus dem Dokumentenfluss herausgenommen und an eine Seite verschoben. Andere Texte/Elemente laufen dann daran vorbei. Die Bilder in Zeitungen werden auf eine ähnliche Weise gesetzt.

Zuerst legen wir eine allgemeine Regel im CSS fest. Wieder ist es der Vereinfachung geschuldet, dass die Stilangaben im Beispieldokument nicht ausgelagert sondern im Dokument vorhanden sind.


* {
   margin: 0;
   padding: 0;
}

body {
   font-family: Verdana, Arial, sans-serif;
}


Nun müssen wir das CSS für die verschiedenen Bereiche schreiben.

Kopf- (#identitaet) und Fußzeile (#rechtliches)


#identitaet {
   background-color: #369A3D;
   color: #fff;
   padding: 1.2em;
}

#rechtliches {
   background-color: #707883;
}


Das reicht uns hier bereits. In einem „echten" Layout würde man wahrscheinlich noch Hintergrundbilder oder andere Gestaltungselemente einfügen. Dies benötigen wir aber in diesem Beispiel nicht.

Die Spalten

Zuerst kümmern wir uns um die Spalte für Zusatzinformationen (#extra) und den Hauptbereich (#hauptbereich). Den Hauptbereich wollen wir mit 75% Breite an den linken Seitenrand schieben, die Extraspalte an den rechten:


#hauptbereich {
   float: left;
   width: 75%;
}

#extras {
   float: right;
   width: 25%;
   background-color: #D39815;
}


Mit der Inhalts- und der Navigationsspalte verfahren wir ähnlich. Lediglich die Breite der beiden Spalten müssen wir anpassen, da sich diese auf das übergeordnete Element (in diesem Fall also auf den Hauptbereich mit 75%iger Breite) beziehen:


#inhalt {
   float: right;
   width: 66.67%;
   background-color: #002455;
   color: #fff;
}

#navigation {
   float: left;
   width: 33.33%;
   background-color: #B0001E;
}


Wenn man sich das Layout nun anschaut fallen zwei Probleme auf:

1. Die Fußleiste ist seltsam verschoben.
2. Die Spalten sind teilweise viel zu kurz und gehen nicht bis zur Fußleiste.

Die Fußzeile ganz nach unten zu versetzen ist kein Problem: #rechtliches wird folgende Anweisung hinzugefügt: clear: both;. Dadurch wird die Fußzeile nach unten, unter alle Spalten geschoben.

Das zweite Problem kann auf zwei Arten gelöst werden: Entweder man benutzt Hintergrundbilder um Spalten zu simulieren (sog. Faux Columns) oder man wendet einen Trick an, den Alex Robinson bei seiner Suche nach dem einzig wahren Layout gefunden hat. Dieser benutzt einen sehr großen Innenabstand (padding) und einen ebenso großen negativen Außenabstand (margin), die Spalten entsprechend zu erweitern:


#inhalt, #navigation, #extra, #hauptbereich {
   padding-bottom: 32767px; /* Beschraenkung durch Safari, der keinen groeszeren Wert zulaesst. */
   margin-bottom: -32767px;
}


Nun sind die Spalten aber einfach nur sehr lang. Wir müssen sie also unten kappen, und hier kommt das wrap-Element ins Spiel. Durch folgende Anweisung erreichen wir das gewünschte Ergebnis fast:


#wrap {
   overflow: hidden;
}


Was nun noch fehlt ist die Fußzeile: Sie scheint hinter die Spalten gerutscht zu sein. Folgende Anweisungen rßcken das wieder gerade:


#wrap {
   overflow: hidden;
   position: relative;
}
#rechtliches {
   background-color: #707883;
   position: relative;
   z-index: 1;
}


Jetzt haben wir ein fast perfektes Layout, das in den meisten Browsern funktionieren sollte. Lediglich Opera in der Version 8 macht Probleme. Falls man diesen Browser unterstützen will (oder muss) hilft folgender CSS-Hack. Opera 9 enthält diesen Fehler im übrigen nicht mehr, es liegt also im Ermessen des Autors ob er diesen Hack überhaupt benötigt:


@media all and (min-width: 0px) {
   #inhalt, #navigation, #extra, #hauptbereich {
      padding-bottom:0;
      margin-bottom: 0;
   }

   #inhalt:after, #navigation:after, #extra:after, #hauptbereich:after {
      padding-top:32767px;
      margin-bottom: -32767px;
      content: 'Opera 8 Fix';
      display:block;
      background: inherit;
      height: 0;
   }
}


Fluid, fix oder elastisch?

Es mag nun die Frage aufkommen, ob das Layout fluide, fix oder elastisch ist. Fluid bedeutet, dass sich die einzelnen Spalten an die Fensterbreite anpassen. Fix ist ein Layout, wenn die Breite in Pixeln angegeben wurde. Ein elastisches Layout passt sich an der Schriftgröße an. Und das schöne ist: Dieses Layout kann alle drei Layoutarten erfüllen, die Frage ist nur in welcher Einheit die Breite des wrap-Elements angegeben wird:

Fixes Layout:

#wrap {
   overflow: hidden;
   position: relative;
   width: 760px;
   margin: auto; /* Zentrierung des Layouts */
}


Fluides Layout:

#wrap {
   overflow: hidden;
   position: relative;
   width: 80%;
   margin: auto; /* Zentrierung des Layouts */
}


Elastisches Layout:

#wrap {
   overflow: hidden;
   position: relative;
   width: 45em;
   margin: auto; /* Zentrierung des Layouts */
}


Weiterführende Links

• Quelltext der Beispielseite .
• YAML: Yet Another Multicolumn Layout .

Zum Autor

Eric Eggert ist momentan Zivi in Kaiserslautern. Mit Webstandards beschäftigt er sich schon seit einigen Jahren. Nach seinem Informatikstudium soll diese Beschäftigung zu seinem Beruf werden. Er betreibt ein Weblog, in dem er unter anderem über Webentwicklung schreibt.

Die Markupsprache HTML wurde vor allem entwickelt, um wissenschaftliche Texte zu schreiben. Dabei waren die logische Struktur und natürlich die Hyperlinks wichtig. Mit der Entstehung des Internets in seiner heutigen Form stiegen die Ansprüche an die grafischen Möglichkeiten von HTML. Nach und nach erweiterten die Browserhersteller HTML mit eigenem Code, der jedoch nur zum Teil in die Standards des W3C (gegründet 1994) überging.

HTML gibt es derzeit in der Version 4.01 (1997), die noch häufig eingesetzt wird. HTML besteht aus 3 Versionen, der strengen Vatiante, strict, der freizügigen Variante, loose, und der Variante für Frames, frameset.

Mit dem Siegeszug von XML, einer Markupsprache für diverse Anwendungen, kamen neue Ideen und Umsetzungen. Einige XML-Lösungen sind für Internetseiten interessant, darunter SVG für Grafiken oder für die Umwandlung von HTML in andere Formate. Mit XHTML wurde ein Weg gefunden, wie diese Ideen umgesetzt werden können.

XHTML 1.0 (2000) ist eine direkte Fortsetzung von HTML, jedoch mit etwas strengeren Regeln. Tags und Attribute werden immer klein geschrieben, Attributwerte werden immer gesetzt und stehen immer in Anführungszeichen, Tags werden immer geschlossen.

Als zusätzlicher Effekt wird in XHTML der Quelltext besser lesbar, es ergibt sich ein einheitliches Bild.

XHTML 1.0 gibt es inzwischen in mehreren Versionen: die strenge Variante strict, die freiere Variante transitional (ähnlich wie HTML 4 loose) und die Version für Frames, frameset entsprechen denen von HTML 4. Dazu kommt die Version basic, die für mobile Endgeräte eingedampft wurde.

XHTML 1.1 entspricht in etwa XHTML 1.0 strict. Jedoch ermöglicht diese Version das Zusammenführen mehrerer XML-Sprachen in einem Dokument. Vorrausetzung dafür sind jedoch auch die Browser, von denen bisher nur wenige einen kleinen Teil der Möglichkeiten unterstützen.

Die neue Version XHTML 2 setzt verstärkt logische Tags, darunter auch neue. Formulare werden mit XForms eingebunden. Für aktuelle Internetseiten ist XHTML 2 noch nicht spruchreif.

Vergleich:

HTML

<TAG ATTRIBUTNAME=attributwert> (alleinstehende Tags wie <br> oder <hr>) oder
<tag ATTRIBUTNAME></tag> oder
<tag ATTRIBUTNAME="attributwert">

<TAG ATTRIBUTNAME=attributwert> (Tags mit weiterem Inhalt, wie <p> oder <td>)
<tag ATTRIBUTNAME></tag> oder
<tag ATTRIBUTNAME="attributwert"> usw.

XHTML

<tag attributname="attributwert" /> (alleinstehende Tags wie <br /> oder <hr />)
<tag attributname="attributwert"></tag> (Tags mit weiterem Inhalt, wie <p> oder <td>)

Auf Standard umschalten: Doctype-Switching

Für jede HTML- und XHTML-Version gibt es eine Doctype Definition (DTD), mit der festgelegt wird, was in der genannten Sprache erlaubt ist. Da ältere Browser ihre eigenen Wege gingen, weichen die Standards zum Teil von der HTML-Ausgabe ab. Um das Problem zu bewältigen, wurde das sogenannte Doctype-Switching eingeführt.

Dabei wird der ein Verweis auf die DTD am Beginn des Dokuments eingefügt, ein bis dahin kaum verwendetes Verfahren. Erkennt der Browser dieses Element, schaltet er in den Standard-Modus um. Ist das Element nicht vorhanden, wird der alte Darstellungsmodus (quirks) beibehalten.

Zu jeder HTML- und XHTML-Version gibt es so eine Doctype-Definition. Für Anfänger eignen sich die freizügigeren Auslegungen am besten. Für XHTML ist das:

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

Weiter Codeschnipsel zu diesem Thema lassen sich schnell im Internet unter dem Suchbegriff Doctype nachschlagen.

Weiterführende Links

• Barrierefreies Webdesign: Die Unterschiede zwischen XHTML und HTML.
• EfA: zurück von XHTML auf HTML, eine etwas andere Sicht
• SelfHTML: Grundgerüst einer HTML-Datei .
• W3C: XHTML 1.0: Die Extensible HyperText Markup Language (Zweite Auflage).
• Carsten Protsch: Der DOCTYPE-Switch und seine Auswirkungen.
• Netplanet: Die Geschichte des Webbrowsers.

Zum Autor

Harald Kampen, geb. 1965, lebt und arbeitet als selbständiger Programmierer und Webdesigner in Emden.

Conditional Comments (CCs) sind eine Möglichkeit, dem Internet Explorer ab der Version 5 unter Windows bestimmten Code zusätzlich zu vermitteln. Ein einfaches Beispiel wäre:

<!--[if IE]>
<p> Huch, Sie surfen ja noch mit dem Internet Explorer. Schonen Sie Ihre Nerven und steigen Sie auf den Firefox um! Oder auf Opera! Oder Safari!</p>
<![endif]-->

Die Befehle <!-- und --> weisen den dazwischenliegenden Text als Kommentar aus, der von Browsern üblicherweise nicht verarbeitet wird. Allein der Internet Explorer erkennt in der Anweisung [if IE] ein Conditional Comment und stellt den Text dar.

Verschiedene Steuerungsmöglichkeiten

Microsoft hat die Conditional Comments so angelegt, dass sie mit verschiedenen Operatoren verfeinert genutzt werden können. Zur Verfügung stehen:

So meint etwa der Ausdruck [if gte IE 6] alle Internet Explorer der Version 6 oder darüber. Der Ausdruck [if IE 5] betrifft alle Internet Explorer der Version 5.x (unter Windows). Möchten Sie zwischen 5.0 und 5.5 unterscheiden, können Sie bei den Versionen mit Dezimalstellen arbeiten. So meint [if IE 5.0] zwar die Version 5.0, nicht aber die Version 5.5.

Wozu eignen sich Conditional Comments?

Sie können CCs an jede beliebige Stelle in der XHTML-Datei einbauen. Im Beispiel oben liegt der Code zwischen den <body>-Tags. Im <head>-Bereich eignet sich diese Technik, um dem Internet Explorer ein eigenes Style Sheet zuzuweisen.


<link rel="stylesheet" type="text/css" href="allgemein.css" />
<!--[if IE]>

<link rel="stylesheet" type="text/css" href="iebugs.css" />
<![endif]-->

Die Datei allgemein.css enthält hier die korrekten Design-Anweisungen, wie sie die meisten Browser verstehen. Die Datei iebugs.css wird nur vom Internet Explorer zusätzlich geladen. Damit können Anweisungen überschrieben werden, die der IE falsch versteht (z.B. das Boxmodell) oder gar nicht interpretiert (etwa position: fixed;).
Der Vorteil an dieser Methode ist, dass Sie Ihre korrekte CSS-Datei nicht mit Hacks für den IE versehen müssen, sondern diese falschen Anweisungen auslagern können.

Als Nachteil erhalten Sie eine zusätzliche Datei. Allerdings ist es bei größeren Projekten ohnehin oft übersichtlicher, mehrere CSS-Dateien einzubinden, beispielweise unterteilt in Positions-, Schrift- und Farbanweisungen.

Berechtigte Kritik

Wie Jens Meiert beim Thema Boxmodell bereits erklärt hat, ist von den Conditional Comments aus Webstandards Sicht abzuraten. Kommentarklammern dienen dazu, einen Kommentar einzufügen. Stattdessen verstecken CCs nun Anweisungen für einen einzelnen Browser darin. Ein Extrawürstchen speziell für den Internet Explorer, der keinem allgemeinen Standard unterliegt.

Nützlich in der Praxis

Andererseits: Sobald Ihre Designs umfangreicher werden, wird es zumindest mit dem Boxmodell Probleme geben. Entweder Sie ignorieren die fehlerhafte Ansicht im Internet Explorer, verschachteln mehrere <div>-Boxen ineinander, um das Problem zu umgehen, suchen sich passende Hacks oder nutzen Conditional Comments. Alle Methoden sind unzureichend. Jeder Webworker entwickelt hier eigene Vorlieben.

Besondere Aufmerksamkeit könnte den Conditional Comments bei der Veröffentlichung des Internet Explorers 7 zuteil werden. Microsoft hat bereits angekündigt, dass in der neuen Version zahlreiche Bugs beseitigt worden seien, so dass Hacks für aktuelle Versionen des IE nun Fehler im IE 7 erzeugen. Eine Möglichkeit, den IE 7 schnell dazu zu bringen, alte Seiten mit Hacks wieder richtig anzuzeigen, wäre eine spezielle CSS-Datei – eingebaut über Conditional Comments.

Weiterführende Links

• Dr. Web: Blitzschnelle Browserweiche.
• About Conditional Comments – Die offizielle Erläuterung von Microsoft (engl.).
• bs-markup.de: CSS auf Internet Explorer 7 vorbereiten.
• Future-proof your CSS with Conditional Comments – Bruce Lawson erklärt, wie man am besten verschiedenen Browsern verschiedene CSS-Dateien serviert (engl.).

Zum Autor

Nicolai Schwarz arbeitet als selbstständiger Mediendesigner und Publizist in Dortmund. Wie viele andere Webkrauts schreibt auch er in einem eigenen Blog über Webstandards und andere Mediendesign-Themen.

Die 3 Schritte zur (hoffentlichen) Bug-Identifizierung

Da es nicht immer eindeutig ist wodurch eine Fehldarstellung ausgelöst wird, sollte man bei der Suche folgendermaßen vorgehen:

1. Käfer mögen es schmutzig … oder: Validiere deinen Quellcode

Der erste Schritt sollte immer die Validierung des Quellcodes sein. Erst wenn man weiß, dass der Aufbau des HTML-Dokuments und der CSS-Datei korrekt ist, kann man sicher gehen dass nicht bereits darin der Fehler vergraben liegt. Auch in Foren oder Newsgroups wird meist erst dann geholfen wenn diese Grundvoraussetzung erfüllt ist.

2. Käfer verkriechen sich in Ecken … oder: Zerteile deinen Quellcode

Ist die getestete Seite valide und das Problem noch nicht behoben, sollte man damit beginnen, in einer Testdatei Abschnitte des Quellcodes zu überprüfen. Taucht die Fehldarstellung z.B. nur im Navigationsbereich auf, sollte man in der Testdatei ausschließlich den HTML-Abschnitt abspeichern der die Navigation enthält. Wenn der Fehler immer noch auftaucht, löst ihn irgendeine Angabe aus die im Zusammenhang mit der Navigation steht. Alternativ scheint ein anderer Abschnitt die Wirkung auszulösen. Im zweiteren Fall kann man nun damit beginnen Stück für Stück die Abschnitte des Dokuments wieder hinzuzufügen und zu testen, ab wann der Fehler wieder aktiv wird. Im Idealfall hat man den Bug nun eingegrenzt.

3. Befrage Käfer-Experten … oder: Nutze Suchmaschinen und durchforste Webseiten, Foren und Newsgroups

Mit der erfolgreichen Eingrenzung hat man ein großes Stück Arbeit bereits erledigt. Jetzt muss man mit der gefundenen Information im Internet nach Situationen suchen, wo andere Webdesigner auf diesen Fehler gestoßen sind und hoffentlich ihre Lösung dafür veröffentlicht haben. Ein guter Anfangspunkt sind Foren die sich speziell mit dem Thema beschäftigen. Eine kluge Wahl von Begriffen führt mit Hilfe der Forensuche schon zu passenden oder thematisch verwandten Beiträgen. Alternativ kann man auch einen Beitrag mit der Bitte um Hilfe öffnen. Idealerweise enthält dieser Beitrag eine möglichst konkrete Fehlerbeschreibung, einen Link zur Testseite auf der man den Fehler nachvollziehen kann und eine Erklärung inwiefern man den Bug vielleicht schon auf einen Abschnitt des Dokuments eingegrenzt hat. Mit etwas Glück erhält man schon bald eine helfende Antwort. Bei Newsgroups wendet man die gleiche Methode an. Allerdings ist es hier manchmal schwieriger die Archive zu durchforsten.

Wenn beide Wege zu keinem Ergebnis geführt haben, kann man sein Glück noch mit einer Suchmaschine auf die Probe stellen. Allerdings ist hier meist bereits etwas Erfahrung in der Bugsuche von Nöten um geeignete Suchbegriffe zu finden. Es empfiehlt sich, Google in Verbindung mit englischen Suchbegriffen zu nutzen um so auf möglichst viele Ergebnisse zu kommen.

Die Nutzung von sogenannten Hacks

Es würde zu weit führen, wenn ich hier noch erkläre, welche Hacks es gibt und welche Vor- und Nachteile sie mit sich bringen. Ich möchte aber davor warnen, zu viele Hacks einzusetzen. Es ist zwar so, dass man manche Bugs wirklich nur dadurch lösen kann, aber es sollte möglichst nach anderen Lösungen gesucht werden. Wenn es keine Alternative gibt, ist es empfehlenswert, die Hacks innerhalb der CSS-Angaben durch Kommentare kurz zu erklären, so dass man auch später noch weiß weshalb bestimmte Formulierungen eingesetzt wurden.

Kleine Anmerkung am Rande: Das „Problem“ mit dem Internet Explorer 7

Aus gegebenem Anlass möchte ich noch kurz darauf hinweisen, dass es durch die baldige Veröffentlichung des Internet Explorer 7 zu massiven Problemen mit einigen herkömmlichen Hacks für
IE-Bugs kommen kann. Ich habe deshalb einen Link mit angegeben, der diese Thematik bespricht und eine Lösung dafür präsentiert.

Weiterführende Links

• Bugbase – deutsche Bug-Datenbank .
• Position is everything – umfangreiche Bug-Artikel .
• Quirksmode – .
• Erklärung des berühmten Box-Model Bugs .
• Peruns Blog: IE 7 – Conditional Comments .

Zur Autorin

Nina Gerling ist die Gründerin des ena Webstudios und legt ihre Interessens-Schwerpunkte auf barrierefreies Webdesign in Kombination mit moderner Gestaltung. Sie ist zudem Redakteurin des Blogs „pro Barrierefreiheit“, in dem regelmäßig Informationen zur Barrierefreiheit veröffentlicht werden.

Ein Layout besteht selten aus einer einzelnen Spalte und so legen wir für unser Beispiel eine Inhalts- und eine Nebenspalte zugrunde. Das Markup, also der XHTML-Code, soll für diese Elemente wie folgt aussehen:

<div id="inhalt">
<!-- Inhalt der Hauptspalte-->

</div>

<div id="nebenspalte">
<!-- Inhalt der Nebenspalte-- >
</div>

Wir formatieren dieses Markup per CSS.

Feste Breiten

Die erste Möglichkeit wäre, beiden Elementen eine feste Breite zu geben. Pixel sind hier die übliche Einheit. Unsere CSS-Vorgaben heißen also:

#inhalt {
float: left;
width: 520px;
}

#nebenspalte {
float: right;
width: 240px;
}

Wir gehen von einer Bildschirmbreite des Besuchern von 800×600 Pixel aus. Da wir Raum für eine Scrollbar lassen müssen, beschränken wir hier die Breite des gesamten Layouts auf 760 Pixel.

Per float wird die Inhaltsspalte links ausgerichtet, die Nebenspalte dagegen rechts. Im Realfall sind diese beiden divs meist von einem Mantel-div der richtigen Breite umschlossen, über das sich alle Elemente gemeinsam in der Mitte der Seite positionieren lassen.

Der Vorteil fester Breiten ist, dass wir pixelgenau arbeiten können. Etwa wenn es um passgenaue Bilder in den beiden Spalten geht. Außerdem können wir bei der Schrift im Zusammenspiel mit der festen Zeilenbreite auf eine gute Lesbarkeit achten.

Der Nachteil ist, dass ein solches, meist schmales Design auf einem großen Bildschirm recht verloren aussehen kann. Außerdem hat der Nutzer keine Möglichkeit, die Breite der Seite selbst zu beeinflussen.

Flexible Breiten

Wenn wir die Breiten nicht in Pixel, sondern in Prozenten angeben, wird das Design flexibel:

#inhalt {
float: left;
width: 70%;

}

#nebenspalte {
float: right;
width: 30%;
}

Diese beiden Spalten werden sich nun jeweils an der Gesamtbreite des Browserfensters orientieren. Der Bildschirm ist so immer ausgefüllt. Wenn der User wollte, könnte er sich die Breite des Browserfensters nach Belieben zurechtschieben, um so die Zeilenlänge der Spalten zu beeinflussen.

Der größte Nachteil ist, dass wir eben diesen Einfluss auf die Zeilenlänge verlieren. Auf sehr breiten Bildschirmen kann die Lesbarkeit sehr erschwert werden, falls der Nutzer seinen Browser in der vollen Bildschirmgröße geöffnet hat.
Außerdem müssen wir uns hier mehr Gedanken über die Bilder auf der Seite machen. Alle Bilder müssen auf ihren jeweiligen Positionen bei kleinen und bei großen Breiten ansprechend gesetzt werden und dürfen keine Lücken erzeugen.

Auch in diesem Beispiel sind die Spalten direkt Seite an Seite gesetzt. Um Ränder zu erzeugen, könnten wir für #inhalt und #nebenspalte die CSS-Eigenschaften margin-left und margin-right nutzen. Einfacher ist es jedoch später den Elementen innerhalb der divs, also etwa <h1> oder <p>, einen Rand zu geben.

Was ist besser?

Manche Webworker argumentieren leidenschaftlich, warum die eine Herangehensweise der anderen überlegen ist. Fakt ist, dass beide ihre Vor- und Nachteile haben. In der Praxis wägt man beide Möglichkeiten anhand des aktuellen Projektes gegeneinander ab.

Dan Cederholms Website SimpleBits eignet sich hervoragend, um beide Möglichkeiten in Aktion zu sehen. In der blauen Leiste rechts oben befinden sich zwei kleine Icons, mit denen das Layout zwischen fest und flexibel umgestellt werden kann. Diese Variante lässt dem User alle Freiheiten – und verlangt vom Webdesigner einiges Wissen über CSS.

Weitere Möglichkeiten

Anstatt rein feste oder rein flexible Breiten zu wählen, sind auch Mischformen möglich. Dann wird meist der Nebenspalte eine feste Pixel-Breite gegeben, während die Spalte für den Inhalt mit Prozentwerten arbeitet.

Mit Hilfe der CSS-Eigenschaften min-width und max-width können wir die Breiten bei flexiblen Designs besser kontrollieren. So können wir z.B. die Mindestbreite auf 760 Pixel und die Maximalbreite auf 1200 Pixel setzen, um eine gute Kontrolle über das Layout zu haben und die Lesbarkeit zu gewährleisten. Allerdings interpretiert der Internet Explorer diese Eigenschaften noch nicht.

Alternativ kann es in manchen Fällen sinnvoll sein, Breiten in der Einheit em festzulegen. Diese Einheit orientiert sich an der Schriftgröße. Die Breite der Box wächst dadurch zusammen mit der Schriftgröße. Mehr dazu finden Sie in den folgenden Links.

Weiterführende Links

• praegnanz.de: Bitte Abstand halten – u.a. über sinnvoll gewählte Spaltenbreiten.
• 1ngo.de: »em« nicht nur für Schriftgrößen! – em als Einheit für die Breite.
• roell.net: Warum feste Spaltenbreiten Mist sind – eine Meinung samt Diskussion in den Kommentaren.

Zum Autor

Nicolai Schwarz betreibt die kleine Agentur textformer Mediendesign in Dortmund. Seit etwa drei Jahren schätzt er den Sinn, die Eleganz und Überlegenheit von Web Standards und predigt diese in Webdesign-Schulungen. Wie viele andere Webkrauts schreibt er in einem eigenen Blog über Web Standards und Mediendesign.

Es gibt verschiedene Arten der Positionierung. Wird keine Positionierungsangabe mitgegeben, so werden die Elemente einfach in ihrem natürlichen Fluß positioniert (was der Angabe position:static entspräche). Inline-Elemente (z. B. a, img, span) legen sich dabei nebeneinander, Blockelemente (z. B. hx, p, div) dagegen untereinander. Möchte man ein anderes Verhalten, so kann display helfen.

Relative Positionierung

Mit position:relativekann das Element aus seinem natürlichen Fluß heraus verschoben werden. Dabei verschieben sich die umgebenden Elemente nicht mit – Überlappungen sind also möglich.
Außerdem kann ein relativ positioniertes Element auch als Elternelement für absolut positionierte dienen. Gelegentlich braucht man diese Positionierungsart auch, um Browserbugs zu reparieren – speziell dem Internet Explorer hilft es oft, Elemente wie gewünscht am Platz zu halten.

Absolute Positionierung

Durch position:absolute kann man Elemente genau an bestimmte Stellen positionieren – was auf der einen Seite verlockend erscheint, vor allem für diejenigen, die gerne ein pixelgenaues Layout wollen. Auf der anderen Seite sind absolut positionierte Layouts aber extrem unflexibel, da die Elemente keinerlei Rücksicht aufeinander nehmen – sie legen sich im Zweifelsfalle einfach übereinander und verdecken den Inhalt. Insbesondere bei Schriftvergrößerungen oder anderen Viewportgrößen gibt es oft Probleme.

Fixe Position

Mit position:fixed können Elemente auf der Seite fixiert werden – auch beim Scrollen bleibt ein so positioniertes Element zum Beispiel immer in einer bestimmten Ecke. Leider können noch nicht alle Browser diese Positionierung (genauer: der Internet Explorer kann es nicht) – außerdem muß man natürlich auch hier wieder die mögliche Überlappung und Verdeckung anderer Inhalte beachten.

Das Floaten

Doch damit nicht genug – CSS kann noch mehr!

Man braucht nicht immer positionieren, Elemente können auch einfach per float nach rechts oder links verschoben werden. Der Inhalt bleibt dabei immer sichtbar und wird nur verschoben.
Mit Floats bleibt man also sehr flexibel in der Gestaltung.
Allerdings soll auch nicht verschwiegen werden, dass es leider einige Browserprobleme gerade bei der Verwendung von float gibt, die einem das Leben manchmal schwer machen können.

Zusammenfassend läßt sich sagen, dass CSS viele Möglichkeiten an die Hand gibt, eine Webseite ansprechend zu gestalten. Tabellen als Fachwerkkrücke sind daher heute nicht mehr notwendig. Trotzdem braucht es etwas Erfahrung, weil die doch recht unterschiedlichen Browserinterpretationen nicht immer einfach zu beherrschen sind.

Weiterführende Links:

• Positionierung der Elemente – ein Artikel von Teresia Kuhr
• Seiten gestalten ohne Tabellen – eine Einführung von Michael Charlier
• Float: Die Theorie – Artikel von John P. Gallant und Holly Bergevin – übersetzt von Andreas Kalt und Jens Grochtdreis
• Das Original – die W3C-Spezifikation zum Thema (englisch)
• Position is everything – der Klassiker mit vielen Hilfen zu Browserbugs von Big John und Holly Bergevin (englisch)

Zur Autorin:

Teresia Kuhr ist Ärztin an einer Neurologischen Rehabilitationsklinik und beschäftigt sich in ihrer Freizeit mit standardkonformen und barrierefreiem Webdesign. Ein Projekt ist CSS4you.