31.01.2009
In normalem HTML konnte man einen Bereich ganz einfach mit align="center" mittig ausrichten. Was aber, wenn die Seite XHTML-konform sein soll? Dann muss auf CSS und text-align: center zurückgegriffen werden, das aber nur innerhalb von Block-Elementen wie -Bereichen, Absätzen und Tabellen gilt. Um ein -Element selbst zu zentrieren, setzt man in Browsern, die CSS korrekt verarbeiten können, dessen margin auf auto:
» mehr
31.01.2009
Für die Formatierung von Tabellen stehen seit CSS Level 2 eine ganze Reihe neuer Optionen zur Verfügung.So lassen sich zum Beispiel Rahmenabstände von Tabellen festlegen. Mit border-collapse definieren Sie, ob Tabellenlinien zusammengezogen oder einzeln dargestellt werden. In folgendem Beispiel werden einfache Linien festgelegt:
» mehr
31.01.2009
Gemäß den Spezifikationen für XHTML stehen zur semantischen Hervorhebung von Abkürzungen und Akronymen die beiden Elemente abbr sowie acronym zur Verfügung. Das Problem ist dabei jedoch, dass die Beschreibungen nicht mit ausgedruckt werden. Auf einer Seite mit dem folgenden Code erscheint beim Drucken lediglich ein »UN«:
» mehr
31.01.2009
Eine interessante Variante der Bildmanipulation mit Hilfe von CSS sind Hintergrundbilder. Die alten HTML-Methoden hatten zahlreiche Nachteile, zum Beispiel das automatische horizontale und vertikale Vervielfältigen, wenn die Größe der Seite die des Bilds übersteigt. Mit folgender CSS-Konstruktion lässt sich dies vermeiden:
» mehr
31.01.2009
Prinzipiell geht das so: Sie verschachteln einfach so viele div-Container ineinander, dass derselbe Effekt erzielt wird. Nach oben und unten muss die Breite immer mehr abnehmen, damit der Effekt mit den abgerundeten Kanten erzielt wird. Eine Beispiel-Stildefinition dafür kann so aussehen:
» mehr
31.01.2009
Eine interessante Möglichkeit für individuelles Webdesign, insbesondere auf textlastigen Seiten, sind Einrückungen und Initiale.
» mehr
31.01.2009
Eine wichtige Eigenschaft beim Tabellendesign mit CSS ist border-collapse. Sie beschreibt, wie sich der Rahmen zu verhalten hat. CSS definiert dazu zwei Möglichkeiten: Mit dem Wert collapse werden aneinander liegende Rahmen zu einem zusammengefasst - es gibt also keinen Zwischenraum zwischen zwei Rahmen. Bei dem Wert seperate geschieht das Gegenteil und jede Zelle sowie die Tabelle an sich erhält einen eigenen Rahmen. Ein Beispiel:
» mehr
31.01.2009
Mit HTML war es oftmals so, dass leere Zellen einfach ausgeblendet wurden. Mit CSS kann man dies nun selbst bestimmen. Hierfür dient die empty-cells-Eigenschaft. Als Wert erhält sie entweder das Wort hide oder das Wort show. Mit dem ersten verschwinden leere Zellen - mit dem zweiten bleiben sie. Ein Beispiel:
» mehr
31.01.2009
Ein besonderes Feature findet man in der text-align-Eigenschaft von CSS. Bei normalen Elementen beschreibt sie die Ausrichtung des Textes nach links, rechts, der Mitte oder als Blocksatz - bei Tabellenzellen kann sie noch mehr: die Ausrichtung an einem bestimmten Zeichen. Ab CSS 2 ist es bei Zellen nämlich möglich, statt left/ oder right/ ein Zeichen anzugeben, an dem die Inhalte ausgerichtet werden sollen. Alle Vorkommen des Zeichens stehen dann untereinander. Voraussetzung dafür ist natürlich, dass sich das Zeichen in den meisten der auszurichtenden Zellen wiederfindet. Besonders bei Tabellen mit Rechnungen, in denen Kommastellen auftreten, wäre damit eine gute Formatierung möglich:
» mehr
31.01.2009
Zusammenfassen ist immer dann eine gute Idee, wenn gleiche Anweisungen auf verschiedene Elemente, Klassen oder IDs angewendet werden müssen. Angenommen, Sie möchten Ihre Überschriften in Blau und in der Schriftart Verdana darstellen. Das liest sich dann so:
» mehr
