CSS. Anspruchsvolle Websites mit Cascading Stylesheets gestalten - Grundlagen, Designtechniken und Referenz. von Dan Shafer, Rachel Andrew

Transkript

1 CSS Anspruchsvolle Websites mit Cascading Stylesheets gestalten - Grundlagen, Designtechniken und Referenz von Dan Shafer, Rachel Andrew 2., aktualis. u. erw. Aufl. CSS Shafer / Andrew schnell und portofrei erhältlich bei beck-shop.de DIE FACHBUCHHANDLUNG Thematische Gliederung: Web Graphik & Design, Web-Publishing dpunkt.verlag 2006 Verlag C.H. Beck im Internet: ISBN Inhaltsverzeichnis: CSS Shafer / Andrew

2 161 Wir haben nun einiges an Theorie im Gepäck. Der Rest dieses Buches wird sich damit beschäftigen, wie man CSS bei der Entwicklung seiner eigenen Seiten in die Praxis umsetzen kann. Auf dem Wege dahin werden wir Schritt für Schritt lernen, wie man Seiten mit CSS aufbaut und uns von einfachen zu immer komplexeren Layouts vorarbeiten. Ebenso werden wir einige der bisher beschriebenen Konzepte miteinander kombinieren, um wunderschöne Seiten zu erstellen. Dieses Kapitel beginnt mit der Entwicklung eines einfachen zweispaltigen Layouts. Ganz nebenbei werden wir erfahren, wie man absolute und relative Positionierung benutzt, und lernen, wie Außenabstände, Innenabstände und Randlinien zusammenwirken. Beim Entwickeln dieses zweispaltigen Layouts, in dem viele der bereits in diesem Buch behandelten Techniken angewendet werden, lernen wir, wie alle diese Werkzeuge miteinander benutzt werden können. Wenn auch das Layout, das wir in diesem Kapitel erstellen, relativ einfach ist, so ist es dennoch eine Struktur, die von vielen Webseiten benutzt wird, und könnte leicht als Ausgangspunkt einer Produktivseite dienen. 8.1 Das Layout Viele Webseiten-Designs beginnen ihr Dasein als Entwurfsskizze in einem Grafikprogramm. Unsere erste Beipielseite macht da keine Ausnahme: Wir gehen von einem Beispiel-Layout oder»design- Entwurf«aus, der mit Fireworks erzeugt wurde.»design-entwurf«

3 162 Abb. 8 1 Das Layout als Grafikdatei entwerfen Wenn man, wie hier, mit einer visuellen Darstellung anfängt, kann man sich schon Gedanken über den Aufbau der Seite machen, noch bevor man mit der Umsetzung in CSS oder XHTML beginnt. So haben wir die Möglichkeit, uns vorab für die beste Vorgehensweise zu entscheiden, bevor wir eine einzige Zeile Code geschrieben haben. Dieses Layout teilt die Seite in drei Hauptbereiche: eine Kopfleiste, die das Logo der Seite und einen Teil der Hauptnavigation enthält; den Hauptbereich, bestehend aus einem großen Bild oberhalb einer Liste von Nachrichten; eine Seitenleiste, die einige zusätzliche Einträge enthält.

4 8.2 Das Dokument erzeugen 163 Abb. 8 2 Die Hauptbereiche des Layouts markieren Man könnte dieses Layout als zweispaltiges Layout mit Kopfleiste bezeichnen. Wenn man einen Entwurf als Kombination seiner Hauptbereiche darstellt, fällt die Entscheidung, wie man an die Umsetzung herangeht, leichter. 8.2 Das Dokument erzeugen Nachdem wir entschieden haben, welches die Hauptkomponenten unserer Seite sein werden, können wir mit der Arbeit beginnen. Als Erstes erzeugen wir ein XHTML-Dokument, das alle Textelemente, die wir in unserer Layout-Grafik sehen, als korrekt ausgezeichnete XHTML-Elemente enthält. Zunächst mag Ihnen diese Arbeitweise ein bisschen seltsam vorkommen, besonders, wenn Sie daran gewöhnt waren, in visuellen Umgebungen zu arbeiten, wie etwa Dreamweaver, und sich lediglich darauf konzentriert hatten, wie das Design aussieht. Einer der Vorteile beim Entwickeln von Layouts mit CSS ist jedoch, dass man die

5 164 XHTML.strict Beispiel 8 1 index.html Struktur der Seite und ihre Darstellung voneinander trennen kann. Dadurch können wir uns auf die Erstellung eines guten und soliden Dokuments als Grundlage unserer Seite konzentrieren, bevor wir sie mit CSS gestalten. Wir beginnen mit den Grundvoraussetzungen eines Dokuments, das die Vorgaben von XHTML.strict erfüllt. Da wir für alle gestalterischen Elemente dieser Seite CSS benutzen werden, gibt es nichts, was gegen die Verwendung einer Strict-DOCTYPE-Deklaration spricht. Mit den Transitionalen DOCTYPEs (sowohl für XHTML als auch HTML 4.01) können Attribute und Elemente verwendet werden, die in den W3C-Empfehlungen als veraltet bezeichnet sind. Diese veralteten Elemente und Attribute werden hauptsächlich zur Präsentation benutzt, und da wir CSS und nicht XHTML für das Aussehen der Seite benutzen, brauchen wir sie ohnehin nicht. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>footbag Freaks</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> </body> </html> Den Zeichensatz deklarieren In unseren Seiten haben wir das Element meta mit dem Attribut httpequiv="content-type" benutzt, um den Zeichensatz unseres Dokuments zu deklarieren. Damit kann der Browser (und der W3C-Validator) einfach feststellen, welcher Zeichensatz in dem Dokument verwendet wird. Falls diese Information fehlt, könnte der Browser die Zeichen in der Seite falsch interpretieren und somit Seiten als unverständlichen Müll anzeigen. Alle Beispiele in diesem Buch benutzen den ISO Zeichensatz, der in den meisten gebräuchlichen Texteditoren und Programmen, wie etwa Dreamweaver, voreingestellt ist. Wenn Sie es mit einem anderen Zeichensatz zu tun haben, beispielsweise Unicode, müssen Sie die meta-elemente entsprechend ändern Die Kopfleiste <div id="irgendwas"> Fangen wir an, die Inhalte der Seite in unser Dokument einzufügen. Bei dieser Aufgabe werden wir das Dokument in die weiter oben identifi-

6 8.2 Das Dokument erzeugen 165 zierten Bereiche einteilen, indem wir jeden Bereich der Seite in <div>und </div>-tags einschließen. Für jeden <div> geben wir das Attribut id an und benennen so die entsprechenden Abschnitte. Damit sprechen wir jeden Bereich einzeln an und gestalten ihn mit CSS. Nach dem <body>-element fügen wir folgenden HTML-Code ein: <div id="header"> <p>the Home of the Hack</p> <ul> <li><a href="">contact Us</a></li> <li><a href="">about Us</a></li> <li><a href="">privacy Policy</a></li> <li><a href="">sitemap</a></li> </ul> </div> <!-- header --> Beispiel 8 2 Ausschnitt aus index.html Wir machen uns zum jetzigen Zeitpunkt noch keine Gedanken über Bildelemente, weil es zahllose Möglichkeiten gibt, Bilder mit CSS in Seiten einzufügen. Welche davon am besten geeignet ist, entscheiden wir für jedes Bild, wenn wir unseren CSS-Code schreiben. Deshalb enthält die Kopfleiste nur die Überschrift»The Home of the Hack«und eine Liste mit den Links für die Hauptnavigation Der Hauptbereich Als Nächstes kommt der Hauptbereich, der in ein <div>-element mit dem id-attribut content eingeschlossen ist. <div id="content"> <h2>simon Says</h2> <p>simon Mackie tells us how a change of shoes has given him new moves and a new outlook as the new season approaches.</p> <p><a href="">read More</a></p> <h2>recent Features</h2> <ul> <li> <h3>head for the Hills: Is Altitude Training the Answer?</h3> <p>lachlan 'Super Toe' Donald</p> <p>vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p> <p><a href="">full Story</a></p> </li> <li> <h3>hack up the Place: Freestylin' Super Tips</h3> <p>jules 'Pony King' Szemere</p> <p>vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit Beispiel 8 3 Ausschnitt aus index.html

7 166 iaculis arcu.</p> <p><a href="">full Story</a></p> </li> <li> <h3>the Complete Black Hat Hacker's Survival Guide</h3> <p>mark 'Steel Tip' Harbottle</p> <p>vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p> <p><a href="">full Story</a></p> </li> <li> <h3>five Tricks You Didn't Even Know You Knew</h3> <p>simon 'Mack Daddy' Mackie</p> <p>vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p> <p><a href="">full Story</a></p> </li> </ul> </div> <!-- content --> Dieser Bereich soll das große Bild mit dem eingeblendeten Text enthalten, der einen längeren Beitrag hervorhebt. Darunter sollen vier neue Einträge angezeigt werden Die Seitenleiste Zum Schluss fügen wir noch die Seitenleiste hinzu, die ein Suchformular und einige wichtige Termine enthält: Beispiel 8 4 Ausschnitt aus index.html <div id="sidebar"> <h3>site Search</h3> <form method="post" action="" id="searchform"> <div> <label for="keywords">keywords</label>: <input type="text" name="keywords" id="keywords" /> </div> <div> <input type="submit" name="btnsearch" id="btnsearch" /> </div> </form> <h3>coming Events</h3> <ul> <li>10 Apr 06 -<br /> <a href="">seattle Zone Qualifier</a></li> <li>13 Apr 06 -<br /><a href="">world Cup - Round 8</a></li> <li>21 Apr 06 -<br /><a href="">footbagoom 05 - NY</a></li> <li>28 Apr 06 -<br /><a href="">wfpa AGM - Hong Kong</a></li>

8 8.2 Das Dokument erzeugen 167 <li>3 May 06 -<br /><a href="">world Cup - Round 9</a></li> </ul> <h3>move of the Month</h3> <h4>the Outer Stall</h4> <p>eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam. Sed cursus vestibulum leo.</p> <p><a href="">more</a></p> </div> <!-- sidebar --> Damit sind die Auszeichnungen für unsere Seite komplett. Speichern Sie Ihre Seite und betrachten Sie sie im Browser. Die Inhalte der Seite werden mit den Standardeinstellungen Ihres Browsers für die verwendeten Elemente angezeigt, wie Sie in der Abbildung 8 3 sehen. Es sieht zwar nicht hübsch aus, aber es ist leicht lesbar! Bevor wir CSS-Code in die Seite einfügen, um damit das Design der Beispielgrafik nachzubilden, bleibt uns noch als letzte Aufgabe, die Seite zu validieren. Wenn wir die Datei zum jetzigen Zeitpunkt prüfen, sind wir sicher, dass wir CSS in ein gültiges Dokument einfügen: Wir werden keine Probleme bekommen, die durch fehlerhafte Auszeichnungen verursacht werden. Seite validieren

9 168 Abb. 8 3 So sieht die Seite aus, wenn sie nur Text enthält

10 8.3 Die Elemente der Seite positionieren Die Elemente der Seite positionieren Nun können wir mit unserer CSS-Formatdatei beginnen. Aber vorher sollten wir uns noch einen Moment Zeit nehmen, um einige grundlegende Konzepte kennenzulernen, die beim Entwickeln von Layouts wie diesem hier (und vieler anderer) zum Tragen kommen: die display- Eigenschaft, das Konzept der Positionierung und die Box-Model- Technologie Die display-eigenschaft Bevor wir uns der Positionierung von Elementen mit CSS zuwenden, werfen wir noch einen Blick auf die Eigenschaft display, die erhebliche Auswirkungen auf das Seitenlayout haben kann. Die display-eigenschaft entscheidet darüber, wie der Browser ein Element darstellen soll ob als Block, Listenelement, Textzeile oder in einer anderen Form. Die CSS2-Spezifikation sieht 17 verschiedene Werte vor. Von den Browsern werden derzeit aber nur sechs unterstützt, von denen vier wirklich wichtig sind. Eine vollständige Referenz zur display-eigenschaft finden Sie im Anhang C. Die display-eigenschaft Die sechs möglichen Werte der display-eigenschaft sind: block inline list-item none table-footer-group table-header-group Die Voreinstellung für die display-eigenschaft richtet sich nach dem Elementtyp, dem sie zugewiesen wird. Blockelemente wie p, h1 und div nehmen automatisch den Wert block an, während Inline-Elemente wie strong, code und span den Wert inline annehmen, wenn ihnen nicht ausdrücklich ein anderer Wert zugewiesen wird. Für Listenpunkte steht extra der Wert list-item zur Verfügung, ebenso wie für Tabellenkopf- und Tabellenfußzeilen die Werte table-footer-group und table-header-group. Die display-werte für ein Element zu verändern führt manchmal zu interessanten und nützlichen Ergebnissen. Später werden wir noch sehen, wie man mit display: inline eine Liste horizontal anzeigen kann. Schon hilfreicher kann der Einsatz des Werts none sein. Er führt dazu, dass ein Element vom Browser nicht beachtet wird. Es wird weder angezeigt noch wird ihm wie mit der Eigenschaftsdefinition

11 170 visibility: hidden ein Platzhalter im Layout eingeräumt. Dies unterscheidet die Eigenschaft display: none von der Eigenschaft visibility: hidden, die den Raum für das verborgene Element reserviert Absolute und relative Positionierung im Kontext Die position- Eigenschaft Positionierungskontext Der position-eigenschaft kann nur ein einziger, konstanter Wert zugewiesen werden. Dieser bestimmt, welchen Platz ein Bereich auf der Seite einnimmt. Die am häufigsten benutzten Werte der position- Eigenschaft sind absolute und relative. In der Grundeinstellung ist der Wert static definiert. Ein vierter möglicher Wert ist fixed. Dieser wird jedoch vom Internet Explorer nicht unterstützt. Einem Element mit CSS einen genauen Platz auf der Seite zuzuweisen, ist nicht ganz unkompliziert, weil sich die referenzierten Punkte, mit denen die Lage eines Elements innerhalb der Seite bestimmt wird, auf den Kontext des übergeordneten Elements beziehen und sich damit verändern können. Es gibt dafür kein für alle Elemente gültiges, unveränderliches Koordinatensystem, auch dann nicht, wenn die position-eigenschaft den Wert absolute hat. Jedesmal, wenn ein Block irgendwo auf der Seite mit einem anderen Wert als static positioniert wird, wird für die darin enthaltenen Elemente ein neuer Positionierungskontext erzeugt. Die linke obere Ecke des umgebenden Blocks hat dann die Koordinaten (0,0). Wenn Sie also ein Element mit CSS innerhalb dieses Blocks positionieren, wird seine Position relativ zu diesem neuen Koordinatensystem, dem»positionierungskontext«, berechnet. Dieses Konzept kann am besten mit ein paar einfachen zusammenhängenden Beispielen veranschaulicht werden. Beginnen wir mit einer leeren Seite. In diesem Kontext sind die Ursprungskoordinaten (0,0) in der linken oberen Ecke des sichtbaren Bereichs im Browser. Von dort aus positionieren wir einen div-bereich auf der Seite, der einen einfachen Text enthält. Das Ergebnis zeigt die Abbildung 8 4. Abb. 8 4 Das erste Element auf einer leeren Seite positionieren

12 8.3 Die Elemente der Seite positionieren 171 Hier kommt das HTML-Fragment, welches zu dem oben gezeigten Ergebnis führt. Mit den CSS-Eigenschaften top und left wird dem div- Bereich eine Position auf der Seite zugewiesen. <div style="position: absolute; left: 125px; top: 75px;" class="big"> Das hier ist die erste positionierte Zeile. </div> Beispiel 8 5 Ausschnitt aus beispiel_8-4.html Nun positionieren wir einen weiteren div-bereich, der dem ersten untergeordnet wird: <div style="position: absolute; left:125px; top: 75px;" class="big"> Das hier ist die erste positionierte Zeile. <div style="position: absolute; left: 25px; top: 30px;" class="big"> Das ist die zweite Zeile. </div> </div> Beispiel 8 6 Ausschnitt aus beispiel_8-5.html Abb. 8 5 Positionierung eines untergeordneten Elements Wie wir in Abbildung 8 5 sehen, ist die zweite Textzeile, ausgehend von der ersten Textzeile, um 25 Pixel nach rechts gerückt. Für den zweiten div-bereich zählt also nicht mehr der linke Rand der Seite als Ausgangspunkt, sondern der linke Rand des übergeordneten div- Bereichs. Dieser ist das Elternelement der zweiten Zeile und definiert den Positionierungskontext für das untergeordnete Element. Beide Bereiche sind absolut positioniert, für die erste Zeile ist jedoch die linke obere Ecke des Bildschirmfensters der Ursprung und für die zweite Zeile die linke obere Ecke des Elternelements. Es ist Ihnen bestimmt aufgefallen, dass der Schriftgrad der zweiten Zeile ziemlich groß ist. Warum das so ist? Schauen Sie sich die Stilregel der Klasse big an und Sie werden verstehen, warum:

13 172 Beispiel 8 7 Ausschnitt aus beispiel_8-5.html.big { font-family: Helvetica, Arial, sans-serif; font-size: 2em; font-weight: bold; Da der zweite div ein Kindelement des ersten ist, wird auch seine Schriftgröße relativ zu der Schriftgröße des Elternelements berechnet. Die Stilregel legt die Schriftgröße mit 2em fest, was für den Browser heißt, dass er die Schrift doppelt so groß anzeigen soll, als er sie normalerweise anzeigen würde. Wenn die 2em-Regel auf die erste Zeile angewendet wird, erscheint sie somit in doppelter Größe. Wird sie aber auf die zweite Zeile angewendet, wird die Schriftgröße der ersten Zeile verdoppelt und der zweiten Zeile zugewiesen. Mit einer absoluten Konstante für die Schriftgröße kann dieses Verhalten korrigiert werden: Beispiel 8 8 Ausschnitt aus beispiel_8-5a.html.big { font-family: Helvetica, Arial, sans-serif; font-size: large; font-weight: bold; Damit sollten die beiden div-bereiche dieselbe Schriftgröße benutzen. Unsere Seite besteht bisher aus zwei ineinander verschachtelten div-elementen. Beide sind mit absoluten Werten auf der Seite positioniert. Nun fügen wir noch ein drittes Element hinzu, in diesem Fall ein span, das innerhalb des zweiten div-bereichs untergebracht und darin mit einem relativen Wert positioniert wird. Der HTML-Code sieht folgendermaßen aus: Beispiel 8 9 Ausschnitt aus beispiel_8-6.html Absolute und relative Positionierung <div style="position: absolute; left: 125px; top: 75px;" class="big"> Das ist die erste Zeile, die positioniert wird. <div style="position: absolute; left: 25px; top: 30px;"> Dies ist <span style="position: relative; left: 10px; top: 30px;">ein Beispiel für</span> eine zweite Zeile. </div> </div> Das Ergebnis dieses HTML-Fragments sehen Sie weiter unten. Es fällt auf, dass die zuletzt im <span>-tag eingefügten Wörter»ein Beispiel für«unterhalb der zweiten Zeile und ein wenig nach rechts verschoben von ihrer originalen Position dargestellt werden. Eine Positionierung mit dem Wert relative nimmt als Ausgangspunkt immer die Koordinate, an der das Element ohne Positionierung stehen würde. Mit anderen Worten: Der Positionierungskontext eines relativ positio-

14 8.3 Die Elemente der Seite positionieren 173 nierten Elements wird von seiner normalen Position bestimmt. In unserem Beispiel wird das span-element so dargestellt wie in Abbildung 8 6 unterhalb und etwas nach rechts verschoben von der Position, an der es ohne Positionierung angezeigt würde. Diesen Fall zeigt Abbildung 8 7. Abb. 8 6 Beispiel mit relativer Positionierung des <span>-tags Abb. 8 7 Beispiel ohne Positionierung des <span>-tags Die wichtigsten Regeln für die Positionierung von Elementen mit der position-eigenschaft lassen sich so zusammenfassen: Die absolute Positionierung eines Elements wird immer am übergeordneten Element ausgerichtet. Die relative Positionierung eines Elements wird immer an der Stelle ausgerichtet, an der es sich ohne Positionierung befinden würde. Machen Sie sich keine Sorgen, wenn Ihnen diese Konzepte noch ein wenig verwirrend vorkommen. Wenn wir unser Layout erstellen, werden wir lernen, wie sich das alles zusammenfügt Das CSS-Box-Modell Aus der Sicht eines Stylesheets ist jedes HTML-Element, mit dem Sie in einer Seite zu tun haben, in einem eigenen rechteckigen Kasten, einer

15 174 so genannten Box, enthalten. Diese Tatsache wird weitaus deutlicher, wenn Sie große Inhaltsbereiche formatieren, wie etwa die drei Seitenbereiche, die wir in unserem Entwurf identifiziert haben. Aber es trifft genauso für individuelle Komponenten zu, mit denen Sie innerhalb dieser Bereiche zu tun haben. Das können Überschriften, Listen, Listenelemente und sogar Teile eines Textes sein. Die Abbildung 8 8 zeigt das grundlegende Box-Modell. Abb. 8 8 Das grundlegende Box- Modell in CSS CSS-Box Im Zentrum einer CSS-Box befindet sich der eigentliche Inhalt. Verstehen Sie»Inhalt«nicht als Wörter oder Bilder, die beispielsweise einen Nachrichtenblock ausmachen oder eine Linkliste. Als»Inhalt«wird alles angesehen, was in einer Box enthalten ist. Abbildung 8 8 macht deutlich, dass die sichtbare Breite einer Box aus der Inhaltsbreite, dem Innenrand und dem Rahmen besteht. Der Außenrand legt den Abstand der sichtbaren Box zu benachbarten Elementen fest und bleibt selbst unsichtbar. Die sichtbare Höhe einer Box setzt sich aus der Inhaltshöhe, dem Innenrand und dem Rahmen zusammen. Der Außenrand bestimmt auch hier, wo die Box für das nächste Element anschließen darf. Die Größen der drei Box-Bestandteile, Außenrand, Rahmen und Innenrand, können jeweils für links, rechts, oben und unten einzeln oder in einer zusammenfassenden Eigenschaft definiert werden. Die Definition der Rahmeneigenschaften ist ein klein wenig komplizierter, da dieser noch andere Charakteristiken haben kann, wie die Linienart oder eine Farbe.

16 8.3 Die Elemente der Seite positionieren 175 Zuerst werden wir uns anschauen, wie man Innenränder sinnvoll für ein Layout einsetzt. Dann besprechen wir den Außenrand, der sich ähnlich verhält wie der Innenrand. Als Letztes werden wir uns den Eigenschaften und Spielarten des Rahmens zuwenden. Für die nächsten Abschnitte werden wir ein Layout mit nur einer Box verwenden und daran die CSS-Regeln demonstrieren. Wir starten mit Abbildung 8 9, einer Box ohne jegliche Eigenschaftsdefinition: kein Innenrand, kein Außenrand und kein Rahmen. Die Box besitzt die gleiche Breite und Höhe wie der Inhalt in ihr. Abb. 8 9 Box ohne Eigenschaftsdefinitionen Das h1-element wird in unserem Beispiel mit der Eigenschaft background-color grau hinterlegt, damit wir das Innere vom Äußeren der Box auf unserer Abbildung unterscheiden können. Mit dem folgenden HTML-Code wird diese Seite erzeugt: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>box ohne Eigenschaftsdefinitionen</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> body { background-color: #ffffff; h1 { font-family: helvetica, arial, sans-serif; </style> </head> <body> <h1>hilfe! Ich stecke in einem Box-Modell fest!</h1> </body> </html> Beispiel 8 10 beispiel_8-9.html

17 176 Gemäß unserer Devise»CSS statt HTML«werden wir alle Veränderungen im weiteren Verlauf nicht im HTML-Code, sondern nur im Stylesheet vornehmen. Die jeweils veränderten oder hinzugefügten Fragmente werden in Fettschrift dargestellt. Pixel versus Prozentwerte Das Box-Modell Das Box-Modell ist ein reines Layoutwerkzeug, mit dem Elemente auf den Punkt genau positioniert werden können. Für konstante Abstände und Ränder verwendet man bevorzugt Pixel (abgekürzt px) als Einheit. Soll das Layout der Seite jedoch dehnbar sein und sich dynamisch an die jeweilige Größe des Browserfensters anpassen, muss man die Definitionen mit Prozentangaben (mithilfe von %-Werten) vornehmen. Solche Layouts sind durch ihre»dehnbarkeit«charakterisiert, die Elemente der Seite werden auseinander gezogen und zusammengeschoben, je nachdem, wie breit der Benutzer das Browserfenster einstellt. Die Eigenschaften des Innenrands In einer CSS-Regel gibt es vier spezifische Eigenschaften, die zur Bestimmung des Innenrands definiert werden können: padding-left, padding-right, padding-top und padding-bottom. Wir definieren in unserer bisher unbearbeiteten Box eine der Innenrand-Eigenschaften, um zu sehen, was passiert. Ändern Sie das Stylesheet der Beispieldatei wie folgt (wie gesagt, werden Änderungen fett dargestellt): Beispiel 8 11 Ausschnitt aus beispiel_8-10.html h1 { padding-left: 25px; Das Ergebnis dieser Änderung zeigt die Abbildung Der Abstand zwischen dem Text und der sichtbaren Grenze der Box ist auf der linken Seite auf 25 Pixel angewachsen.

18 8.3 Die Elemente der Seite positionieren 177 Abb Box-Modell mit padding-left Die anderen Eigenschaften des Innenrands können genauso definiert werden, im folgenden Beispiel mit einem unterschiedlichen Wert für jede Seite der Box: h1 { padding-left: 25px; padding-top: 15px; padding-bottom: 30px; padding-right: 20px; Beispiel 8-12 Ausschnitt aus beispiel_8-11.html Abb Box mit unterschiedlich definierten Innenrändern Abbildung 8 11 zeigt, was die unterschiedlich definierten Eigenschaften des Innenrands im Browserfenster bewirken. Wie Sie sehen, hat der Innenrand auf der rechten Seite seinen Wert anscheinend nicht angenommen. Obwohl wir padding-right mit 20 Pixel angegeben haben, zieht sich die Box weiter bis an den rechten Rand des Browserfensters. Das kommt daher, dass padding-right den Abstand zwischen dem rechten Ende des Textes und dem Ende der Überschrift, die grau unterlegt ist, einfügt. Dieser Abstand ist hier schlecht zu sehen, weil die Überschrift ein Blockelement ist und sich damit automatisch über die ganze Seitenbreite erstreckt. Dabei wird auf der rechten Seite genug

19 178 Raum für den Text gelassen. Wenn Sie das Browserfenster schmaler als die Box des h1-elements machen, können Sie den Innenrand sehen. Abb Beispiel für die Wirkung von padding-right Abbildung 8 12 zeigt es genauer: Auf dem ersten Screenshot wurde das Browserfenster so weit verkleinert, dass das Wort»fest«eigentlich noch in die zweite Zeile passen würde. Durch unser padding-right mit 20 Pixel wird es jedoch in die dritte Zeile geschoben. In dem zweiten Screenshot wird der Innenrand noch deutlicher erkennbar. Die Fenstergröße ist so eingestellt, dass in jede Zeile nur jeweils ein Wort passt. Der Rand zum Browserfenster ist zwar groß genug, dass noch das eine oder andere Wort darin Platz hätte. Der von uns definierte Innenrand aber schränkt den Platz für den Inhalt ein. Nimmt man den Innenrand aus dem Stylesheet wieder heraus, kommt bei gleicher Fenstergröße das Ergebnis im dritten Screenshot zustande. Um die Definition des Innenrands auf allen vier Seiten einfacher zu gestalten, gibt es dafür eine zusammenfassende Eigenschaft mit der Bezeichnung padding. Für sie kann eine Liste von bis zu vier Werten festgelegt werden, die je durch ein Leerzeichen getrennt werden. Tabelle 8 1 zeigt, zu welchen Ergebnissen die vier möglichen Wertkombinationen in padding führen. Tab. 8 1 Die Anzahl der Werte für die Kurzform von padding Anzahl der Werte Auswirkung auf den Innenrand 1 Der Wert ist gültig für alle vier Seiten des Innenrands. 2 Der erste Wert ist gültig für oben und unten, der zweite Wert für links und rechts. 3 Der erste Wert ist gültig für oben, der zweite für rechts und links und der dritte für unten. 4 Der erste Wert ist gültig für oben, der zweite für rechts, der dritte für unten und der vierte für links.

20 8.3 Die Elemente der Seite positionieren 179 Wie man sich Reihenfolge merken kann Um sich die Reihenfolge, in der diese Werte angegeben werden müssen, besser merken zu können, denken Sie einfach daran, dass sie im Uhrzeigersinn vergeben werden. Sie können sich auch als Eselsbrücke das Wort»trouble«(top, right, bottom, left) merken. Mit der zusammenfassenden padding-eigenschaft kann die obige Stilregel wesentlich kürzer formuliert werden: h1 { padding: 15px 20px 30px 25px; Um oben und unten sowie links und rechts jeweils einen gleich großen Innenrand zu erhalten, definiert man padding mit nur zwei Werten: h1 { padding: 15px 25px; Um einen gleichen Innenrand für alle Seiten zu erhalten, weist man der zusammenfassenden Eigenschaft padding nur einen Wert zu: h1 { padding: 25px; Was passiert, wenn wir für die Definition des Innenrands relative Werte wie die M-Höhe oder eine Prozentangabe verwenden? Beide führen an dieser Stelle zu unterschiedlichen Ergebnissen. Die M-Höhe skaliert den Innenrand im Verhältnis zur Schriftgröße des Inhalts in der Box. Eine Prozentangabe wiederum stellt den Abstand im Verhältnis zur gesamten Breite des Inhalts in der Box dar. Um uns das zu veranschaulichen, erstellen wir eine neue HTML-Seite mit zwei hellgrau hinterlegten Überschriften auf einem dunkleren Seitenhintergrund: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>box ohne Eigenschaftsdefinitionen</title> <meta http-equiv="content-type" Beispiel 8 13 beispiel_8-13.html

21 180 content="text/html; charset=iso " /> <style type="text/css"> body { background-color: #808080; h1, h4 { </style> </head> <body> <h1>hilfe! Ich stecke in einem Box-Modell fest!</h1> <h4>aber für eine gute, alte h-4-überschrift wie mich, ist es hier nicht zu eng. Im Gegenteil, es ist sogar recht geräumig.</h4> </body> </html> Wir haben in dem Code eine dunkelgraue Hintergrundfarbe für die Seite definiert und ein h4-element hinzugefügt, für das dieselbe Stilregel gültig ist wie für das h1-element. Abbildung 8 13 zeigt die HTML-Seite, wie sie im Browser angezeigt wird. Abb Ausgangsbeispiel ohne proportionalen Innenrand Jetzt definieren wir im Stylesheet für beide Überschriften einen Innenrand mit einem relativen Wert von 1em: Beispiel 8 14 Ausschnitt aus beispiel_8-14.html body { background-color: #808080; h1, h4 { padding: 1em;

22 8.3 Die Elemente der Seite positionieren 181 Wie Abbildung 8 14 zeigt, wird die Größe des Innenrands proportional zur jeweiligen Größe der Überschriften berechnet. Abb Relative Innenränder mit em em, eine Maßangabe für die Höhe 1em bezeichnet die einfache Höhe der Versalie M in der Schrift, die in den Überschriften verwendet wird. Da eine h1-überschrift standardgemäß auf einen größeren Schrifttyp zurückgreift als eine h4-überschrift, wird auch ihr Innenrand größer dargestellt, obwohl für beide Überschriften dieselbe Stilregel gültig ist. Was passiert, wenn wir für den proportionalen Wert des Innenrands anstelle der M-Höhe eine Prozentangabe verwenden, veranschaulicht folgendes Beispiel: body { background-color: #808080; h1, h4 { padding: 10%; Beispiel 8 15 Ausschnitt aus beispiel_8-15.html

23 182 Abb Proportionaler Innenrand unter Einsatz von Prozentangaben Wie Abbildung 8 15 zeigt, erzeugt die Prozentangabe deutlich größere Innenränder. Unsere Stilregel weist den Browser an, die Innenränder beider Überschriften mit einem Wert von 10 % darzustellen. Eigentlich bezieht sich dieser Prozentwert nur auf die Inhaltsbreite des Elements. Da Überschriften jedoch Blockelemente sind, ist deren Inhaltsbreite genau gleich der Fensterbreite. Wir haben in der Stilregel die Überschriften mit einer Farbe hinterlegt, um die eigentlich unsichtbaren Innenränder der Boxen sichtbar zu machen. Dieser Trick ist beim Design sehr hilfreich, da somit das Raster des Box-Modells sichtbar wird. Abbildung 8 16 stellt dieselbe Seite wie Abbildung 8 15 dar, nur ohne die Hintergrundfarben für die Überschriften. Sie behalten ihre relativen Abstände bei und harmonieren in der Gestaltung gut miteinander.

24 8.3 Die Elemente der Seite positionieren 183 Abb Beispiel für padding ohne Hintergrundfarben Die Eigenschaften des Außenrands Der Unterschied der beiden Ränder eines Elements besteht lediglich darin, dass mit dem Außenrand immer eine Fläche außerhalb der Box definiert wird, während der Innenrand eine Fläche innerhalb der Box darstellt. Die Eigenschaften des Außenrands werden genauso festgelegt wie die für den Innenrand. In der Bezeichnung der Einzeleigenschaften und in der zusammenfassenden Eigenschaft wird einfach padding durch margin ersetzt. Die folgenden Stilregeln und die Abbildung 8 17 machen den Unterschied etwas deutlicher. body { background-color: #808080; h1 { h2 { margin-left: 5%; p { Beispiel 8 16 Ausschnitt aus beispiel_8-17.html

25 184 margin-left: 20%; Abb Der linke Außenrand mit margin-left rückt den Inhalt nach rechts Beispiel 8 17 Ausschnitt aus beispiel_8-18.html In unserer Stilregel haben wir für die Überschrift zweiter Ordnung und für den Textabsatz die Eigenschaft margin-left definiert. Beide Elemente werden im Browserfenster nach rechts gerückt. Wie wir an den ebenfalls eingerückten farbigen Hintergrundflächen erkennen, wird im Gegensatz zu unseren Beispielen mit padding-left nicht nur der Inhalt, sondern der gesamte Innenraum der Boxen verschoben. Der Innenrand bleibt also gleich, nur der Außenrand vergrößert sich. Um die Auswirkungen der beiden Ränder noch deutlicher gegenüberzustellen, weisen wir einem der HTML-Elemente einen Innenrand und dem anderen einen Außenrand zu: body { background-color: #808080; h1 { h2 { margin-left: 5%; padding-left: 1em;

26 8.3 Die Elemente der Seite positionieren 185 p { background: #c0c0c0; margin-left: 20%; padding-left: 10%; Wie Abbildung 8 18 zeigt, schiebt der Außenrand den Text und den Innenrand der Box nach rechts, während der Innenrand nur den Text nach rechts rückt. Abb margin-left in Kombination mit padding-left Wenn Sie die obige HTML-Datei (aus dem Codearchiv dieses Buches) in den Browser laden und die Größe des Browserfensters verändern, stellen sie fest, dass sich die Einzüge des Textes und seiner Überschrift entsprechend der Breite des Browserfensters verändern. Das kommt daher, dass wir für die Außenränder die relative Breite von 20% und für die Innenränder von 10% angegeben haben. Diese beiden Werte werden proportional zur Breite des umgebenden Blocks berechnet, der in diesem Beispiel das Browserfenster ist. Je breiter dieses ist, desto breiter sind die Außen- und Innenränder des Textes. Der Innenrand der Überschrift ändert sich nicht, da er in em angegeben ist.

27 Die Ränder in Listen Normalerweise werden Listen in grafischen Browsern mit einem 50 Pixel breiten Rand auf der linken Seite angezeigt. Damit steht Platz für Aufzählungszeichen zur Verfügung (beispielsweise Punkte in einer unsortierten Liste oder Ziffern in einer nummerierten Liste). Unglücklicherweise gibt die CSS-Spezifikation keine Auskunft darüber, wie der Browser diesen Rand anzeigen soll: ob als linker Außenrand oder als linker Innenrand. Die Beschreibung der Eigenschaft marker-offset legt jedoch nahe, dass die Einrückung mit der margin-eigenschaft gesetzt wurde. Egal, was in der Spezifikation beabsichtigt wurde, fügen Firefox und Safari links von Listen vorgabemäßig einen linken Innenrand zu, während andere Browser (einschließlich Internet Explorer und Opera) einen linken Außenrand zufügen. Das können Sie einfach nachprüfen, indem Sie ein ul- oder ol-element mit einer Hintergrundfarbe unterlegen. In den meisten Browsern wird der Hintergrund die Aufzählungszeichen nicht unterlegen, außer im Firefox und Safari. Aus diesem Grund müssen Sie immer beide Eigenschaften definieren, wenn Sie die Vorgabewerte der Ränder für Listen ändern möchten. Wenn Sie beispielsweise nur einen Außenrand setzen, zeigt der Firefox die normale Einrückung an, während die anderen Browser diese Einstellung überschreiben. Wenn Sie nur einen Innenrand angeben, zeigt der Internet Explorer die normal Einrückung von 50 Pixeln an. Nur wenn Sie sowohl einen Außenrand als auch einen Innenrand definieren (üblicherweise wird padding: 0 gesetzt und nur die margin-eigenschaft bekommt einen Wert) wird der linke Abstand einer Liste in allen Browsern gleich angezeigt. Vertikale Außenränder werden mit der Eigenschaft margin-top und margin-bottom gesetzt. Die folgende HTML-Seite verdeutlicht vertikale Außenränder: Beispiel 8 18 beispiel_8-19.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>box Model Demo</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> body { background-color: #808080;

28 8.3 Die Elemente der Seite positionieren 187 h1 { margin-bottom: 3cm; h2 { margin-left: 5%; margin-top: 3cm; margin-bottom: 3cm; padding-left: 1em; p { background: #c0c0c0; margin-left: 20%; padding-left: 10%; margin-top: 3cm; margin-bottom: 3cm; </style> </head> <body> <h1>kein oberer Außenrand, aber ein unterer Außenrand von 3cm</h1> <h2>ich besitze oben und unten einen Außenrand von jeweils 3cm und einen linken Innenrand von 1 em.</h2> <p>ein Absatz mit einem Außenrand oben und unten von jeweils 3cm</p> </body></html> Wie diese Seite dargestellt wird, zeigt die Abbildung 8 19.

29 188 Abb Vertikale Randeinstellungen summieren sich nicht auf Im Gegensatz zu horizontalen Rändern summieren sich vertikale Ränder nicht auf. Stehen zwei Elemente direkt übereinander wie h1 und h2 in Abbildung 8 19, richtet sich der Abstand zwischen ihnen nach dem größeren Wert der margin-bottom-eigenschaft des oberen Elements oder der margin-top-eigenschaft des unteren Elements. In unserem Beispiel sind beide mit 3cm definiert, so dass der Abstand zwischen den Elementen 3cm beträgt (und nicht 6cm, wie Sie vielleicht angenommen hatten). Dem wäre nur dann so gewesen, wenn für das h1-element margin-bottom: 6cm gesetzt worden wäre. In unserem Fall ist das body-element der umgebende Block und das ist aus praktischen Gründen der sichtbare Bereich des Browserfensters. Für die Definition eines Außenrands können auch negative Werte eingesetzt werden. Das kann nützlich sein, wenn man zum Beispiel für den body-bereich einer HTML-Seite einen Wert für margin-left festgelegt hat und ein Element auf der Seite diesen Rand nach links

30 8.3 Die Elemente der Seite positionieren 189 überschreiten soll. Der folgende Quelltext führt zur Darstellung in Abbildung <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>negative Werte für den Aussenrand</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> body { background-color: #808080; margin-left: 5cm; h1 { margin-left: -3cm; h2 { </style> </head> <body> <h1>der linke Außenrand des Body-Bereichs beträgt zwar 5cm, aber ich besitze den Wert -3cm.</h1> <h2>da ich keine eigene margin-left-einstellung besitze, nehme ich die 5cm des Body-Bereichs an.</h2> </body> </html> Beispiel 8 19 beispiel_8-20.html

31 190 Abb Negative Werte für den Außenrand Ebenso wie mit padding für den Innenrand gibt es mit margin auch eine zusammenfassende Eigenschaft für die Außenränder. Für die Angabe mehrerer Werte für margin gelten die Regeln aus Tabelle Die Eigenschaften des Rahmens Die Rahmeneigenschaften sind komplexer als die Eigenschaften padding oder margin, da sie sich nicht nur auf die Abstände zwischen den Objekten auswirken, sondern auch auf das Erscheinungsbild dieses Abstands. Normalerweise ist ein Rahmen sichtbar. Seine Eigenschaften werden auf ähnliche Weise gesetzt wie die Eigenschaften der Ränder, es gibt aber ein paar entscheidende Unterschiede. Der Rahmen, der Innen- vom Außenrand voneinander trennt, besitzt die Eigenschaften Stil, Breite und Farbe. In der Grundeinstellung ist der Stil mit dem Wert none, die Breite mit medium 1 und die Farbe mit dem vorgegebenen Farbwert des umrahmten Elements definiert. Für die Eigenschaft border-style, die für die Darstellungsform des Rahmens steht, gibt es eine ganze Reihe an möglichen Einstellungen. 1. Netscape 4 weicht hier von anderen Browsern ab und legt die Grundeinstellung für Rahmen auf 0 fest. Es wird somit kein Rahmen dargestellt, wenn er nicht ausdrücklich definiert wird.

32 8.3 Die Elemente der Seite positionieren 191 Tabelle 8 2 zeigt die entsprechenden Werte und ihre Unterstützung durch die wichtigsten Browser. Definition CSS-Spezifikation Browserunterstützung Beispiel double CSS1 alle CSS-fähigen Browser Tab. 8 2 Darstellungsarten für Rahmen in CSS groove CSS1 alle CSS-fähigen Browser inset CSS1 alle CSS-fähigen Browser none CSS1 alle CSS-fähigen Browser outset CSS1 alle CSS-fähigen Browser ridge CSS1 alle CSS-fähigen Browser solid CSS1 alle CSS-fähigen Browser dashed CSS1 Netscape 7, Mozilla, IE 6/Win, IE 5/Mac dotted CSS1 Netscape 7, Mozilla, IE 6/Win, IE 5/Mac hidden CSS2 Netscape 7, Mozilla, IE 6/Win, IE 5/Mac Der Wert hidden ist gleichbedeutend mit dem Wert none, es sei denn, er wird in HTML-Tabellen eingesetzt. Der Rahmen bleibt damit unsichtbar. Alle Informationen zu den Rahmenwerten finden Sie in Anhang C. Die W3C-Spezifikation legt nicht genau fest, wie die verschiedenen Darstellungsformen im Browser auszusehen haben. Es überrascht daher nicht, dass sich das Ergebnis mit verschiedenen Browserversionen und Betriebssystemen unterscheiden kann. Aber genauso wie für andere Rahmeneigenschaften gilt im Allgemeinen, dass die Browser diese Eigenschaften vorhersehbar, zufriedenstellend und vernünftig darstellen. Die Rahmenbreite kann entweder mit den vier einzelnen Eigenschaften border-top-width, border-right-width, border-bottom-width und border-left-width oder mit der zusammenfassenden Eigenschaft border-width festgelegt werden. Definieren kann man die Rahmenbreite entweder mit relativen oder absoluten Maßeinheiten (wie Pixel, em, Prozentwerten oder Zoll) oder mit den in CSS vorgegebenen

33 192 Werten thin, medium und thick. Diese werden zwar nicht von allen Browsern auf die gleiche Weise interpretiert, ihre Darstellung unterscheidet sich aber nur gering mit einer Abweichung von bis zu einem Pixel. Konkrete Maße für Rahmen Für eine exakte Angabe der Rahmenbreite verwendet man am besten Pixelangaben. Das ist die wichtigste Maßeinheit in pixelgenauen Layouts, in denen die Eigenschaft border-width eine wichtige Rolle spielen kann. Die Farbe eines Rahmens kann mithilfe der zusammenfassenden Eigenschaft border-color oder mit den einzelnen Eigenschaften border-top-color, border-right-color, border-bottom-color und border-left-color zugewiesen werden. Wie wir aus dem Kapitel 5 wissen, kann für die Farbe ein hexadezimaler RGB-Code (#ff9900), ein abgekürzter RGB-Code (#f90), der numerische RGB-Code (rgb (102, 153, 0)) oder ein Standardfarbname (red) eingesetzt werden. Den Kurzformen von border-style, border-width und bordercolor können auch mehrere Werte zugewiesen werden. Es gibt noch eine zusätzliche Kurzform, die wahrscheinlich am häufigsten von allen benutzt wird. Mit der border-eigenschaft können Sie die Rahmenart, die Breite und die Rahmenfarbe für alle vier Seiten eines Objekts auf einmal setzen. Meistens werden Sie Rahmen mit vier gleichen Seiten benötigen und es gibt keinen einfacheren Weg als mit dieser Kurzform. Die folgende Stilregel erzeugt für alle vier Seiten einen gleichmäßigen, 3 Pixel breiten, roten Rahmen um ein beliebiges Element der Klasse warning:.warning { border: 3px solid red; 8.4 Das Layout aufbauen Wir haben nun einiges Hintergrundwissen darüber, wie Elemente sich verhalten, wenn sie mit CSS positioniert werden. Mit unserem ersten Layout können wir das Gelernte jetzt in die Praxis umsetzen. Erzeugen Sie nun ein neues Stylesheet und speichern es unter dem Namen styles.css. Dann verlinken Sie es mit dem zuvor erzeugten Footbag-Freaks-Dokument, das wir bereits erstellt haben. Fügen Sie