Listen und Tabellen

CSS bietet Euch auch die Möglichkeit, die Standard-Formatierung von Listen und Tabellen abzuwandeln. Mit der Eigenschaft list-style-type könnt Ihr beispielsweise ol-Listen in griechischen Buchstaben zählen lassen oder ul-Listen mit einem Quadrat als Bullet ausstatten. Die möglichen Werte werde ich hier nicht aufzählen, da es einfach zu viele sind. Hier ist wieder mal eine Referenz die richtige Anlaufstelle.

ul-Listen nehmen sogar ein beliebiges *.gif oder *.jpg als Bullet, zugewiesen mit der Eigenschaft list-style-image

ul{list-style-image:url(bullet.jpg)}

Die Einrückung der Bullets oder Nummierungen beeinflußt die Eigenschaft list-style-position. Dabei gibt es zwei Varianten

Die Schlüsselworte lauten passenderweise auch outside und inside.

Jetzt zu den Tabellen: Im HTML-Teil wurde schon die Möglichkeit erwähnt, einer Tabelle eine Überschrift zu verpassen. Mit der Eigenschaft caption-side legt Ihr fest, wo das caption-Element angezeigt wird. Möglich sind dabei die Werte top, bottom, left und right. Allerdings setzen fast alle Browser heute nur top und bottom um; right und left werden wie top interpretiert.

Die nächste Eigenschaft löst einen kleinen Konflikt: Was passiert, wenn Ihr einer Tabelle mit width und height bestimmte Maße gebt, der Inhalt aber eigentlich mehr Platz brächte? table-layout, angewandt auf den table-Tag, legt fest, was von beiden Vorrang hat. Mit dem Wert auto kann zu großer Inhalt die Tabelle verbreitern; mit fixed wird der Inhalt notfalls abgeschnitten.

Bekanntlich kann jedes HTML-Element einen Rahmen haben. Wenn aber die Gesamttabelle einen Rahmen hat, und die einzelnen Zellen auch, habt Ihr oft gleich zwei Linien. Ob diese zwei Linien zu einer verschmolzen werden, entscheidet border-collapse

Bei leeren Zellen wird standardmäßig der Zellrahmen nicht angezeigt. Wollt Ihr die leeren Zellen doch sehen, könnt Ihr dazu die Eigenschaft empty-cells benutzen. Mit dem Wert show wird der Zellrahmen von leeren Zellen angezeigt, mit collapse erreicht Ihr das Standard-Verhalten.

Örtlichkeiten

Wie Ihr wißt, ordnet der Browser die HTML-Elemente auf Eurer Seite automatisch an. Manchmal wollt Ihr aber aus dieser Automatik ausbrechen und selbst festlegen, wo Eure Elemente erscheinen sollen. Auch das geht mit CSS, sogar in vier verschiedenen Varianten. Welche davon Ihr benutzen wollt, entscheidet der Wert der Eigenschaft position

static

ist der Standardfall. Hier übernimmt der Browser die Positionierung.

absolute

positioniert wie der Namen schon sagt absolut. Auf dieser absoluten Position läft das Element auch beim Scrollen mit.

fixed

positioniert ebenfalls absolut. Hier behät das Element jedoch auch beim Scrollen seine Position auf dem Bildschirm. Der Effekt ist ähnlich wie beim Wasserzeichen-Effekt für Hintergrundgrafiken.

relative

positioniert (wer hätte es gedacht?) relativ. Das bedeutet, Ihr könnt angeben, um wieviel das Element von seiner automatisch ermittelten Position wegbewegt werden soll.

Absolut positionierte Elemente werden aus der automatischen Positionierung herausgenommen, es bleibt also kein «Loch». Die Position legt Ihr mit Hilfe von zwei weiten Eigenschaften fest: Zum einen top oder bottom, zum anderen left oder right

Position

Dieses p-Tag wird also auf eine Position gesetzt, die 150 Pixel vom linken Rand und 50 Pixel vom unteren Rand entfernt ist. Stellt sich natürlich die Frage, von welchem Rand. Gemeint ist nämlich nicht der Bildschirmrand, sondern der Rand der Box des umgebenden HTML-Elements. Wenn der p-Tag von oben also beispielsweise in einen div-Tag eingefaßt ist, werden die angegebenen Entfernungen von den Rändern des div-Tags berechnet. Man sagt, daß das Element in aktuellen Positionierungskontext angeordnet wird. Damit Ihr Euch dieses Konzept besser vorstellen könnt, hier eine kleine Skizze.

Natürlich könt Ihr mit der absoluten Positionierung zwei oder mehr Elemente auch so anordnen, daß sie sich überlappen. Welches Element dann über den anderen liegt, und die anderen überdeckt, entscheidet eine weitere Eigenschaft namens z-index. Bei zwei absolut positionierten Element liegt das mit dem höheren z-index-Wert oben. Absolut positionierte Elemente liegen immer über nicht gesondert positionierten Elementen. Haben zwei absolut positionierte Elemente den gleichen Wert im z-index, liegt das später positionierte oben.

Die statische Positionierung ist gewissermaßen eine erweiterte Form der absoluten Positionierung. Das Element wird genauso angeordnet wie bei position:absolute; zusätzlich wird es auf dieser Position fixiert. Das bedeutet, auch beim Scrollen behät es die einmal zugewiesene Position bei. Damit könnt Ihr beispielsweise Menus realisieren, die scheinbar «über der Seite schweben» und nicht mitgescrollt werden.

Die relative Positionierung ähnelt ebenfalls der absoluten, aber mit zwei entscheidenden Unterschieden: Zum einen hinterläßt das Element an der Stelle, wo der Browser es automatisch hingesetzt hätte, ein «Loch». Zum anderen wird das Element nicht auf die mit top, bottom, left bzw. right gesetzte Position platziert, sondern um diese Werte gegenüber seiner automatischen Position verschoben. Die oben erwähnten Dinge wie z-index, Positionierungskontext und so weiter gelten auch hier.

Es gibt auch Eigenschaften, die entscheiden, ob ein Element überhaupt angezeigt werden soll. Das erscheint auf den ersten Blick etwas unsinnig (wozu etwas schreiben, was dann gar nicht zu sehen ist?), bietet aber einige schöne Möglichkeiten. Denn mit beispielsweise JavaScript könnt Ihr die CSS-Eigenschaften von Elementen auch dynamisch ändern. Ihr könnt also zum Beispiel zu einem Quiz auf Knopfdruck die Lösung sichtbar machen, oder die Unterpunkte eines Drop-Down-Menus je nach Bedarf ein- oder ausschalten.

Dabei gibt es zwei unterschiedliche Möglichkeiten: Mit der Eigenschaft visibility entscheidet Ihr darüber, ob das Element sichtbar sein soll oder nicht. Mit dem Wert none wird anstelle Eures Elements ein entsprechend großes «Loch» angezeigt. Sichtbar ist das Element mit dem Wert visible.

Fast das gleiche erreicht Ihr mit der Eigenschaft display. Hier wird jedoch bei display:none kein «Loch» gelassen; das Element wird beim Aufbau der Seite einfach übersprungen. Zum Einblenden setzt ihr display auf run-in oder compact (bewirken beide das gleiche). Es ist sogar möglich, ein Element zwangsweise als Blockelement (block) oder Inline-Element (inline) einblenden zu lassen, mit den entsprechenden Konsequenzen für die Platzierung des Elements.

Schließlich gibt es sogar eine Eigenschaft zum teilweisen Ausblenden von Elementen. Man spricht hier von clipping. Dazu legt Ihr mit Hilfe der bereits bekannten Attribute width und height eine kleinere Box fest, als das Element eigentlich groß ist. Was mit dem «überstehenden» Rest passiert, entscheidet die Eigenschaft overflow. Mit dem Wert hidden wird der Rest einfach abgeschnitten; der Wert scroll blendet der Browser bei dem Element Scrollbalken ein. Die Eigenschaft clip ermöglicht es sogar, den anzuzeigenden Ausschnitt explizit anzugeben

.partial{width:300px;
              height:150px; 
	      overflow:hidden; 
	      clip:rect(10px 450px 160px 300px)}

Wie die Werte zustandekommen, ist am einfachsten mit einer kleinen Zeichnung verdeutlicht. Dabei steht '1' für den ersten Wert und so weiter.

Zum Abschluß der ganzen Positioniererei noch die Eigenschaft float. Sie nimmt ein Element aus dem normalen Fluß der Elemente heraus. Mit dem Wert left setzt Ihr das Element an den linken Rand, die nachfolgenden Elemente umfließen es auf der rechten Seite. Das umgekehrte erreicht Ihr mit dem Wert right. Der Wert none bewirkt das gewohnte Standard-Verhalten. Wie beispielsweise ein so «gefloatetes» Bild aussieht, zeigen die beiden Grafiken auf dieser Seite: Sie wurden beide mit 'float:right' platziert. Wieder aufgehoben wird das Herumfließen mit der Eigenschaft clear. 'clear:left' hebt ein vorausgegangenes 'float:left' wieder auf; das «geclearte» Element umfließt das «gefloatete» Element nicht mehr. Das gleiche Prinzip gilt für 'clear:right' mit 'float:right'.