Anzeige
Tutorialbeschreibung

Professionelle Websites: Basiswissen HTML und CSS Teil 3 - Formatierung mit CSS

Professionelle Websites: Basiswissen HTML und CSS Teil 3 - Formatierung mit CSS

Dieses Kapitel soll die beiden grundsätzlichen Sprachen vermitteln, mit denen moderne Webseiten erstellt werden: HTML und CSS. In HTML strukturieren Sie Inhalte durch Elemente für Überschriften, Absätze, Listen, Tabellen und andere. Mithilfe von CSS bestimmen Sie, wie diese Elemente z.B. im Browser-Fenster angeordnet und formatiert werden. Beide Sprachen sind computerlesbar, aber auch für Menschen genießbar. Sie bestehen aus englischsprachigen Begriffen oder Abkürzungen davon sowie aus einfachen Steuerzeichen, die auf jeder Tastatur zu finden sind.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education .

6 Einfache Formatierung mit CSS

In den voranstehenden Abschnitten haben Sie die wesentlichen HTML-Elemente zurStrukturierung von Textinhalten kennen gelernt. Dabei wurden Sie mehrfach darauf vertröstet, dass eine schicke Optik mit HTML allein nicht zu bewerkstelligen ist, sondern dass dafür Cascading Style Sheets (CSS) erforderlich sind. Bevor wir deshalb weitere HTMLElemente behandeln, möchten wir Sie nicht länger auf die Folter spannen. In diesem Abschnitt werden Sie mit den Formatiermöglichkeiten von CSS vertraut gemacht.

6.1 Das style-Attribut

Zunächst werden wir mit dem Attribut style= arbeiten. Dieses Attribut dürfen Sie in allen HTML- Elementen notieren, die »sichtbare Inhalte« haben, egal ob es sich um Block- oder Inline-Elemente handelt. In der Wertzuweisung an das style-Attribut können Sie dann mithilfe CSS-eigener Syntax Formateigenschaften notieren, die dem jeweiligen Element zugeordnet werden. Beginnen wir mit dem Komplettlisting einer kleinen HTML-Datei, in der diverse Elemente mithilfe des style-Attributs formatiert werden:

Listing 4.4: HTML-Datei mit CSS-Formatierungen über das style-Attribut

Bilder

Bilder

Abbildung 4.17: HTML-Datei mit CSS-Formatierungen über das style-Attribut

Bilder

Abbildung 4.18: Gleiche HTML-Datei ohne CSS-Formatierungen

Die Abbildungen verdeutlichen, wie durch wenige CSS-Formatdefinitionen aus einer »nackten« HTML-Datei eine »gestaltete« Seite werden kann. Zunächst hat das <body>-Tag ein style-Attribut erhalten. Da das body-Element den gesamten sichtbaren Dateikörper auszeichnet, wirken sich CSS- Definitionen für dieses Element auf die gesamte sichtbare Seite aus. Im Beispiel wird eine Hintergrundfarbe (background-color), ein linker und rechter Rand (margin-left, margin-right) sowie eine Angabe zur Grundschriftart (font-family) für die gesamte Seite notiert. Die Hintergrundfarbe färbt das gesamte Browser-Fenster ein. Die Ränder links und rechts werden bei allen Inhalten innerhalb des Dateikörpers eingehalten und ebenso die Grundschriftart – solange in einem einzelnen Element nichts definiert wird, was diese Definitionen überschreibt. Damit wird bereits eine Grundeigenschaft von CSS deutlich: nämlich das Prinzip der Vererbung von Eigenschaften. Wir werden darauf später noch genauer eingehen.

Innerhalb des body-Elements folgt im Beispiel eine Seitenüberschrift 1. Ordnung. Diese erbt die Schriftart des body-Elements, bekommt aber eine individuelle Schriftgröße (font-size), einen Rahmen unterhalb (border-bottom) sowie einen Innenabstand unten (padding-bottom) zugewiesen. Der Innenabstand sorgt dafür, dass die blaue Linie, die in Wirklichkeit der Rahmen unten ist, nicht zu nah am Überschriftentext klebt. Innerhalb der h1-Überschrift ist das Wort »style« durch ein em- Element hervorgehoben.
Dieses erbt wiederum alle Formateigenschaften der Überschrift und bekommt aber außerdem eine rote Schriftfarbe (color) zugewiesen. Dass das Wort dann in den meisten Browsern außerdem kursiv dargestellt wird, liegt an den Default-Einstellungen, mit denen Browser HTML-Elemente darstellen. Diese gehören ebenfalls zum »Erbe«. CSS-Formatierungen wirken immer nur additiv oder überschreibend. Um die Kursivdarstellung etwa beim em-Element wegzubekommen, könnte man die CSS-Formatierung font-style:normal notieren. Dadurch würde die Browser-Default- Einstellung »kursiv« überschrieben.

Auch das p- und das em-Element im Beispiel erhalten individuelle CSS-Formatierungen
durch ein style-Attribut im Start-Tag.

6.2 Syntaxregeln für CSS-Formatdefinitionen

Betrachten wir nun den Aufbau der Formatdefinitionen. Die gesamte CSS-Syntax steht in der Wertzuweisung an das style-Attribut. Für die Formatdefinition gelten folgende wichtige Regeln:
- Jede Formatdefinition hat die Form Eigenschaft:Wert. Ein Doppelpunkt trennt den
Namen der CSS-Eigenschaft von der Wertzuweisung.
- Wenn mehr als ein Eigenschaft-Wert-Paar notiert wird, müssen alle außer dem letzten
jeweils mit einem Semikolon (;) abgeschlossen werden. Wird nur ein Eigenschaft-
Wert-Paar notiert, darf es ebenfalls ein Semikolon am Ende erhalten (muss aber nicht).
Das Gleiche gilt für das letzte von mehreren notierten Eigenschaft-Wert-Paaren.
- Bei den Namen von CSS-Eigenschaften spielt Groß-/Kleinschreibung keine Rolle.
Üblich ist es jedoch, alle CSS-Eigenschaften klein zu schreiben.
- Vor und nach dem Doppelpunkt zwischen Eigenschaft und Wert dürfen auch Leerzeichen
notiert werden.
- Wenn eine Eigenschaft mehrere Werte zugewiesen bekommt und Werte dabei selbst
Leerzeichen enthalten, sollten die Werte in Anführungszeichen ("") gesetzt werden.

Ein Beispiel:
font-family:"MS Sans Serif", Helvetica, sans-serif;

Die Namen der möglichen CSS-Eigenschaften sowie das Format oder das Schema der erlaubten Werte, die den Eigenschaften zugewiesen werden können, sind in der CSS-Spezifikation des W3-Konsortiums festgelegt.
In unserem Beispiel aus Listing 4.4 sind vermutlich noch einige Fragen zu den Wertzuweisungen an die CSS-Eigenschaften offen geblieben. Der Quelltext enthält CSS-Wertzuweisungen wie background-color:#FFFFC0, color:red, border-bottom:solid blue 4px oder font-size:15px. Daran ist zu erkennen, dass es bestimmte Maßeinheiten und Schemata für die Notation von Werten gibt. In den beiden folgenden Abschnitten werden wir zunächst auf die Regeln bei den Wertzuweisungen eingehen, bevor wir daran anschließend einzelne CSS-Eigenschaften beschreiben.

6.3 Farbangaben in CSS

CSS unterstützt das RGB-Farbmodell. Über dieses Modell sind ca. 16,7 Millionen unterschiedliche Farben definierbar. RGB steht für Red Green Blue (zu Deutsch: Rot Grün Blau). Im RGB- Farbmodell wird jede Farbe aus den Anteilen der Grundfarben Rot, Grün und Blau definiert. Die drei Werte aus diesen Grundfarben werden additiv behandelt, wodurch Mischfarben entstehen. Jeder der drei Werte kann zwischen 0 und 255 betragen. Dadurch entstehen 256 × 256 × 256, also ca. 16,7 Millionen mögliche Farben. Wie viele unterschiedliche Farben bei einem Anwender tatsächlich anzeigbar sind, hängt natürlich von dessen Hard- und Software ab, aber letztlich auch vom Sehvermögen. Der Wert 0 bedeutet: keinen Anteil an der entsprechenden Grundfarbe. Der Wert 255 bedeutet: maximalen Anteil an der entsprechenden Grundfarbe. Angegeben werden die Werte in der Reihenfolge für die Farben Rot, Grün und Blau. Wenn die Werte aller drei Grundfarben gleich sind, bedeutet dies eine Grauabstufung. Die Wertekombination 0, 0, 0 (Rot, Grün, Blau) erzeugt die Farbe Schwarz, die Kombination 255, 255, 255 die Farbe Weiß, eine Kombination wie 160, 160, 160 ein mittleres Grau. Durch Überwiegen einzelner Werte entstehen Farbtöne und deren Mischung. Die Wertkombination 0, 0, 255 bewirkt beispielsweise ein maximal kräftiges und reines Blau, und 255, 0, 255 ein maximal kräftiges Magenta, da in diesem Fall Rot und Blau gemischt werden.

Die nachfolgende Abbildung zeigt die sieben möglichen Mischungsergebnisse der drei Grundfarben, wenn man nur mit dem Maximalwert 255 arbeitet und mindestens eine der drei Grundfarben diesen Maximalwert erhält.
Zum Auswählen von Mischfarben sollten Sie ein Farbwähl-Tool benutzen. Grafikprogramme verfügen in der Regel über die Möglichkeit, RGB-Farben auszuwählen, aber auch HTML-Editoren.
Bei der interaktiven Farbauswahl in solchen Dialogen können Sie entweder RGB-Werte direkt eingeben oder durch Eingabe anderer Faktoren wie Farbton, Sättigung und Helligkeit berechnen lassen. Auch durch Maussteuerung anhand eines Farbtabletts lässt sich die gewünschte Farbe intuitiv ermitteln.

Bilder

Abbildung 4.19: Mischfarben bei maximalen RGB-Farbanteilen

Bilder

Abbildung 4.20: Typischer RGB-Farbauswahldialog in Grafikprogrammen

RGB-Farbangaben in CSS
In CSS können Sie RGB-Farbangaben folgendermaßen notieren (Beispiel):
<h2 style="color:rgb(0,0,255)">Blaue Überschrift</h2>

Die Wertzuweisung hat also das Schema rgb(Rotwert, Grünwert, Blauwert). Anstelle der Zahlen 0 bis 255 können Sie auch Prozentwerte von 0 bis 100% angeben. Das nachfolgende Beispiel hat den gleichen Effekt wie das obige:
<h2 style="color:rgb(0%,0%,100%)">Blaue Überschrift</h2>

Hexadezimale RGB-Farbangaben
Obwohl die Notationsform rgb (Rotwert, Grünwert, Blauwert) viel praktischer ist, findet man in der heutigen Webpraxis noch immer wesentlich häufiger eine eher kryptische Variante von Farbangaben. Der Grund dafür ist, dass Farben auch in verschiedenen, heute allerdings nicht mehr empfehlenswerten HTML-Attributen angegeben werden können und HTML im Gegensatz zu CSS ausschließlich die hexadezimale Notationsform von Farbangaben unterstützt.

Diese Notationsform hat das Schema #XXXXXX, also ein Gatterzeichen, gefolgt von sechs Zeichen, ohne Leerzeichen dazwischen. Die sechs hier mit X bezeichneten Zeichen stellen Hexadezimalziffern dar. Hexadezimale Ziffern sind die dezimalen Ziffern 0 bis 9 sowie die Buchstaben A, B, C, D, E und F. Eine Hexadezimalziffer kann also insgesamt 16 Werte annehmen (deshalb: Hexadezimalsystem).

Die sechs Ziffern der hexadezimalen Notationsform für Farben sind folgendermaßen zu lesen:
- Ziffer 1 und 2 bestimmen den Rotanteil,
- Ziffer 3 und 4 bestimmen den Grünanteil,
- Ziffern 5 und 6 bestimmen den Blauanteil.

Da mit jeder Hexadezimalziffer 16 Zahlenwerte darstellbar sind, lassen sich mithilfe von zwei solchen Ziffern 16 × 16 = 256 Zahlenwerte darstellen – also genau der Wertebereich eines Farbwerts im RGB-Modell. Es genügen demnach zwei Hexadezimalziffern pro Farbanteil. Der Wert 255 entspricht beispielsweise dem Hexadezimalwert FF und der Wert 192 lautet hexadezimal C0 (C entspricht dezimal 12, C0 bedeutet also 12 × 16 + 0 = 192). Die Notation #FFFFC0 bedeutet also das Gleiche wie rgb(255, 255, 192) – ein helles, mattes Gelb.
Selbst wenn Sie die Hexadezimalnotation nicht mehr benötigen, weil CSS die praktischere RGB- Schreibweise anbietet, so sollten Sie diese ältere Notationsform dennoch kennen und verstehen, da einfach noch so viele Webseiten damit arbeiten. Hin und wieder stößt man auch auf eine abgekürzte Hexadezimalnotation mit nur drei Ziffern, also etwa #FFF oder #99C. Die verkürzte Schreibweise bedeutet intern eine Verdopplung der Ziffernfolge. #FFF bedeutet in Wirklichkeit #FFFFFF, #99C bedeutet #9999CC.

Farbnamen
Noch einfacher als die RGB-Schreibweise für Farbdefinitionen sind Farbnamen. CSS selbst
unterstützt folgende Farbnamen.

Bilder

Tabelle 4.9: Erlaubte Farbnamen (Fortsetzung)

Insider werden erkennen, dass es sich bei den ersten 16 der 17 aufgelisteten Farben um die klassischen VGA-Farben handelt. Die 17. Farbe, orange, wurde vom W3-Konsortium zusätzlich für CSS definiert, weil Orange im klassischen VGA-Schema nicht vorkommt.

Ein Beispiel:
<h2 style="color:blue">Blaue Überschrift</h2>

Neben diesen Farbnamen erlaubt CSS auch die Angaben umgebungsspezifischer Farben. Diese Farben bezeichnen Farbwerte, die Sie als Designer gar nicht kennen, da es sich um Farben handelt, die bei jeden Anwender anders sind und die er sich selber in seiner Benutzeroberfläche eingestellt hat. Wenn Sie ausschließlich mit diesen Farbnamen arbeiten, geben Sie zwar die farbliche Kontrolle ab, doch Sie kommen Ihren Anwendern optimal entgegen – die Annahme vorausgesetzt, dass alle Anwender von sich aus für sie optimale und angenehme Farben in ihrer Benutzeroberfläche einstellen.

Ein Beispiel:
<h2 style="background-color:ActiveBorder; color:ActiveCaption">Überschrift in
Systemfarben</h2>

Im Beispiel wird für die Überschrift als Hintergrundfarbe (background-color) die beim Anwender eingestellte Hintergrundfarbe für aktive Fenstertitel definiert und als Textfarbe (color) die zugehörige Vordergrundfarbe des aktiven Fenstertitels. Die nachfolgende Tabelle listet erlaubte Umgebungsfarbnamen auf.

Bilder

Tabelle 4.10: Umgebungsabhängige Farbnamen

Websichere Farben
Bei älteren Computern, aber auch bei Mini-Computern wie Handhelds, Tablet-PCs usw. ist das Spektrum gleichzeitig darstellbarer Farben oft reduziert, häufig auf nur 256 Farben. Eine Palette legt fest, welche Farben das sind. Jedes System kann dabei seine eigene Default-Farbpalette einsetzen. Stimmt eine in CSS definierte Farbe nicht mit einer in der Palette verfügbaren Farbe überein, muss das System irgendeine Lösung finden, um den Konflikt zu lösen. Es könnte z.B. die nächstähnliche Farbe aus seiner Palette auswählen. Oder es könnte versuchen, durch so genanntes Dithering die gewünschte Farbe zu erzeugen. Dabei werden Pixelmuster aus zwei oder mehreren Farben gebildet, um die gewünschte Farbe einigermaßen echt darzustellen. Das Dithering ist jedoch je nach Pixelauflösung und Muster durchaus sichtbar und kann z.B. als Textfarbe angewendet die Lesbarkeit beeinträchtigen. Aus diesem Grund hat sich schon früh eine Farbpalette durchgesetzt, die praktisch alle Webbrowser in allen geeigneten Hard- und Softwareumgebungen anzeigen können. Die in dieser Palette definierten Farben gelten als websichere Farben.
Die Farben dieser Palette bestehen aus RGB-Farben mit den Dezimalwerten 0, 51, 102, 153, 204 oder 255 (hexadezimal: 00, 33, 66, 99, CC, FF). Alle daraus resultierbaren Farben sind erlaubt, also z.B. rgb(51, 102, 255) oder #990000. Da es sich um sechs mögliche Farbwerte handelt und drei Farbwerte jede Farbe bestimmen, sind dadurch insgesamt 6 × 6 × 6 = 216 Farben möglich. Die typische Farbtiefe von 256 Farben wird damit nicht ganz ausgereizt – es verbleiben 40 Farben, die z.B. für die Benutzeroberfläche des Browsers benötigt werden.

Links zu weiteren Informationen zu Farben:

Farbenlehre:
http://www.farbenlehre.com/
Farbentheorie und Farbgestaltung:
http://www.ipsi.fraunhofer.de/~crueger/farbe/
Farben im Webdesign:
http://www.metacolor.de/

6.4 Maßangaben in CSS

Wenn Sie in CSS numerische Werte für Breiten, Höhen, Abstände usw. definieren, müssen Sie eine Maßeinheit angeben.

Bilder

Tabelle 4.11: Maßangaben in CSS

Generell wird zwischen absoluten Maßangaben und relativen Maßangaben unterschieden. So ist beispielsweise cm (Zentimeter) eine absolute Angabe, während em (elementeigene Schriftgröße) eine relative Angabe darstellt. Hardliner empfehlen immer wieder, man solle ausschließlich relative Angaben verwenden, da man als Webdesigner niemals wissen kann, welche Art von Ausgabegerät ein Anwender verwendet oder wie groß sein Browser-Fenster ist. Für die Praxis empfiehlt sich kein völliger Verzicht auf absolute Angaben, jedoch ein behutsamer Umgang damit. Für reine Bildschirmpräsentationen wird in der Praxis am häufigsten mit der px-Bemaßung gearbeitet, also mit Pixelangaben, sowie mit Prozentangaben. Angaben wie pt, pc, in, mm und cm eignen sich dagegen eher für Print-Ausgaben von CSS-formatierten HTML-Dokumenten. Die Angaben em und ex schließlich sind besonders zum relativen Abstimmen von Schriftgrößen geeignet.

Regeln für numerische Werte
Folgende Regeln müssen Sie bei numerischen Werten in CSS beachten:
- Das Dezimalzeichen wird in der englisch/amerikanischen Form notiert, d.h. als Punkt,
nicht das Komma. Tausenderpunkte und Tausenderkommas sind nicht zulässig.
- Manche CSS-Eigenschaften erlauben auch die Angabe negativer numerischer Werte.
Solche Werte werden wie üblich durch ein voranstehendes Minuszeichen gekennzeichnet.
- Bei Zuweisung des Werts 0 für Längen, Breiten, Abstände und Größen ist keine Maßangabe
zwingend erforderlich, bei allen anderen Werten dagegen schon.
Ein paar gültige Beispiele:
- width:300px definiert eine Breite von 300 Pixel.
- margin-top:0.7cm definiert einen Abstand oben von 0,7 Zentimetern.
- font-size:0.95em definiert eine Schriftgröße von 95%, gemessen an der Schriftgröße
des Elternelements.
- border-width:0.06in definiert eine Rahmendicke von ca. 0,15 Zentimetern.
- max-width:90% legt fest, das ein Element maximal 90% Breite seiner verfügbaren Breite
einnehmen darf.

6.5 CSS-Eigenschaften für Schriftformatierung

Die Formatierung von texttragenden Elementen wie Überschriften, Textabsätzen, Listenpunkten oder Tabellenzellen gehört zu den vordringlichsten Wünschen der meisten Autoren, die ein HTML- Dokument ohne CSS-Angaben im Browser betrachten. Die Times-Schriftart, welche die meisten Browser als Default-Schriftart eingestellt haben, wirkt auf viele HTML-Autoren nicht sehr ästhetisch. Auch die Browser-Defaults für Schriftgrößenverhältnisse zwischen Überschriften und Text werden oftmals als unbefriedigend empfunden. Und last but not least wirken schwarzweiße Textwüsten am Bildschirm viel ermüdender als etwa in einem Buch. Farben sollen also her.

CSS erfüllt fast alle Formatierwünsche. Allerdings stößt gerade die Schriftformatierung in der Praxis an sehr enge Grenzen. Der Grund ist, dass Webseiten auf den unterschiedlichsten Rechnertypen, Benutzeroberflächen und Anzeigegeräten dargestellt werden können. Wenn Sie beispielsweise Ihre Webseiten unter MS Windows entwickeln, können Sie nicht erwarten, dass Linux/KDE-Anwender Schriftarten wie Arial, die unter Windows zum Standard gehören, installiert haben. Umgekehrt sind dort andere Schriftarten viel verbreiteter. Kaum weniger problematisch sind auch die Schriftgrößen. Im Internet herrscht ein regelrechter Glaubenskrieg zwischen aggressiven Vertretern, die einem Webdesigner am liebsten jede Einflussnahme auf Schriftgrößen verbieten wollen, und ignoranten Design-Freaks, die leider meistens auch unter einem schlimmen Schriftminiaturisierungswahn leiden. Als Grundregel für die Schriftformatierung kann gelten: Außer bei Ausnahmefällen (z.B. individuell formatierte, auffällige Schriftzüge) sollten Sie mit starken Abweichungen gegenüber den Browser-Defaults stets behutsam sein. Schriftart Schriftarten können Sie mit font-family definieren. Es besteht jedoch keine Garantie, dass die angegebene Schriftart bei allen Anwendern angezeigt werden kann, da dies sehr stark von der jeweiligen Hard- und Softwareumgebung abhängt. Damit sich die Trefferquote verbessert, ist es bei der font-family- Eigenschaft nicht nur möglich, sondern auch dringend zu empfehlen, stets mehrere Schriftarten anzugeben.

Ein Beispiel:
<p style="font-family:Tahoma, Arial, Helvetica, sans-serif">
Text
</p>

Im Beispiel werden drei Schriftarten angegeben. Alle Schriftarten werden durch Kommata getrennt. Die Reihenfolge entspricht der Priorisierung. Das bedeutet im Beispiel: Wenn die Schriftart Tahoma verfügbar ist, soll diese verwendet werden. Ist sie nicht verfügbar, soll Arial verwendet werden. Ist Arial ebenfalls nicht verfügbar, soll Helvetica verwendet werden. Ist auch Helvetica nicht verfügbar, soll irgendeine verfügbare serifenlose Schriftart verwendet werden. Die angegebene Kombination im Beispiel geht von folgender Überlegung aus: Eigentlich gewünscht (aus welchen Gründen auch immer) ist die Schriftart Tahoma. Diese ist jedoch eine typische MS-Windows- Schriftart, die auch üblicherweise nur zusammen mit MS Office installiert wird. Wegen der hohen Verbreitung von MS Office und MS Windows ist natürlich anzunehmen, dass Tahoma bei vielen Anwendern angezeigt werden kann. Die zweite Wahl, Arial, stützt sich auf die Überlegung, dass die überwiegende Anzahl der Anwender MS Windows einsetzt, wo Arial seit jeher eine der Grundschriftarten ist. Ebenso wie Tahoma ist Arial eine serifenlose Schrift, auch wenn sie ansonsten typografisch durchaus von Tahoma abweicht. Die dritte Wahl, Helvetica, bedient sich des Wissens, dass auf vielen anderen Benutzeroberflächen als MS Windows die Schriftart Helvetica als eine der meist verfügbaren Grundschriftarten installiert ist. Sollte das alles nichts helfen, so wird der Browser durch die Angabe der generischen Schriftart sans-serif angewiesen, irgendeine verfügbare serifenlose Schrift zu verwenden. Voraussetzung dafür ist natürlich, dass die zugrunde liegende Benutzeroberfläche dem Browser eine Möglichkeit der Kategorisierung von Schriftarten anbietet. Die letzte Angabe bei einer Wertzuweisung an font-family sollte stets eine so genannte generische Schriftart sein.

CSS stellt folgende Angaben für generische Schriftarten zur Verfügung:

Bilder

Tabelle 4.12: Generische Schriftarten in CSS

Verwenden Sie auf ein und derselben Webseite nicht zu viele unterschiedliche Schriftarten. Das gilt als grober typografischer Fehler und wird auch tatsächlich von den meisten Anwendern als eher unprofessionell empfunden. Als Faustregel gilt: nicht mehr als zwei unterschiedliche Schriftarten.

Bilder

Abbildung 4.21: Gleicher Text mit Serifenschrift und serifenloser Schrift

Die angemessene Wahl der Schriftart hängt auch von den Textinhalten ab. Bei einem lateinischen Text wie dem klassische Blindtext in Abbildung 4.21 wirkt eine Serifenschrift wie die obere Book Antiqua edler und inhaltstypischer. Bei einer technischen Dokumentation dagegen sind serifenlose Schriften üblicher. Doch auch dabei gibt es Unterschiede. Schriftarten wie die untere Century Gothic in der Abbildung wirken schick, können aber bei längeren Texten am Bildschirm schwerer lesbar sein als etwa Arial.

Schriftgröße
Die Schriftgröße können Sie mit der CSS-Eigenschaft font-size bestimmen. Ein Beispiel:
<body>
<h1 style="font-size:36px">
<span style="font-size:1.5em">Große</span> Überschrift
</h1>
<h1 style="font-size:1.5em">
Kleine Überschrift
</h1>
<h1>
Unformatierte Überschrift
</h1>
</body>

Das Beispiel verdeutlicht die Zusammenhänge bei der Schriftgrößendefinition an Hand von drei h1- Überschriften. In der ersten h1-Überschrift wird durch die Definition font-size:36px eine gemessen am Ausgabegerät absolute Größe festgelegt. Das innere span-Element erhält dagegen die relative Größenangabe font-size:1.5 em. Für die Maßeinheit em gilt: Wird sie auf andere Größenangaben als die Schriftart angewendet, ist stets 1em die Größe der Schriftart des aktuellen Elements. Wird sie dagegen auf die Schriftgröße selbst (CSS-Eigenschaft font-size) angewendet, so entspricht 1em der Schriftart des Elternelements. In unserem Beispiel wird em auf die Schriftgröße selbst angewendet. Zur Berechnung der anzuzeigenden Schriftgröße bei der Angabe font-size:1.5 em greift der Browser daher auf die Schriftgröße des Elternelements zurück, also auf das h1-Element. Diese beträgt 36px, also wird das Wort »Große« mit dem Faktor 1.5 angezeigt, d.h. in einer Schriftgröße von 54 Pixel.

Bilder

Abbildung 4.22: Schriftgrößenangaben und ihre Wirkung im Browser

Möglicherweise verwirrend ist die zweite h1-Überschrift, wenn man die Wirkung im Browser betrachtet. Obwohl sie die Angabe font-size:1.5em enthält, erscheint sie im Browser kleiner als die dritte h1-Überschrift, der gar keine CSS-Formatierung zugewiesen ist. Der Grund ist auch hier das zuvor beschriebene Verhalten bei der Bemaßung mit em. Zur Berechnung der tatsächlich anzuzeigenden Schriftgröße wird die Schriftgröße des Elternelements verwendet. Das gemeinsame Elternelement der h1-Überschriften ist das body-Element, also der Dateikörper selbst. Dessen Grundschriftgröße entspricht natürlich der von normalem Fließtext, und nicht der von Überschriften erster Ordnung. Angenommen, für Fließtext ist im Browser eine Grundschriftgröße von 15 Pixel eingestellt, so führt die Angabe 1.5em zu einer berechneten Schriftgröße von 22,5 Pixel. Halbe Pixel können natürlich aus technisch nachvollziehbaren Gründen nicht angezeigt werden – der Browser wird also 22 oder 23 Pixel Größe verwenden.
Die in der Drucktechnik üblichen Schriftgrößenbemaßungen Punkt (pt) und Pica (pc) sind für Webseiten, die vornehmlich auf Bildschirmen angezeigt werden und nicht zum Ausdrucken bestimmt sind, weniger geeignet. Der Grund ist, dass diese Angaben bei der Bildschirmanzeige intern auf Pixel umgerechnet werden müssen. Der Umrechnungsfaktor ist jedoch systemabhängig. Unter MS Windows beispielsweise entspricht 1 Punkt intern 1,33 Pixel, weil Windows mit 96 dpi arbeitet, während 1 Punkt auf einem Macintosh- oder Linux-Rechner genau in 1 Pixel umgerechnet wird, weil diese Systeme mit 72 dpi umrechnen. In der Praxis bedeutet dies, dass eine mit font- size:10pt definierte Schrift auf einem Windows-Rechner 13 Pixel groß erscheint, während die gleiche Schrift etwa auf einem Macintosh-Rechner nur 10 Pixel groß dargestellt wird. Dieser Unterschied ist durchaus erheblich – viele Anwender empfinden 13 Pixel Darstellungsgröße als angenehm, aber 10 Pixel als zu klein.

Schriftfarbe
Die Vordergrundfarbe von Text definieren Sie in CSS mit der Eigenschaft color. Ein Beispiel:
<body style="background-color:rgb(204,255,204)">
<h1 style="color:rgb(0,80,0)">
Rettet unser Grün!
</h1>
</body>

Zur Bestimmung der Schriftfarbe notieren Sie eine Farbangabe wie in Abschnitt 4.6.3 beschrieben. Beim Definieren von Schriftfarben müssen Sie vor allem auf die Kombination mit der Hintergrundfarbe achten. Ein häufig begangener Fehler besteht darin, dass nirgends eine Hintergrundfarbe definiert wird. Die Annahme, dass die dunkelblaue Schrift auf dem weißen Default-Browser-Fensterhintergrund ordentlich aussieht, trügt nämlich: Ein Anwender könnte auch Schwarz als seinen Default-Fensterhintergrund eingestellt haben. In diesem Fall (Dunkelblau auf Schwarz) würde Ihre Seite gar keinen guten Eindruck machen.

Das obige Beispiel vermeidet diesen Fehler, indem im body-Element mit background-color eine hellgrüne Hintergrundfarbe definiert wird. Die Farbdefinition in der h1-Überschrift (dunkles Grün) kann sich damit auf eine passende Hintergrundfarbe verlassen.

Bilder

Abbildung 4.23: Textfarbe und Hintergrundfarbe

Vorder- und Hintergrundfarbe sollten einen guten Kontrast haben. Zu schwache Kontraste bereiten Mitmenschen mit Sehschwächen schnell Leseschwierigkeiten. Es gibt verschiedene Arten von Farbkontrasten, z.B. Komplementärfarben wie Gelb und Blau, oder Hell-Dunkel-Kontraste mit der gleichen Grundfarbe, wie im obigen Beispiel Dunkelgrün und Hellgrün. Nicht wenige Menschen leiden an einer Rot- Grün-Sehschwäche. Mischungen von Rot und Grün können dabei leicht zu Problemen führen. Auch das sollte bei der Farbwahl berücksichtigt werden.

Weitere Angaben zur Schriftformatierung
Weitere Formatierungsmöglichkeiten zur Beeinflussung des Schriftbilds betreffen das Schriftgewicht, den Schriftstil, den Wort- und Zeichenabstand, die Zeilenhöhe sowie verschiedene Effekte.
Das Schriftgewicht können Sie mit font-weight festlegen. Die Angabe font-weight:bold erzwingt eine Fettschrift, während font-weight:normal ein normales Schriftgewicht bewirkt. Bei der Default- Darstellung von HTML-Elementen verwenden moderne grafische Browser teilweise Fettschrift, teilweise Normalschrift. Für Überschriften bis zur vierten Ebene werden meistens Fettschriften verwendet. Durch eine Angabe wie <h1 style="fontweight:
normal"> ... </h1> können Sie also beispielsweise die Default-Darstellung aushebeln.
Umgekehrt können Sie mit einer Angabe wie <p style="font-weight:bold"> ... </p>
das Schriftgewicht eines Elements, dessen Default-Darstellung normalerweise nicht fett ist, Fettschrift erzwingen.
Der Schriftstil bestimmt die Neigung der Schrift und kann durch font-style festgelegt werden. Wie beim Schriftgewicht wird eine abweichende Schriftneigung von vielen Browsern bei bestimmten Elementen, z.B. beim em-Element, zur Darstellung verwendet. Durch font-style:italic oder font-style:oblique erzwingen Sie eine Kursivschrift und durch font-style:normal eine normale Darstellung.
Manche Schriftarten benötigen Korrekturen bei den Defaults für Zeichen- und Wortabstände und bei der Zeilenhöhe. Erst dadurch ergibt sich ein abgerundetes und angenehmes Schriftbild.

Bilder

Abbildung 4.24: Schriftbildbeeinflussung durch Zeichen-/Wortabstand und Zeilenhöhe

Den Zeichenabstand bestimmen Sie durch letter-spacing und den Abstand zwischen Wörtern mit word-spacing. Die Zeilenhöhe eines Block-Elements kann mit line-height verändert werden. Bei fest definierter Zeilenhöhe muss die Schriftgröße aller davon betroffenen Textinhalte dazu passen, andernfalls könnte Text bei der Darstellung abgeschnitten werden. Das gilt besonders, wenn ein Block-Element Inline-Elemente enthält, die wiederum größere Schriftgrößen erzwingen. Auch im Text platzierte Grafiken können bei definierter Zeilenhöhe abgeschnitten werden. Das Experimentieren mit Zeichenabstand, Wortabstand und Zeilenhöhe empfiehlt sich vor allem bei schwer lesbaren Schriften, z.B. bei engen Schriften mit schmalen Zeichen. Eine weitere Möglichkeit besteht darin, Text unterstrichen oder durchgestrichen darzustellen. Dazu dient die CSS-Eigenschaft text-decoration.

Ein Beispiel:
<p>
Unser Rasierer - jetzt nur noch <span style="text-decoration:line-through">49,95
&euro;</span><span style="text-decoration:underline">39,95 &euro;</span>
</p>

Mit text-decoration:underline können Sie Text unterstreichen und mit text-decoration: line-through streichen Sie ihn durch.
Eine interessante Möglichkeit der Formatierung bietet schließlich auch noch die Angabe font-variant:small-caps. Dadurch wird Text in Kapitälchen dargestellt, d.h., Kleinbuchstaben werden als Großbuchstaben angezeigt, jedoch in der Größe von Kleinbuchstaben.

Links zu weiteren Informationen zu Schriftformatierung und Schriftarten:

Artikel »Das Windows/Mac font-size-Problem«:
http://aktuell.de.selfhtml.org/artikel/css/fontsize/
Artikel »Eine Frage der Größe«:
http://www.fabrice-pascal.de/artikel/sizediscussion/
Typograph online:
http://www.typo-info.de/


6.6 Das Boxmodell von CSS

Bevor wir uns weiteren CSS-Eigenschaften widmen, ist ein wichtiger Theorieabschnitt
notwendig. Nur wenn Sie diese Grundlagen verstehen, können Sie souverän mit den
anschließend beschriebenen CSS-Eigenschaften umgehen.
Das Boxmodell von CSS beschreibt den Erstreckungsraum und das Anordnungsverhalten
von Block- und Inline-Elementen in HTML. Jedes Element wird dabei als rechteckige Box
betrachtet.

Die Boxen der Basiselemente
Es beginnt beim html-Element und beim body-Element. Diese beiden stellen bereits eigene Boxen mit unterschiedlichen Eigenschaften dar. Ein Test soll das verdeutlichen. Das folgende Listing zeigt ein vollständiges HTML-Dokument, bei dem das html- und das body-Element mithilfe von CSS je einen Rahmen erhalten:

Listing 4.5: HTML-Dokument zur Visualisierung von html- und body-Element

Bilder

Im <html>-Tag wird ein 4 Pixel dicker blauer Rahmen definiert und im <body>-Tag ein ebenso dicker roter Rahmen. Das Ergebnis im Browser ist in mehrfacher Hinsicht aufschlussreich:

Bilder

Abbildung 4.25: Boxvisualisierung des html- und des body-Elements

Gut erkennbar ist, dass das html-Element eine andere Box darstellt als das body-Element. Das html- lement hat kein anderes Elternelement. Sein Bezugspunkt ist daher einfach das Browserfenster, im CSS-Fachjargon als Viewport bezeichnet. Der blaue Rahmen des html- Elements erstreckt sich, wie die Abbildung zeigt, direkt bis zu den Fensterrändern. Das body-Element ist dagegen ein Kindelement des html-Elements. Seine Box hat ganz andere Eigenschaften. Zunächst fällt auf, dass es einen gewissen Abstand zur Box des html-Elements hat, obwohl mit CSS kein solcher Abstand definiert wurde. Der Abstand zwischen dem blauen und dem roten Rahmen ist einfach ein Default- Abstand, den der Browser benutzt, damit der Inhalt eines HTML-Dokuments nicht direkt am Fensterrand klebt.
Weiter fällt auf, dass die Box des body-Elements in der Breite so viel Raum einnimmt wie verfügbar ist, obwohl der Inhalt an keiner Stelle die volle Breite erreicht. Dagegen nimmt die Box in der Höhe so viel Raum ein, wie es der Inhalt erfordert. Genau dies sind die typischen Verhaltensweisen für Block-Elemente: so breit wie möglich, so hoch wie nötig. Die Boxen von Block-Elementen Im zweiten Schritt versehen wir die beiden Textelemente des Beispiels ebenfalls mit Rahmen:

<h1 style="border:solid 4px lime">Some body</h1>
<p style="border:solid 4px violet">Some thing</p>

Der Browser zeigt nun Folgendes an:

Bilder

Abbildung 4.26: Boxvisualisierung von Block-Elementen

Erkennbar ist, dass auch die beiden Block-Elemente h1 und p dem Gesetz folgen: so breit wie möglich, so hoch wie nötig. Ebenfalls erkennbar sind jedoch auch diverse Default-Werte, die der Browser zur Darstellung der Elemente verwendet. So gibt es Abstände zwischen den Rahmen der Überschrift und des Textabsatzes, über der Überschrift und unter dem Textabsatz, die nirgendwo in CSS definiert wurden. Es handelt sich hierbei um Default-Abstände, die der Browser bei der Darstellung eines HTML-Dokuments verwendet. Ebenso erkennbar ist, dass der Text der h1- Überschrift zwar links, nicht aber oben und unten die Ränder der Box der Überschrift berührt. Auch das liegt an einer Default-Einstellung des Browsers: Er benutzt einen intern eingestellten Innenabstand zwischen Elementgrenze und Elementinhalt. Besonders bei Elementen wie Tabellenzellen ist dies sinnvoll. Würde der Browser dort keinen Innenabstand darstellen, so würden die Zelleninhalte direkt am Gitternetz der Tabelle kleben. Die Boxen von Inline-Elementen Betrachten wir nun noch, wie sich typische Inline-Elemente im Boxmodell verhalten. Dazu zeichnen wir ein Wort in der Überschrift des Beispiels separat mit dem em-Element aus und verpassen diesem mit CSS einen orangefarbenen Rahmen:

<h1 style="border:solid 4px lime">Some <em style=" border:solid 4px
orange">body</em></h1>

Im Browser wird die zusätzliche Box angezeigt:

Bilder

Abbildung 4.27: Boxvisualisierung von Block- und Inline-Elementen

Für Inline-Elemente gilt wie gut erkennbar die Grundregel: so breit wie nötig und so hoch
wie nötig.

Boxbestandteile
Es war bereits die Rede von Abständen zu Elternelementen, von Abständen zwischen Elementen und von Innenabständen. Zum Boxmodell gehört auch die Beschreibung, wie diese Bestandteile zusammenwirken. Eine Grafik veranschaulicht dies:

Bilder

Abbildung 4.28: Bestandteile des CSS-Boxmodells

Die innerste Schicht einer Element-Box ist der Elementinhalt. Das kann – je nach Element und Gegebenheiten – reiner Text sein oder ein bzw. mehrere andere Elemente oder eine Mischung aus reinem Text und anderen Elementen.
Die nächste Schicht ist die des Innenabstands. Der Innenabstand ist der Abstand zwischen dem Elementinhalt und dem Rahmen des Elements. Dieser bildet die nächste Schicht. Hat ein Element keinen definierten Rahmen, d.h., beträgt die Rahmendicke 0, dann ist die Außengrenze des Rahmens gleich der Außengrenze des Innenabstands. Die äußerste Schicht bildet der Rand des Elements, d.h. der Abstand zu umgebenden Elementen oder den Elternelementen. Hat ein Element keinen definierten Abstand, d.h., beträgt der Randabstand zu den umgebenden Elementen 0, dann ist die Außengrenze des Rands gleich der Außengrenze des Rahmens und, falls dieser ebenfalls 0 beträgt, gleich der Außengrenze des Innenabstands.
Wenn Sie beispielsweise für ein Element mithilfe von CSS eine Breite von 500 Pixel angeben und außerdem einen Innenabstand des Elementinhalts von 10 Pixel, einen Rahmen von 5 Pixel und einen Außenabstand (Rand) von 30 Pixel bestimmen, so sollte das sichtbare Element insgesamt eine Breite von 500 + (2 * 10) + (2 * 5) Pixel, also 530 Pixel einnehmen.
Der Rand geht in die Rechnung nicht mit ein, da er nicht die sichtbare Breite des Elements beeinflusst, sondern nur eine »Lücke« zu umgebenden Elementen darstellt. An einem Quelltextbeispiel und dessen Auswirkung im Browser wollen wir den Zusammenhang verdeutlichen:

Bilder

Im Beispiel wird mit Bereichen, also div-Elementen gearbeitet. Diese haben den Vorteil, dass sie vom Browser für Außenabstand (Rand), Rahmen und Innenabstand die Default- Werte 0 erhalten und sich damit anzeigeneutral verhalten. Das Beispiel definiert zunächst einen div-Bereich mit einer Breite von 500 Pixel (width:500px), einem Innenabstand von 10 Pixel (padding:10px) und einem schwarzen durchgezogenen Rahmen von 5 Pixel (border:solid black 5px). Innerhalb davon wird ein weiterer div-Bereich notiert. Dieser stellt den Elementinhalt des zuvor definierten Bereichs dar. Beide div-Bereiche erhalten unterschiedliche Hintergrundfarben (background-color), damit sie sich optisch gut unterscheiden lassen.

Als Nächstes folgt ein Kontrollbereich. Bei diesem Bereich bleiben alle Werte für Innenabstand, Rahmen und Rand auf dem Default-Wert 0. Der Kontrollbereich bekommt jedoch eine Breite von 530 Pixel (width:530px) sowie eine sichtbare Hintergrundfarbe zugewiesen. Damit dient er zur Verifizierung der Berechnung, dass sich beim davor notierten Bereich eine sichtbare Elementbreite von 530 errechnet.
Zuletzt wird noch mal das gleiche div-Konstrukt wie zu Beginn definiert, diesmal jedoch zusätzlich mit 30 Pixel Rand an allen vier Seiten (margin:30px). Der folgende Screenshot zeigt die Wirkung im Browser.

Bilder

Abbildung 4.29: Boxmodell-Test im Browser

Die Abbildung zeigt, dass unsere Rechnung korrekt war: Obwohl als Breite für den ersten div- Bereich 500 Pixel gewählt wurden, ergibt sich eine Gesamtbreite von 530 Pixel, da die Angaben zu Innenabstand und Rahmen in die Berechnung mit einfließen. Der Kontrollbereich mit dem Textinhalt »530px«, der eine Eigenlänge von 530 Pixel hat, bestätigt dies. Der untere div-Bereich schließlich, der eine Kopie des obersten mit zusätzlich definiertem Rand von 30 Pixel darstellt, ist um 30 Pixel zum Inhalt oberhalb und 30 Pixel von links entfernt. Der Rand ist einfach eine Lücke zwischen den Elementen. Das Boxmodell, wie es in dieser Form spezifiziert ist, hat Vor- und Nachteile. Vorteile hat es insofern, als eine angegebene Breite nicht mit zusätzlichen Angaben zu Innenabstand und Rahmen kollidiert. D.h. die angegebene Breite steht dem Elementinhalt auf jeden Fall zur Verfügung und die zusätzlichen Angaben führen einfach zu einer faktischen Verbreiterung des Elements. Zum Ärgernis wird dieses Verhalten jedoch, wenn mit einer Angabe wie width:100% gearbeitet wird, um z.B. das Browserfenster exakt in der Breite auszufüllen. Soll ein solches Element dann noch einen Innenabstand und/oder Rahmen erhalten, ergibt sich eine tatsächliche Breite, die größer ist als 100%. Der Browser zeigt Quer-Scrollbalken an und die Breite des Inhalts ist etwas breiter als das Anzeigefenster, was nicht sehr elegant ist. Nur mithilfe von Hacks (Tricks) lässt sich dieses Problem umgehen.

Zuletzt soll noch eine Ausnahme beim Boxmodell angesprochen werden: das body-Element. In Abbildung 4.25 haben wir die Ausdehnung des body-Elements visualisiert. Dabei hat sich gezeigt, dass das body-Element so viel Höhe einnimmt, wie es sein Inhalt erfordert, und dass die Browser Default-Abstände zwischen Fensterrand und body-Element einfügen. Dennoch wird, wenn man in CSS eine Hintergrundfarbe (background-color) für das body-Element definiert, das gesamte Browserfenster eingefärbt.
Diese Ausnahme stellt ein Entgegenkommen der Theorie gegenüber der Praxis dar. Denn es musste einfach eine Handhabung her, um eine Seite mit einem Hintergrund zu versehen.

6.7 CSS-Eigenschaften für Abstände und Ausrichtung

Während die Schriftformatierung alle sichtbaren Elemente betrifft, sind die nachfolgend vorgestellten CSS-Eigenschaften vornehmlich für Block-Elemente gedacht. Zwischen Überschriften und Text sind oft andere als die vom Browser gewählten Default-Abstände oben und unten wünschenswert. Absätze sollen möglicherweise auch mal eingerückt werden und das Standard- Feature der Textausrichtung, also linksbündig, zentriert, rechtsbündig und Blocksatz, wird ebenfalls häufig verlangt.

Abstände zwischen Elementen
Die CSS-Basiseigenschaft zum Definieren von Abständen lautet margin (zu Deutsch: Rand). Im Fließtext sind jedoch vor allem die Abstände zwischen aufeinanderfolgenden Block-Elementen interessant, also etwa die Abstände zwischen Überschrift und Textabsätzen oder zwischen zwei Textabsätzen. Deshalb erlaubt es CSS zusätzlich, zwischen den Einzeleigenschaften margin-top (Abstand oben), margin-bottom (Abstand unten), margin-left (Abstand links) und margin-right (Abstand rechts) zu unterscheiden. Gerade bei Abständen zwischen Blockelementen im Fließtext ist jedoch eine Besonderheit zu beachten.

Dazu ein Beispiel:
<p style="margin-bottom:8px">Ein Textabsatz</p>
<p style="margin-top:5px">Noch ein Textabsatz</p>

Vom CSS-Boxmodell her betrachtet, müssten sich die beiden Randangaben einfach addieren, so dass zwischen den beiden Absätzen ein Abstand von 13 Pixel entsteht. Dies ist jedoch nicht der Fall. Im normalen Fließtext kollabieren zwei Angaben zu einer. Maßgeblich ist dabei einfach der höhere Wert. Da dieser im obigen Beispiel 8 Pixel beträgt, bleibt ein tatsächlicher Abstand von 8 Pixel zwischen den beiden p-Elementen.

Link zur CSS-Boxmodell-Problematik:

Artikel »Internet Explorer 5.x – 6.x Boxmodell Bug«:
http://www.fabrice-pascal.de/artikel/ie5boxmodel/


Das Kollabierungsprinzip gilt jedoch nur für Elemente, die im Textfluss vertikal aufeinander folgen. Für Elemente, die nebeneinander angeordnet sind und die Angaben zu margin-left bzw. margin-right enthalten, gilt das Prinzip nicht.

Ausrichtung von Inhalten
Block-Elemente, so haben wir bei der Betrachtung des Boxmodells gesehen, nehmen so viel Breite ein wie verfügbar ist. Der Elementinhalt eines solchen Elements kann innerhalb dieser Breite links, zentriert oder rechts ausgerichtet werden. Text kann außerdem als Blocksatz ausgerichtet werden:
Die linksbündige Ausrichtung ist bei den meisten Elementen das eingestellte Default-Verhalten.
Eine Ausnahme ist beispielsweise das th-Element für Tabellenkopfzellen, die von den meisten Browsern per Default zentriert ausgerichtet werden. Mit text-align:left erzwingen Sie in jedem Fall eine linksbündige Ausrichtung, mit text-align:right eine rechtsbündige Ausrichtung, mit text- align:center eine horizontal mittige Zentrierung des Inhalts und mit text-align:justify einen Blocksatz.

Bilder

Abbildung 4.30: Wortabstandprobleme bei Blocksatz und geringer Elementbreite

Da die Browser für HTML keine automatische Silbentrennung anbieten, kann ein erzwungener Blocksatz besonders bei Elementen mit begrenzter Breite zu unschönen Wortzwischenraumlücken führen, wie die Abbildung zeigt. In dem abgebildeten Beispiel wurde definiert:

<p style="width:200px; text-align:justify">Lorem ipsum ... </p>

Durch die Angabe width:200px wird die Breite des p-Elements auf 200 Pixel begrenzt. Ähnliche Breitenverhältnisse ergeben sich aber auch häufig in Tabellenspalten.

Die CSS-Eigenschaft text-align bezieht sich stets nur auf den Inhalt eines Blockelements, nicht auf das Element selbst. Falls Sie das Element selbst ausrichten möchten, müssen Sie mit margin-left und margin-right arbeiten.

Dazu ein Beispiel:
<p style="width:200px; text-align:right">
Lorem ipsum ...
</p>
<p style="width:200px; text-align:right; margin-right:0px;
margin-left:auto">
Lorem ipsum ...
</p>

In dem Beispiel sind zwei Textabsätze notiert. Beide haben eine reduzierte Breite von 200 Pixel und der Inhalt beider Elemente wird rechtsbündig ausgerichtet. Das erste p-Element wird jedoch selbst linksbündig innerhalb der verfügbaren Gesamtbreite ausgerichtet, während das zweite p-Element rechtsbündig ausgerichtet wird. Die folgende Abbildung demonstriert das Ergebnis:

Bilder

Abbildung 4.31: Ausrichtung von Elementinhalt und Element selbst

Die durch text-align:right bewirkte rechtsbündige Ausrichtung des Elementinhalts hält sich in jedem Fall an die mit width erzwungene Elementbreite. Die Ausrichtung des Elements selbst wird wie im zweiten p-Element zu sehen durch Angaben zu margin-left und margin-right, also zu den horizontalen Elementrändern, gesteuert. Die rechtsbündige Elementausrichtung wird durch margin- right:0px angewiesen. Doch erst im Zusammenspiel mit der Angabe margin-left:auto funktioniert die Ausrichtung tatsächlich wie gewünscht.

Einrückungen
Soll beispielsweise ein einzelner Textabsatz links eingerückt werden, können Sie dies ganz einfach mit margin-left erreichen. Weisen Sie einfach den gewünschten linken Rand zu, und das Element wird entsprechend eingerückt dargestellt.
Aus belletristischen Büchern ist auch die Einrückung der ersten Textzeile eines Absatzes bekannt. Für diesen Effekt steht die CSS-Eigenschaft text-indent zur Verfügung. Durch eine Angabe wie text-indent:5mm rücken Sie die erste Textzeile 5 Millimeter ein. Mit negativen Werten bewirken Sie übrigens eine Ausrückung der ersten Zeile gegenüber den weiteren Zeilen, also z.B. text-indent:-5mm.

6.8 CSS-Eigenschaften für Farbe und Form

Farben und Formen entstehen in CSS durch Rahmen und durch Gestaltung des Elementhintergrunds.

Rahmen und Innenabstände
Um einen einheitlichen Rahmen für alle vier Seiten eines Elements zu definieren, können Sie mit der CSS-Eigenschaft border arbeiten. Es ist aber auch möglich, Rahmen nur für einzelne Seiten zu definieren oder unterschiedlich aussehende Rahmen für einzelne Seiten.
Dazu stehen die Eigenschaften border-left (Rahmen links), border-right (Rahmen rechts), border-top (Rahmen oben) und border-bottom (Rahmen unten) zur Verfügung. Alle fünf Eigenschaften stellen Zusammenfassungen von einzelnen untergeordneten Eigenschaften zu Dicke, Farbe und Typ des Rahmens dar. Deshalb sind bei der Wertzuweisung bis zu drei Angaben möglich, die durch Leerzeichen zu trennen sind.

Dazu ein Beispiel:
<div style="border:1px solid red">...
</div>
<div style="border-top:double rgb(192,192,255) 6px;
border-bottom:solid rgb(255,192,192)">...
</div>

Im Beispiel werden zwei div-Bereiche definiert. Der erste Bereich erhält einen einfach durchgezogenen Rundumrahmen von 1 Pixel Breite (border:1px solid red). Beim zweiten Bereich bleiben die Elementseiten links und rechts rahmenlos. Für oben wird eine doppelte hellblaue Linie mit einer Gesamtbreite von 6 Pixel bestimmt (border-top:double rgb(192,192,255) 6px) und für unten eine einfache rosafarbene Linie ohne definierte Breite (border-bottom:solid rgb(255,192,192)). Dem Beispiel ist erstens zu entnehmen, dass die Reihenfolge der Angaben bei der Wertzuweisung egal ist – border:1px solid red ist also genauso erlaubt wie border:red solid 1px. Zweitens geht aus ihm hervor, dass nicht alle drei Angaben zwingend sind. Fehlt eine Angabe, so verwendet der Browser einen Default-Wert.
Ein Rahmen wird vom Betrachter eigentlich nur als solcher empfunden, wenn er rund um das gesamte Element gezogen wird. Werden dagegen nur einzelne Rahmenangaben für links, rechts, oben oder unten definiert, entsteht optisch eher der Eindruck von Linien. Genau das ist aber ein interessantes Stilmittel zur Auflockerung.
Damit Rahmen bzw. Linien richtig zur Geltung kommen, sind in der Praxis meist zusätzliche CSS- Angaben erforderlich. Vor allem der Innenabstand ist von Bedeutung, um zwischen Elementinhalt und Rahmen einen als angenehm empfundenen Raum zu schaffen.
Anhand eines Beispiels wollen wir zeigen, wie das Zusammenspiel von CSS-Angaben zu Rahmenteilen, Innenabständen, Elementabständen und Einrückungen zu ansprechenden Ergebnissen beim Textlayout führen kann.

Bilder

Abbildung 4.32:  Textlayout mit Rahmenelementen, Anständen und Einrückungen


Der HTML-Quelltext zur Abbildung lautet:
Listing 4.6: Quelltext einer Seite mit Rahmenelementen, Abständen und Einrückungen

Bilder

Die Überschriften erhalten in diesem Beispiel Schmucklinien zur optischen Auflockerung. Die h1- Überschrift erhält mit border-bottom unterhalb eine grüne und 6 Pixel breite Doppellinie. Die beiden h2-Überschriften erhalten jeweils oben und links (border-top und border-left) eine einfache, 2 Pixel breite Linie im Farbton »teal«. Damit die Überschriftentexte nicht zu nah an den Linien kleben, werden jeweils Innenabstände notiert. Die h1-Überschrift erhält mit padding-bottom einen Innenabstand unten von 12 Pixel. Da diese Überschrift mit border-bottom eine Linie unten erhält, entsteht ein Abstand von 12 Pixel zwischen den tiefsten Unterlängen des Überschriftentextes und der Linie. Die h2-Überschriften erhalten analog zu den Definitionen für border-left und border-top geeignete Innenabstände mit padding-left (Innenabstand links) und padding-top (Innenabstand oben).
Die Überschriften bekommen im Beispiel ferner die gleiche Textfarbe (color) zugewiesen wie ihre Rahmen. Das unterstreicht optisch den Zusammenhang zwischen Überschriften und Linien.
Eine weitere Maßnahme zur optischen Auflockerung ist die Einrückung der Absätze mit den Blindtexten. Diese werden mit margin-left:12px so eingerückt, dass der Textanfang genau an der gleichen Linksposition beginnt wie der Textanfang der zugehörigen h2-Überschriften. Bei den h2- Überschriften errechnet sich die Linksposition des Textanfangs aus den Werten für padding-left + border-left, also 10 + 2 = 12 Pixel.
Damit die gesamte Seite noch ansprechender wirkt, wurden dem body-Element etwas großzügigere linke und rechte Ränder (jeweils 25 Pixel mit margin-left und margin-right) spendiert.

Die Wertzuweisungen an die Eigenschaften border, border-left, border-top, border-bottom und border-right setzen sich wie bereits erwähnt aus den drei Untereigenschaften für Dicke, Typ und Farbe des Rahmens zusammen. Diese Untereigenschaften sind auch mit separaten CSS- Eigenschaften ansprechbar: border-width (Rahmendicke), border-style (Rahmentyp) und border-color (Rahmenfarbe). In Kombination mit den vier Seiten ergeben sich dadurch auch Eigenschaften wie border-left-width, border-top-style oder border-bottom-color.
Beim Rahmentyp bietet CSS eine Reihe von vordefinierten Typen an. So bewirkt die Wertzuweisung solid einen durchgezogenen, einfachen Rahmen und double einen doppelten Rahmen. Weitere Typen lassen sich durch die Werte dotted (gepunktet) und dashed (gestrichelt) sowie durch Angaben zu 3D-Effekten wie groove, ridge, inset und outset erzwingen. Für den Effekt spielt die Rahmendicke natürlich eine entscheidende Rolle, und vor allem bei den 3D-Effektrahmen auch die Rahmenfarbe.

Hintergrundgestaltung
Jedes im Browser-Fenster sichtbare HTML-Element kann mithilfe von CSS eine eigene Hintergrundgestaltung erhalten – sowohl Block- als auch Inline-Elemente. Möglich sind dabei eine Hintergrundfarbe oder eine Hintergrundgrafik. Bei Hintergrundgrafiken kann es sich um ein so genanntes Wallpaper handeln, also ein durch Wiederholung entstehendes Muster, oder auch um eine wunschgemäß positionierte Einzelgrafik.
Die CSS-Eigenschaft background-color zur Definition einer Hintergrundfarbe haben wir bereits kennen gelernt. Erlaubt ist eine Farbangabe wie in Abschnitt 4.6.3 beschrieben. Achten Sie bei Verwendung von Hintergrundfarben stets auf geeignete, d.h. gut kontrastierende Vordergrundfarben beim Text. Farben machen Webseiten attraktiv. Aber man kann auch viel verkehrt machen im Umgang damit. Und noch mehr verkehrt machen kann man im Umgang mit Hintergrundgrafiken. In den Frühzeiten der grafischen Browser kamen die Wallpapers für Webseiten in Mode. Grauenhaft grobe Muster erwarteten den Besucher allerortens, auf denen der Text kaum noch lesbar war. Heute stößt man zwar nur noch selten auf solche Seiten, doch gerade Einsteiger lassen sich leicht dazu verleiten, grafisch zu dick aufzutragen.
Unser erstes Beispiel zum Einsatz von Hintergrundgrafiken zeigt, wie ein Wallpaper sinnvoll einsetzbar ist. Ein gern genutzter und ordentlich aussehender Effekt auf Webseiten ist das optische Hervorheben einer Navigationsleiste, indem diese über dem Seiteninhalt zu schweben scheint, da sie einen Schatten auf die Seite wirft. Die Grafik, mit deren Hilfe wir den entsprechenden Effekt bewerkstelligen, sieht so aus (siehe Abbildung 4.33).
Um den gewünschten Effekt zu erzielen, muss die Grafik den Style-Eigenschaften des body- Elements zugewiesen werden, und zwar so, dass sie senkrecht untereinander wiederholt wird, nicht aber waagerecht:

<body style="background-image:url(wallpaper.gif); background-repeat:repeat-y;">

Bilder

Abbildung 4.33: Wallpaper-Grafik für Navigationsleiste mit Schatteneffekt

Durch background-image wird eine Hintergrundgrafik für das betroffene Element eingebunden. Die Wertzuweisung hat das Schema url(URI), wobei URI eine beliebige absolute Internetadresse einer Grafik oder eine lokal referenzierte Grafik sein kann. Im obigen Beispiel liegt die Grafikdatei, also wallpaper.gif, im gleichen Verzeichnis wie die HTMLDatei, in der sie eingebunden wird. Die Grafik hat übrigens eine Größe von nur 1,7 Kbyte Größe, ist also selbst bei schwachen Internetverbindungen schnell übertragen.
Die Art, wie die Hintergrundgrafik wiederholt werden soll, wird durch die CSS-Eigenschaft background-repeat festgelegt. Der Wert repeat-y bewirkt, dass die Grafik nur »eine Spalte lang« wiederholt wird, waagerecht dagegen nicht. Falls Sie eine Grafik nur oben »eine Zeile lang« wiederholen möchten, geben Sie repeat-x an. Mit no-repeat wird die Hintergrundgrafik nur einmalig angezeigt – ein Beispiel dazu folgt weiter unten. Wenn Sie gar nichts zu background-repeat angeben, wird die Voreinstellung repeat verwendet.
Dabei wird die Hintergrundgrafik sowohl waagerecht als auch senkrecht so oft wiederholt, wie sie in die Ausdehnung des Elements hineinpasst (Tapetenmustereffekt). Im Browser wird durch unser Beispiel folgender Effekt erzielt:

Bilder

Abbildung 4.34: Wallpaper-Grafik im Browser

Der entstandene optische Bereich lässt sich hervorragend für eine Navigationsleiste verwenden. Der entsprechende HTML-Bereich dafür sollte jedoch genau positioniert werden. Ein zweites Beispiel zum Einsatz von Hintergrundgrafiken zeigt, wie Sie den Seiteninhalt bewusst über die Hintergrundgrafik legen können. Die Hintergrundgrafik ist im Beispiel ein Bild der Sonne als Feuerball. An allen Rändern ist die Grafik schwarz. Dadurch eignet sie sich zur Kombination mit einem schwarzen Seitenhintergrund.

Bilder

Abbildung 4.35: Sonnenbild für Hintergrundgrafik

Diese Hintergrundgrafik binden wir wieder ins <body>-Tag ein:

<body style="background-image:url(sonne.jpg); background-repeat:no-repeat;
background-color:black">

Die Hintergrundgrafik wird mit background-image eingebunden. Dass sie nur einmal angezeigt wird, wird durch background-repeat:no-repeat sichergestellt. Den Seitenhintergrund setzen Sie durch background-color:black auf Schwarz. Auf diesem Hintergrund platzieren wir nun eine passende, effektvolle Überschrift mit folgender Formatierung:

<h1 style="margin-top:100px; margin-left:130px;
margin-right:40px; font-size:36px; color:white;
border-top:rgb(239,82,0) dotted 4px;
border-bottom:rgb(239,82,0) dotted 4px">
Die Sonne - Licht und Leben
</h1>

Die Überschrift wird mithilfe von margin-top (Rand oben) und margin-left (Rand links) so positioniert, dass sie über der Sonnenmitte beginnt. Weiterhin erhält die Überschrift eine weiße Textfarbe (color), eine auffällige Schriftgröße von 36 Pixel (font-size) und zwei 4 Pixel dicke, gepunktete Rahmenlinien oberhalb und unterhalb (border-top bzw. border-bottom).
Wenn eine Hintergrundgrafik nur einmalig angezeigt wird, wie im Beispiel, so bedeutet dies: links oben an Position 0,0, gemessen von den Elementgrenzen. Mitunter ist es jedoch sinnvoll, die genaue Position zu beeinflussen. Dazu dient die CSS-Eigenschaft background-position. Durch eine Angabe wie background-position:30px 20px erzwingen Sie eine Verschiebung um 30 Pixel zur linken Elementgrenze und 20 Pixel zur oberen Elementgrenze.
Ferner stehen die relativen Wertzuweisungen top, left, bottom, right und center zur Verfügung. Je zwei sinnvolle Kombinationen davon ergänzen sich. So bewirkt die Angabe background-position:top center eine an der Elementbreite gemessen zentrierte und gemessen an der Elementhöhe obenbündige Ausrichtung der Hintergrundgrafik. Die Angabe background-position:bottom right richtet die Hintergrundgrafik rechts unten an den Elementgrenzen aus und background-position:center center positioniert die Hintergrundgrafik sowohl horizontal als auch vertikal mittig in der Elementbox. Im letzteren Fall würde übrigens auch eine einfache Angabe von center genügen. Wenn background-position nur ein Wert zugeordnet wird, gilt dieser sowohl für »von links« als auch für »von oben«.

Bilder

Abbildung 4.36: Hintergrundbild und passender Vordergrund

Ein drittes Beispiel soll einen weiteren, in der Praxis häufig genutzten Effekt demonstrieren: ein Logo oder Schriftzug, der beim Scrollen von längeren Inhalten fix an seiner Stelle stehen bleibt. Früher wurden häufig Frames verwendet, nur um diesen Effekt zu erreichen. Glücklicherweise ist dies heute nicht mehr nötig. Folgendes Bild soll fix im Browser-Fenster stehen bleiben (siehe Abbildung 4.37).

Ein Komplett-Listing zeigt die weitere Vorgehensweise:
 

Bilder

 

Bilder

Abbildung 4.37: Logo/Schriftzug für fixe Positionierung

Bilder

Abbildung 4.38: Hintergrundgrafik, die nicht mit gescrollt wird

Wie auch in den Beispielen zuvor wird die Hintergrundgrafik mit background-image ins body-Element eingebunden. Der Effekt, dass die Grafik beim Scrollen in längeren Seiteninhalten fix an ihrer Position stehen bleibt, wird durch die zusätzliche Angabe background-attachment:fixed erreicht. Das Normalverhalten, also Scrollen mit dem Seiteninhalt, kann durch background- attachment:scroll erzwungen werden.
In unserem Beispiel haben wir die Grafik durch background-position:10px 10px etwas vom linken oberen Rand abgesetzt. Ferner definierten wir mit background-color eine Hintergrundfarbe für die Seite, die exakt der hellsten Farbe am unteren Rand der Grafik entspricht. So entsteht ein fließender Übergang, der gar nicht mehr erkennen lässt, wo genau die Grafik ihre untere Grenze hat.
Der Hintergrund eines HTML-Elements lässt sich also über Angaben zu den Einzeleigenschaften background-color, background-image, background-position, background-repeat und background- attachment steuern. All diese Angaben können jedoch auch in der Sammeleigenschaft background notiert werden.

Dazu ein Beispiel:
<div style="background:url("background.png") gray 50% no-repeat fixed">...</div>

In diesem Beispiel wird für einen div-Bereich eine dunkelgraue (gray) Hintergrundfarbe festgelegt. Als Hintergrundgrafik soll die Datei background.png angezeigt werden. Die Position der Hintergrundfarbe wird mit 50% angegeben. Das bedeutet: sowohl horizontal als auch vertikal zentriert, gemessen an den Ausmaßen der Elementbox. Die Hintergrundgrafik soll nur einmalig angezeigt werden (no-repeat) und sie soll nicht mitscrollen (fixed). Da solche Sammelangaben jedoch leicht unübersichtlich wirken, sind die Einzelangaben zumindest in Hinblick auf die Lesbarkeit empfehlenswerter.

6.9 CSS-Eigenschaften für die Positionierung von Elementen

Mit den bisher vorgestellten Möglichkeiten von CSS beeinflussen wir nicht den normalen Textfluss eines HTML-Dokuments, im CSS-Fachjargon als normal flow bezeichnet. In diesem Abschnitt werden wir nun unter anderem CSS-Eigenschaften kennen lernen, die den normalen Textfluss außer Kraft setzen oder manipulieren. Dadurch ergeben sich Möglichkeiten, die vor allem beim Design von Seitenlayouts mit CSS zum Tragen kommen. Kontrolle von Breite und Höhe Block-Elemente im normalen Textfluss nehmen so viel Breite ein wie möglich und so viel Höhe wie nötig. Dieses Default-Verhalten lässt sich auf mehrfache Weise manipulieren:
- Breite und Höhe können vorgegeben werden.
- Spielraum kann durch Angabe von Mindestbreite, Maximalbreite, Mindesthöhe und Maximalhöhe definiert werden.
- Für Inhalte, die größer sind als die Vorgaben zu Breite und/oder Höhe, lässt sich eine Konfliktlösung festlegen (z.B. Inhalte einfach abschneiden oder Inhalte scrollen).
- In Verbindung mit anderen Angaben lassen sich Elemente mit definierter Breite ausrichten.

Breite und Höhe eines Block-Elements können durch die CSS-Eigenschaften width (Breite) und height (Höhe) festgelegt werden.

Ein einfaches Beispiel:
<p style="width:300px; height:150px; background-color:aqua"></p>

Das normale Elementverhalten wird dadurch aufgehoben. Selbst wenn das Element keinerlei Inhalt hat, so wie im Beispiel, wird eine Box mit den für Breite und Höhe angegebenen Ausmaßen dargestellt:

Bilder

Abbildung 4.39: p-Element mit definierter Breite und Höhe

Die angegebene Hintergrundfarbe macht die Box des p-Elements sichtbar. Füllt man eine solche Box mit Inhalt, werden die Angaben zu width und height jedoch nur so lange eingehalten, wie der Inhalt hineinpasst. Ist der Inhalt umfangreicher, wird die Box ausgedehnt. Reiner Text beispielsweise passt in der Breite durchaus in die Box, aber wenn er in der Länge mehr Raum benötigt, als Höhe angegeben ist, wird die Box in der Höhe einfach ausgedehnt und angepasst. Das Gleiche passiert mit der Breite, falls der Inhalt nicht so umgebrochen werden kann, dass er die Breite einhält. Das ist beispielsweise der Fall, wenn der Inhalt aus einer Grafik besteht, deren Breite größer ist, oder wenn der Inhalt eine Zeichenfolge ohne Whitespace-Zeichen enthält, die mehr Breite einnimmt. Dies ist jedoch ebenfalls nur ein Default-Verhalten, das Sie ändern können. Dazu dient die Eigenschaft overflow. Durch Angabe von overflow:hidden erreichen Sie, dass die Boxgrößen von width und height eingehalten werden und dass übergroßer Inhalt einfach abgeschnitten wird. Für manche Fälle interessant ist jedoch auch das Angebot an den Anwender, übergroße Inhalte zu scrollen. Dazu dient die Angabe overflow:scroll.

Bilder

Abbildung 4.40: Beeinflussung übergroßer Inhalte durch die overflow-Eigenschaft

Die Angaben zu Breite und Höhe können auch prozentual sein. Interpretiert werden sie dann jedoch nur, wenn es ein Elternelement gibt, dessen absolut festgelegte oder errechnete Breite den Maßstab für die Prozentangabe bildet. Wenn Sie also beispielsweise einem p-Element im normalen Textfluss width:70% zuweisen, dann gilt die Breite des body-Elements, innerhalb dessen das p-Element vorkommt, als Bezug. Kommt das p-Element dagegen innerhalb eines div-Bereichs vor, dessen Breite mit width:400px festgelegt wurde, dann beziehen sich die 70% auf diese Breite. Sie können auch Werte für min-width bzw. max-width und min-height bzw. max-height notieren. Wenn die angegebene oder verfügbare Breite größer ist als min-width, hat diese Eigenschaft gar keine Wirkung – das Element wird dann so breit wie angegeben oder möglich. Eine Wirkung hat die Angabe nur dann, wenn die angegebene oder verfügbare Breite kleiner ist. Analog verhält es sich bei min-height. Leider werden die Mindest- und Maximalangaben zu Breite und Höhe nicht von allen Browsern interpretiert. Von daher ist bei ihrer Verwendung Vorsicht angebracht. Absolute, relative und fixe Positionierung Durch Angaben zur Positionierung von Elementen heben Sie den normalen Textfluss wie folgt auf:
- Relative Positionierung positioniert eine Elementbox relativ zu der Position, die sie im normalen Textfluss hat.
- Absolute Positionierung positioniert eine Elementbox entweder relativ zu einem ebenfalls positionierten Elternelement, oder, falls es kein positioniertes Elternelement gibt, absolut im Dokument.
- Fixe Positionierung positioniert eine Elementbox in jedem Fall absolut im Dokument, und zwar so, dass das Element beim Scrollen nicht mitscrollt.

Zunächst ein Beispiel zur relativen Positionierung:
<p style="background-color:aqua">ABSATZ</p>
<p style="background-color:aqua">ABSATZ</p>
<p style="background-color:aqua; position:relative; left:100px;
top:8px">ABSATZ</p>
<p style="background-color:aqua">ABSATZ</p>
<p style="background-color:aqua">ABSATZ</p>

Zur besseren Visualisierung des Effekts, den die relative Positionierung bewirkt, werden fünf Textabsätze definiert. Allen wird eine Hintergrundfarbe zugewiesen, damit ihre Elementbox sichtbar ist. Der mittlere Absatz wird mit position:relative relativ positioniert. Wo genau er positioniert werden soll, wird im Beispiel durch die Eigenschaften left (links) und top (oben) festgelegt.
Die Angaben zu left und top bewirken in Verbindung mit der relativen Positionierung, dass die Elementbox im Beispiel 100 Pixel weiter rechts und 8 Pixel weiter unten beginnt als sie es normalerweise tun würde.

Bilder

Abbildung 4.41: Relative Positionierung eines Textabsatzes

Im Ergebnis fällt auf, dass der Browser die Verschiebung des Elements nach unten bzw. rechts wie definiert ausführt. Die Elementbreite wird jedoch nicht angepasst. Das p-Element nimmt weiterhin die gesamte verfügbare Breite ein, die es im normalen Textfluss einnehmen würde. Das bedeutet im Klartext, dass der Anwender möglicherweise quer scrollen muss, um alle Inhalte des Elements zu sehen. Wenn Ihnen dieses Verhalten unerwünscht erscheint, dann könnten Sie es im Beispiel durch folgende Erweiterung korrigieren:

<p style="background-color:aqua; position:relative; left:100px; top:8px; marginright:
100px">ABSATZ</p>

Durch margin-right:100px wird hier ein Gegengewicht zu left:100px geschaffen. Die Elementbreite verkürzt sich rechts um so viele Pixel, wie es links durch die relative Positionierung verschoben wird. Seine rechte Elementgrenze ist nun wieder bündig zu denen der übrigen Absätze.
Um die absolute Positionierung besser zu verstehen, greifen wir auf das Beispiel von Abbildung 4.34 zurück. Dort wurde bereits darauf hingewiesen, dass sich die durch die Hintergrundgrafik entstandene linke Leiste hervorragend für eine Navigationsleiste eignet. Wir werden nun einige sichtbare Boxen in dieser Leiste positionieren. Auf die Navigations-Links verzichten wir an dieser Stelle noch und notieren an ihrer Stelle nur die Linkbeschriftungen.

Bilder

Bilder

Abbildung 4.42: Absolut positionierte Elemente vor einer Hintergrundgrafik

Innerhalb des body-Bereichs werden insgesamt vier div-Bereiche definiert. Einer davon enthält die anderen drei als Elementinhalt. Alle Bereiche werden mit position:absolute absolut positioniert. Dabei kommt die Regel für absolutes Positionieren zum Tragen: Der Bezug für den äußeren div- ereich ist das Dokument bzw. das Browserfenster. Die Angaben left:20px und top:20px bedeuten bei diesem Bereich also den Offset gegenüber der linken oberen Ecke des Anzeigefensters. Bei den drei inneren Bereichen ist es anders. Da der äußere Bereich selbst positioniert ist, stellt er für die inneren Bereiche den Bezugspunkt dar. Die Angaben left:0px und top:0px beim ersten inneren Bereich, der Box mit dem Textinhalt »HOME«, bewirken also, dass die linke obere Ecke dieses Elements beim Offset 20,20 beginnt. Denn das ist die linke obere Ecke des positionierten Elternelements, und der Offset 0,0 muss relativ zu diesem Offset betrachtet werden. Die drei inneren Bereiche unterscheiden sich in ihren CSS-Definitionen nur durch den Wert bei top (jeweils 30 Pixel mehr pro Bereich). Dadurch werden die Bereiche sauber untereinander positioniert.
Der äußere div-Bereich gibt übrigens auch die Breite vor. Dort wird mit width:230px eine Breite festgelegt, die optimal auf das Hintergrundbild passt, das für die schattierte Fläche am linken Fensterrand verantwortlich ist. Die inneren Bereiche erhalten nur die Angabe width:100%, um diesen Bereich komplett auszufüllen. Man könnte meinen, dass diese Angabe überflüssig sei, weil Block-Elemente ja normalerweise die gesamte zur Verfügung stehende Breite einnehmen. Das gilt jedoch nur, wenn sich die Elemente im normalen Textfluss befinden. Positionierte Elemente haben in dieser Hinsicht keinen Bezugspunkt und werden deshalb nur so breit dargestellt, wie es ihr Inhalt erfordert – es sei denn, man definiert explizit eine Breite. Noch einen Schritt weiter als die absolute Positionierung geht die fixe Positionierung. Dieses Feature ist so mächtig, dass es locker 90% aller Frameset-basierten Seiten im Web überflüssig macht. Denn meistens werden Frames nur genutzt, um so genannte non scrolling regions zu realisieren, z.B. für Firmenlogos oder Werbebanner, die beim Scrollen von längeren Inhalten im Browserfenster stehen bleiben. Leider wird die fixe Positionierung vom MS Internet Explorer 6.0 noch nicht unterstützt, weswegen die Akzeptanz bisher gering ist. Es existieren zwar Workarounds, um auch den Microsoft-Browser dazu zu bewegen, Bereiche fix zu positionieren, doch ist dies mit einiger Trickserei verbunden, was keine wirklich befriedigende Lösung ist. Das folgende Beispiel definiert im oberen Anzeigefensterbereich eine waagerechte non scrolling region mit Logo:

Bilder

Bilder

Abbildung 4.43: Fix positionierter Kopfbereich

Der Quelltext dieses Beispiels führt bei längeren Dokumentinhalten dazu, dass Browser, welche die Eigenschaft/Wert-Kombination position:fixed korrekt interpretieren, den Bereich mit Logo und roter Linie nicht mitscrollen. Der nach oben wegscrollende Text verschwindet unterhalb des Kopfbereichs. Die Abbildung im Beispiel zeigt, dass der Mozilla-Browser, der die fixed- igenschaft interpretiert, zwar den vertikalen Scrollbalken über die gesamte Fensterhöhe anzeigt. Dennoch bleibt beim Scrollen der Logobereich fest eingeblendet. Der MS Internet Explorer zeigt den Inhalt genauso an, scrollt jedoch den Kopfbereich mit.
Die Angaben z-index:2 und z-index:1 sorgen übrigens dafür, dass der untere Bereich beim Scrollen unter dem oberen verschwindet, weil er die niedrigere z-index-Nummer hat. Wir werden später noch genauer auf die z-index-Eigenschaft eingehen.

Umflusskontrolle
Ein optisch ansprechendes Gestaltungsmerkmal, bekannt aus Büchern und Zeitschriften, sind Grafiken, um die der Text herumfließt, oder auch in den Text eingeschobene und von ihm umflossene Überschriften, Infokästen oder Merksprüche. CSS stellt Mittel bereit, um solche Effekte auch auf Webseiten zu zaubern.

Beginnen wir mit einer Überschrift, die in den Text eingeschoben wird:
Der zugehörige Quelltext lautet:
<h1 style="width:150px; float:left; padding-top:0; margin-top:0;
padding-bottom:0; margin-bottom:10px">
Blindtext
</h1>
<p>
Lorem ipsum ...
</p>

Bilder

Abbildung 4.44: In den nachfolgenden Text eingeschobene Überschrift

Der Effekt kommt durch die Kombination der CSS-Eigenschaften float und width zustande. Durch width wird die Anzeigebreite des h1-Elements begrenzt. Mit float:left wird angewiesen, dass nachfolgende Elemente im Textfluss um das so definierte Element herumfließen. Die Angabe float:right wäre ebenfalls zulässig. In diesem Fall würde die Überschrift rechts außen ausgerichtet und der nachfolgende Text würde links darum fließen. Die übrigen CSS-Definitionen im Beispiel zu Abstand und Innenabstand sorgen für die Feinjustierung des Überschriftentextes.
Eigentlich ist in CSS 2.1 eine andere Angabe vorgesehen, um obigen Effekt zu erzielen, nämlich display:run-in. Doch leider interpretieren die Browser diese Wertzuweisung noch nicht, weshalb noch davon abzuraten ist. Wichtig in Zusammenhang mit der float-Eigenschaft ist auch die Eigenschaft clear. Ein weiteres Beispiel soll dies demonstrieren:

Bilder

Bilder

Abbildung 4.45: Abbruch des Textumflusses und Fortsetzung unterhalb

In diesem Beispiel wird eine Grafik (img-Element) vom nachfolgend notierten Text umflossen. Im <img>-Tag der Grafik ist zu diesem Zweck die Eigenschaft float:left notiert. Da die Grafik eine gewisse Höhe hat, würde auch noch der im Anschluss an die h1-Überschrift notierte Textabsatz rechts um die Grafik fließen. Im einleitenden <p>-Tag des Absatzes sorgt jedoch clear:left dafür, dass die Wirkung von float:left aufgehoben wird. Für den Textabsatz gilt damit wieder der normale Textfluss, was bedeutet, dass er unterhalb der Grafik platziert wird. Durch clear:left heben Sie eine float:left-Definition auf, durch clear:right eine float:right-Definition. Falls sowohl float:left als auch float:right »aktiv« sind, können Sie durch clear:both beide Umflussanweisungen aufheben. Eine weitere wichtige CSS-Eigenschaft, die unter anderem zur Textflusskontrolle eingesetzt werden kann, ist display. Mithilfe dieser Eigenschaft können Sie einem Element explizit zuweisen, ob es sich als Block- oder als Inline-Element verhalten soll. Damit ist es möglich, die Block- und Inline-Defaults von HTML außer Kraft zu setzen.

Dem sichtbaren Text dieser Abbildung liegt folgender Quelltext zu Grunde:

<div>
<h1 style="display:inline; margin-right:10px;
vertical-align:text-bottom">
Blindtext:
</h1>
Lorem ipsum ...
</div>

Bilder

Abbildung 4.46: h1-Überschrift als Inline-Element

Das gesamte Konstrukt ist also in einen div-Bereich eingebettet, damit es sich in einem Block- Element befindet, was von striktem HTML gefordert wird. Aus der h1-Überschrift wird durch die Definition display:inline ein Inline-Element. Der nachfolgende Text beginnt einfach in der gleichen Zeile direkt hinter der rechten Elementgrenze der Überschrift. Damit der nachfolgende Text nicht unmittelbar an der Überschrift klebt, erhält diese im Beispiel mit margin-right:10px etwas Abstand rechts. Bemerkenswert ist im Beispiel auch die Angabe vertical-align:text-bottom. Mit der vertical- align-Eigenschaft können Sie nebeneinander stehende und gegeneinander ausgerichtete Inhalte unterschiedlicher Höhe vertikal ausrichten. Würde diese Angabe im Beispiel fehlen, so würde die erste Zeile des nachfolgenden Textes zur zweiten Zeile mehr Zeilenabstand haben als die nachfolgenden Textzeilen untereinander, weil die Schriftgröße der h1-Überschrift den Zeilenabstand beeinflusst. Auf die Eigenschaft vertical-align werden wir in Zusammenhang mit der CSS- Formatierung von Tabelleninhalten noch genauer eingehen.

Arbeiten mit Layern, Sichtbarkeit und Transparenz
Dank absoluter Positionierung in Verbindung mit Angaben zu Breite und Höhe ist es möglich, Elementboxen frei anzuordnen. Selbstverständlich ist es auch möglich, zwei Elemente an der gleichen Stelle anzuordnen. Untersuchen wir, was dabei passiert:

<div style="position:absolute; top:20px; left:60px; width:400px;
                    height:100px; border:solid 2px blue">
  <h1>Erster Bereich</h1>
 

</div>
<div style="position:absolute; top:20px; left:60px; width:400px;
height:100px; border:solid 2px red">
<h1>Zweiter Bereich</h1>
</div>

Es werden zwei div-Bereiche definiert. Beide erhalten identische Angaben zur absoluten Position. Sie unterscheiden sich lediglich in der Rahmenfarbe (der erste Bereich hat einen blauen Rahmen und der zweite einen roten) sowie im Elementinhalt (beide enthalten eine h1-Überschrift, jedoch mit unterschiedlichem Text).

Bilder

Abbildung 4.47: Zwei Bereiche an gleicher Position

Die Anzeige des Beispiels im Browser offenbart Folgendes:

Der zweite Bereich liegt über dem ersten, was dadurch sichtbar wird, dass die Rahmenfarbe Rot ist. Denn dies ist die Rahmenfarbe des zweiten Bereichs. Der Inhalt ist dagegen transparent, was daran erkennbar ist, dass beide Überschriftentexte sichtbar sind. Es sind also folgende Regeln erkennbar:
- Bei positionierten Elementboxen, die sich überlappen, ist die natürliche Schichtreihenfolge durch die Reihenfolge der Notation im Dokument vorgegeben. Ein hinter einem anderen Element notiertes Element wird über diesem angeordnet.
- Der Inhalt von Elementboxen ist transparent.
Mithilfe geeigneter CSS-Definitionen lässt sich dieses Default-Verhalten ändern. Die Schichtreihenfolge von Elementen können Sie durch die Eigenschaft z-index beeinflussen. Dazu bekommen alle Elemente, die sich überlappen, eine z-index-Eigenschaft zugewiesen. Als Wert wird jeweils eine frei wählbare Zahl angegeben. Das Element mit der niedrigsten Zahl wird dann in der untersten Schicht angeordnet, also von allen übrigen Elementen überlappt, und das Element mit dem höchsten z-index-Wert überlappt alle anderen Elemente. In unserem Beispiel können wir das einfach überprüfen, indem wir dem zweiten div-Bereich einen höheren z-index-Wert zuordnen als dem ersten:

<div style="position:absolute; top:20px; left:60px; width:400px;
height:100px; border:solid 2px blue; z-index:2">
<h1>Erster Bereich</h1>
</div>
<div style="position:absolute; top:20px; left:60px; width:400px;
height:100px; border:solid 2px red; z-index:1">
<h1>Zweiter Bereich</h1>
</div>

Bilder

Abbildung 4.48: Schichtenkontrolle mit der z-index-Eigenschaft

Der sichtbare Layer ist nun das div-Element mit dem blauen Rahmen, obwohl dieses als Erstes notiert wurde. Grund ist, dass es mit z-index:2 einen höheren Schichtwert erhalten hat als der zweite Bereich, dem z-index:1 zugewiesen wurde. Die Default-Transparenz von Elementen, erkennbar an den sichtbaren Überschrifttexten beider Bereiche, lässt sich am einfachsten durch eine definierte Hintergrundfarbe ausschalten:

<div style="position:absolute; top:20px; left:60px; width:400px;
height:100px; border:solid 2px blue;
background-color:white">
<h1>Erster Bereich</h1>
</div>
<div style="position:absolute; top:20px; left:60px; width:400px;
height:100px; border:solid 2px red;
background-color:white">
<h1>Zweiter Bereich</h1>
</div>

Beide Bereiche haben nun mit background-color:white eine definierte Hintergrundfarbe erhalten. Die z-index-Eigenschaft wurde entfernt. Der zweite Bereich überlappt den ersten aufgrund der natürlichen Schichtreihenfolge. Da die Elementinhalte der Bereiche nun nicht mehr transparent sind, überdeckt der zweite Bereich den ersten vollständig.

Bilder

Abbildung 4.49: Identisch positionierte, aber nicht transparente Bereiche

Wer das Arbeiten mit Layern aus Grafikprogrammen kennt, weiß, dass besonders edle Effekte durch eine skalierbare Transparenz sich überdeckender Inhalte entstehen. CSS bietet ein entsprechendes Feature erst ab dem zur Drucklegung dieses Buches noch nicht offiziellen Sprachstandard 3.0 an. In einigen Browsern ist es bereits implementiert:

<div style="position:absolute; top:20px; left:60px; width:400px;
height:100px; border:solid 2px red;
background-color:white; opacity:0.5">
<h1>Zweiter Bereich</h1>
</div>

Das Beispiel zeigt den Quelltext des zweiten unserer beiden identisch positionierten Bereiche. Beide Bereiche sind aufgrund der definierten weißen Hintergrundfarbe nicht transparent. Durch die CSS-3.0-Eigenschaft opacity lässt sich jedoch eine Halbtransparenz definieren. Wie stark unterhalb liegende Inhalte durchscheinen, lässt sich durch die Wertzuweisung skalieren. Empfohlen wird hierbei, mit Werten von 0.0 (voll transparent) bis 1.0 (voll opak, also deckend) zu arbeiten.

Bilder

Abbildung 4.50: Halbtransparenter Bereich

Das Ergebnis der Zuweisung von opacity:0.5 ist, dass der zweite Bereich den ersten nun
zu 50% durchscheinen lässt. Auch die Rahmenfarben Rot und Blau mischen sich zu Lila.
Der MS Internet Explorer 6.0 interpretiert die opacity-Eigenschaft noch nicht, doch es gibt
einen Workaround: die Microsoft-proprietäre CSS-Erweiterung der grafischen Filter. Auf
unser Beispiel angewendet, könnten wir die CSS-Definition für den Internet Explorer folgendermaßen anpassen:

<div style="position:absolute; top:20px; left:60px; width:400px;
height:100px; border:solid 2px red;
background-color:white; opacity:0.5; filter:alpha(opacity=50)">
<h1>Zweiter Bereich</h1>
</div>

Die CSS-Angabe filter:alpha(opacity=50) entspricht opacity:0.5 und wird aber im Gegensatz zu Letzterer vom Internet Explorer interpretiert. Das Notieren beider Angaben bewirkt also, dass Browser, welche bereits mit opacity zurechtkommen, diese Eigenschaft interpretieren, während der Internet Explorer die filter-Eigenschaft interpretiert. Das Arbeiten mit skalierbarer Teiltransparenz führt besonders bei Schrift auf halb durchscheinenden Grafiken zu edlen Effekten, wie sie beispielsweise aus zahlreichen Computerspielen mit transparenten Menüs bekannt sind. Behalten Sie jedoch bei solchen Effekten stets die Lesbarkeit des Textes im Auge. Wenn die Lesbarkeit dem Design geopfert wird, kann das Design noch so schick aussehen, es ist dennoch schlecht.

6.10 CSS-Eigenschaften für Listen und Tabellen

Listen und Tabellen haben einige spezifische Eigenschaften. So gehört zu den Variablen einer Aufzählungsliste das Bullet-Symbol oder die Art der Einrückung und bei nummerierten Listen die Art der Nummerierung. Bei Tabellen sind es spezielle Eigenschaften für Rahmen und Gitternetz oder die Art der Anzeige von leeren Zellen. Darüber hinaus haben aber auch anderweitig anwendbare Eigenschaften in Zusammenhang etwa mit Tabellen besondere Bedeutung, etwa Eigenschaften für Abstände oder horizontale und vertikale Ausrichtung.

Eigenschaften von Listen
Um das Aufzählungszeichen (Bullet-Symbol) einer Aufzählungsliste (ul-Element) festzulegen, stellt CSS die Eigenschaft list-style-type zur Verfügung. Bei nummerierten Listen (ol-Element) legt die gleiche Eigenschaft die Art der Nummerierung fest.

Beispiel für eine Aufzählungsliste:
<ul style="list-style-type:disc">

Beispiel für eine nummerierte Liste:
<ol style="list-style-type:upper-roman">

Für Aufzählungslisten sind die Wertzuweisungen disc (ausgefüllter Kreis ?), circle (nur umrandeter Kreis ?), square (ausgefülltes Quadrat ¦) und none (gar kein Aufzählungszeichen) erlaubt.

Die Nummerierungsart bei nummerierten Listen können Sie durch folgende Werte beeinflussen: lower-roman (i, ii, iii, iv usw.), upper-roman (I, II, III, IV usw.), lower-alpha (a, b, c, d usw.), upper- alpha (A, B, C, D usw.), lower-latin (a, b, c, d usw., jedoch auch mit Zeichen wie Umlauten, Accent- Buchstaben), upper-latin (A, B, C, D usw., inklusive Zeichen wie Umlauten, Accent-Buchstaben). Auch eine Alphanummerierung für andere Schriftkulturen kann definiert werden, durch lower-greek (Kleinbuchstaben des griechischen Alphabets), georgian, armenian, hebrew, hiragana, katakana, hiragana-iroha, katakana-iroha. Grafische Browser stellen Aufzählungslisten und nummerierte Listen normalerweise so dar, dass das Aufzählungs- oder Nummerierungszeichen ausgerückt gegenüber mehrzeiligen Listenpunktinhalten dargestellt wird. Dieses Verhalten lässt sich durch Angabe von list-style-position:inside so ändern, dass die zweite und weitere Zeilen eines Listenpunkts unterhalb des Aufzählungspunkts oder der Nummerierung erscheinen.

Keine Lösung bietet CSS leider für das Default-Verhalten der Browser, Listen selbst eingerückt gegenüber dem normalen Fließtext darzustellen. Je nach Browser lässt sich das Verhalten zwar durch Angaben zu margin-left und padding-left beeinflussen, aber eine saubere Allgemeinlösung gibt es nicht. Das Gleiche gilt für den Abstand zwischen Aufzählungszeichen bzw. Nummerierung und Listenpunktinhalt.
Wenn Ihnen dagegen die magere Auswahl der bei list-style-type angebotenen Bullet- Symbole für Aufzählungslisten nicht zusagt, können Sie auch beliebige Grafiken als Bullet-Symbol verwenden.

Dazu dient die Eigenschaft list-style-image. Ein Beispiel:
<ul style="list-style-image:url(blaues_dreieck.gif)">

Ähnlich wie bei background-image wird die gewünschte Grafik über das Schema url(URI) zugewiesen. URI kann eine beliebige Internetadresse oder eine lokal referenzierte Adresse sein. Im Beispiel befindet sich die Datei blaues_dreieck.gif im gleichen Verzeichnis. Die Grafik sollte eine passende Größe haben – die typische Icon-Größe von 16 × 16 Pixel ist eine praxisnahe Orientierungsgröße.

Rahmentyp bei Tabellen
Sichtbare Rahmen und Gitternetze von Tabellen in HTML werden von den meisten grafischen Browsern, wenn nichts anderes angegeben ist, so angezeigt, dass jede Zelle eine Umrahmung erhält. Dazu kommt der Außenrahmen. Webbrowser bilden diesen Sachverhalt so ab, dass Rahmen und Gitternetz als Doppellinien erscheinen oder in 3D-Form mit Licht- und Schattenseite. Beide Varianten wirken meist klobig. Durch die Angabe bordercollapse: collapse im einleitenden <table>- Tag können Sie dafür sorgen, dass die Rahmen der Einzelzellen und die zwischen Zellen und Außenrahmen zusammenfallen.

Bilder

Abbildung 4.51: Tabelle ohne und mit zusammenfallenden Rahmen

Weitere Feinheiten zur Rahmengestaltung müssen Sie allerdings über die Eigenschaften border, border-top, border-left, border-right und border-bottom festlegen, und zwar sowohl für die Tabelle als auch für alle einzelnen Tabellenzellen. Da das Notieren von sich wiederholenden style-Attributen in etlichen Tabellenzellen jedoch nicht sehr zweckmäßig und in CSS viel eleganter über zentrale Formate lösbar ist, werden wir diese Möglichkeit im entsprechenden Zusammenhang behandeln (Abschnitt 4.7).

Breite von Tabellen und Spalten
Durch Angaben zur CSS-Eigenschaft width können Sie sowohl die Breite der gesamten Tabelle als auch einzelne Spaltenbreiten vorgeben.

Dazu ein Beispiel:
<table border="1" style="width:500px;">
<colgroup>
<col style="width:80px">
<col>
</colgroup>
<tr>
<th>Platz</th>
<th>Name</th>
</tr><tr>
<td>1.</td>
<td>Michael Schumacher</td>
</tr>
</table>

Eine Zuweisung von width im einleitenden <table>-Tag gibt eine gewünschte Breite für die gesamte Tabelle vor. Breiten für einzelne Spalten können Sie wahlweise in einem <col>-Tag oder im ersten <th>- oder <td>-Tag der Spalte vorgeben. Auch hierfür ist die CSS-Eigenschaft width geeignet. Alternativ sind auch Definitionen mit min-width oder maxwidth möglich.
Diese Vorgaben sind jedoch nur Wunschvorgaben, die eingehalten werden, sofern es der Inhalt erlaubt. Ist der Inhalt so geartet, dass Spalten oder die gesamte Tabelle breiter werden als vorgegeben, geht die Kontrolle über die Breite verloren. CSS bietet jedoch die Möglichkeit das Tabellenlayout zu fixieren.

Auch dazu ein Beispiel:
<table border="1" style="width:100%; table-layout:fixed;
border-collapse:collapse">
<tr>
<td style="width:15%; overflow:hidden; font-size:18px">
1+2+3+4+5+6+7+8+9+10+11+12+13+14+15+16+17+18+19+20
</td>
<td style="width:30%; overflow:hidden; font-size:18px">
1+2+3+4+5+6+7+8+9+10+11+12+13+14+15+16+17+18+19+20
</td>
<td style="width:55%; overflow:hidden; font-size:18px">
1+2+3+4+5+6+7+8+9+10+11+12+13+14+15+16+17+18+19+20
</td>
</tr>
</table>

In diesem Beispiel wird eine Gesamtbreite der Tabelle von 100% festgelegt. Steht die Tabelle direkt innerhalb von <body> ... </body>, bezieht sich diese Angabe auf die gesamte Dokumentbreite, also das Anzeigefenster abzüglich kleiner Default-Abstände vom Fensterrand. Auch für die einzelnen Spalten der Tabelle ist im Beispiel je eine Breite festgelegt: Die erste Spalte soll 15% Breite einnehmen, die zweite 30% und die dritte 55%. Der Inhalt der Zellen ist jedoch problematisch. Da er keine Whitespace-Zeichen enthält, findet der Browser keine Stelle zum Umbrechen. Er würde die einzelnen Spalten und damit die gesamte Tabelle so weit ausdehnen, dass alle Inhalte angezeigt werden können. Durch die Angabe table-layout:fixed im einleitenden <table>-Tag wird dies jedoch verhindert. Die Angabe bewirkt, dass der Browser die vorgegebenen Breiten auf jeden Fall einhält. Was jedoch mit nicht passenden Spalteninhalten geschehen soll, müssen Sie ebenfalls angeben. Geben Sie nichts an, so hält der Browser die Breitenangaben ein, schiebt aber einen überbreiten Spalteninhalt einfach in die nächste Spalte, was zu hässlichen Überlappungen von Spalteninhalten kommt. In unserem Beispiel haben wir die Variante gewählt, durch Angabe von overflow:hidden in den einzelnen Tabellenzellen dafür zu sorgen, dass übergroße Inhalte abgeschnitten werden. Das Ergebnis sieht so aus: Möglich wäre auch die Angabe overflow:scroll, die den Browser dazu veranlassen sollte, in Zellen mit übergroßem Inhalt Scrollleisten anzuzeigen. Doch leider funktioniert das gegenwärtig in kaum einem Browser.

Bilder

Abbildung 4.52: Fixen Tabellenlayout mit abgeschnittenen Spalteninhalten 

Höhe und Ausrichtung von Tabelleninhalten
Inhalte von Tabellenzellen können unterschiedlich umfangreich sein und dadurch nicht immer die gesamte Breite der Spalte oder die gesamte Höhe der Zeile einnehmen. Die Spaltenbreite orientiert sich, sofern keine Breite vorgegeben wird, an dem breitesten Inhalt der Spalte und an den breitesten Inhalten anderer Spalten. Die Höhe orientiert sich an der Zelle mit dem vertikal umfangreichsten Inhalt innerhalb der Tabellenzeile.
Ebenso wie Breiten lassen sich natürlich auch Höhen explizit festlegen. Dazu steht die Eigenschaft height zur Verfügung. Auf das table-Element bezogen, gibt sie eine gewünschte Höhe für die gesamte Tabelle vor, und auf ein th- oder td-Element bezogen, gibt sie die gewünschte Höhe der betreffenden Tabellenzeile vor.
Anhand des Quelltextes einer vollständigen HTML-Datei zeigen wir nun einen in der Praxis häufig verlangten Effekt: Eine Tabelle soll den gesamten Raum des Anzeigefensters einnehmen und nur eine einzige Zelle enthalten. Deren Inhalt soll sowohl zentriert als auch vertikal mittig ausgerichtet werden, so dass der Inhalt genau in der Mitte des Anzeigefensters platziert wird:

Listing 4.7: Fensterfüllende Tabelle mit mittig zentriertem Inhalt

Bilder

Das einleitende <table>-Tag bekommt die CSS-Definition height:100% zugewiesen. Das allein reicht jedoch nicht aus, da der Tabelleninhalt recht klein ist und das Elternelement, also das body- Element, nicht ausfüllt. Da sich aber die 100% auf die Höhe des Elternelements beziehen, bleibt der gewünschte Effekt aus. Deshalb wird dem body-Element ebenfalls die Definition height:100% zugewiesen. Doch auch das genügt noch nicht, da sich das body-Element, was die Höhe betrifft, nicht an den Ausdehnungen des Anzeigefensters orientiert. Deshalb wird auch noch dessen Elternelement, dem html-Element, explizit die Angabe height:100% zugewiesen. Erst dadurch wird die Tabelle tatsächlich auf 100% Höhe ausgedehnt.

Bilder

Abbildung 4.53: Fensterfüllende Tabelle mit mittig zentriertem Inhalt

Das nächste Problem entsteht jedoch dadurch, dass die Tabelle nun zwar auf 100% Höhe des Anzeigefensters ausgedehnt wird, der Browser den Inhalt des body-Elements jedoch per Default mit etwas Abstand zum Fensterrand versieht. Die Tabelle reicht dadurch in der Höhe ein klein wenig weiter als das Anzeigefenster, so dass ein vertikales Scrollen erforderlich wird, um den gesamten Tabelleninhalt zu sehen. Dieses Problem umgehen wir im Beispiel, indem wir dem body-Element margin:0 und padding:0 zuweisen. Diese Angaben entfernen alle Default-Abstände zum Fensterrand.
Da die Tabelle nur eine einzige Zelle besitzt, wird diese auf Grund der Breiten- und Höhenangaben sowohl in der Breite als auch in der Höhe über das gesamte Anzeigefenster ausgedehnt. Um ihren Inhalt genau in die Mitte des Anzeigefensters zu bringen, richten wir ihn sowohl horizontal zentriert als auch vertikal mittig aus.
Die horizontale Ausrichtung von Tabellenzelleninhalten ist genau so wie das Ausrichten von anderen Block-Elementen mithilfe von text-align möglich. Tabelleninhalte können explizit links (left), rechts (right), zentriert (center) oder als Blocksatz (justify) ausgerichtet werden.
Für die vertikale Ausrichtung stellt CSS die Eigenschaft vertical-align zur Verfügung. Gerade bei Tabellenzellen kommt es häufig vor, dass diese vertikal obenbündig (top), mittig (middle) oder untenbündig (bottom) ausgerichtet werden sollen. Die vertical-align-Eigenschaft erlaubt daneben auch noch weitere Angaben, nämlich baseline (Ausrichtung an der Schriftgrundlinie des Elternelements), sub (Ausrichtung an der Position für tiefgestellten Text), super (Ausrichtung an der Position für hochgestellten Text), text-top (Ausrichtung an der Schriftoberkante des Elternelements) und text-bottom (Ausrichtung an der Schriftunterkante des Elternelements). Für Tabelleninhalte sind jedoch top, middle und bottom in der Regel ausreichend.
Durch die Angaben text-align:center und vertical-align:middle wird der Inhalt unserer einzigen, das Dokumentfenster voll ausfüllenden Tabellenzelle also genau in der Fenstermitte ausgerichtet. Der Zelleninhalt besteht aus zwei div-Bereichen, die durch entsprechende Formatierungen das gewünschte Schriftbild erreichen.

Abstände innerhalb von Zellen und Abstände zwischen Zellen
In vielen Fällen ist es optisch schöner, einen gewissen Abstand zwischen den Gitternetzlinien einer Tabelle und den Zellinhalten zu haben. Dazu wenden Sie einfach die für Innenabstand üblichen CSS-Eigenschaften padding (alle vier Seiten), padding-left (links), padding-top, padding-right (rechts) und padding-bottom (unten) auf th- bzw. td-Elemente an.

Ein trauriges Kapitel ist leider der Abstand zwischen Zellen. Dafür steht zwar die CSSEigenschaft border-spacing zur Verfügung, die genau das mit einer einzigen Angabe im <table>-Tag erledigt. Doch leider interpretiert der MS Internet Explorer diese Eigenschaft nicht. Da bleibt nichts anderes, als auf das ältere, aber nicht zum Strict-Standard gehörende HTML-Attribut cellspacing auszuweichen. In diesem Fall müssen Sie allerdings, wenn Sie konsequent sein wollen, den HTML- Dokumenttyp auf die Transitional-Variante ändern. Nachfolgend das Beispiel einer Tabelle, das auch im Internet Explorer 6.0 funktioniert:

Bilder

Im Beispiel wird ein 10 Pixel großer Abstand zwischen den Tabellenzellen definiert. CSSgerecht wird dazu im style-Attribut des <table>-Tags die Angabe border-spacing:10px notiert. Um rückwärtskompatibel zum MS Internet Explorer zu bleiben, wird im einleitenden <table>-Tag außerdem das Attribut cellspacing="10" notiert, welches den gleichen Effekt hat. Die Angabe zum Zellabstand funktioniert logischerweise nicht, wenn gleichzeitig border-collapse:collapse angegeben wird, da dies ja die Zellrahmen zusammenfallen lässt, was nur bei einem Zellabstand von 0 möglich ist.

Bilder

Abbildung 4.54: Farbige Tabelle mit Zellabstand

Wenn die Tabelle einen sichtbaren Rahmen hat, ist der definierte Zellenabstand im Gitternetz gut erkennbar. Im obigen Beispiel entschieden wir uns jedoch für eine andere Visualisierung. Die Tabelle hat keine sichtbaren Rahmen und Gitternetzlinien, doch dafür wurden Hintergrundfarben für die gesamte Tabelle und für einzelne Zellen definiert – mithilfe der bereits bekannten CSS- Eigenschaft background-color. Auf das table-Element angewendet, wird eine Hintergrundfarbe für die Tabelle bestimmt. Diese wird im Beispiel aber nur gut sichtbar, weil ein großzügiger Zellabstand definiert wurde. Für einzelne Tabellenzellen, welche die gleiche Hintergrundfarbe erhalten sollen, genügt es, background-color auf das zugehörige tr-Element oder noch allgemeiner auf das thead-, tfoot-, oder tbody-Element anzuwenden.

Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

 


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 16:57

Gute Tutorial leicht erklärt.

Portrait von stonetech
  • 29.11.2010 - 14:44

Coole Sache! Respekt!!

Portrait von williamo
  • 21.08.2009 - 14:41

Ein umfangreiches Nachschlagewerk

Portrait von Daphko23
  • 24.06.2009 - 15:15

Hat mir echt geholfen ! Respekt für soviel arbeit!

Portrait von Baltin
  • 10.03.2009 - 02:43

Kann sich auch wieder sehen lassen, wirklich sehr praktisch so eine Sammlung Danke ;o)

Portrait von KayTeEn
  • 09.04.2008 - 00:43

Coole Sache, so eine Tutorialsammlung suche ich schon lange!

Portrait von KBanane
  • 19.03.2008 - 11:14

Mindestens genau so gut wie die beiden Teile davor !!!

Portrait von lippl
  • 15.03.2008 - 18:31

hmja grundlagen ebn..aber sehr ausführlichgut für anfänger;)
danke für die investierte zeit

Portrait von stoffi
  • 15.03.2008 - 18:12

Auf diesen Teil 3 habe ich schon gewartet, endlich !!!

Portrait von skyflight1981
Portrait von Sampiero
  • 14.03.2008 - 22:03

Ab Seite 20 dachte ich:
So jetzt wird doch Schluss sein!
Ab Seite 50 "Oh Herr,lass abend werden",dann habe ich nur noch gebetet!
Ab Seite 60,habe ich mir gewünscht es wären die "Märchen der Gebrüder Grimm".
Ich hoffe nur, die PDF interessiert jemanden ?

Portrait von FabFiveFinger
  • 14.03.2008 - 21:14

Woah, hast dir wohl echt Zeit genommen für's Tutorial. Aller erste Sahne! Mein Respekt!

Portrait von Erazer81
  • 14.03.2008 - 14:18

endlich der dritte Teil!

x
×
×