CAS Webdesign und Webpublishing

Transkript

1 CAS Webdesign und Webpublishing Kurs 2: Fortgeschrittenes CSS Ausgabe 2014 Dozent Andi Keller 4eyes GmbH Falknerstrasse Basel CHE MWST Seite 1/21

2 INHALTSVERZEICHNIS Inhaltsverzeichnis 1 Einleitung 3 2 Erweitertes CSS Box-Modell margin und padding Unterschied von margin und padding border Die display Eigenschaft inline block display: inline-block Breite und Höhe paddings, Höhen und Breiten und die Browser Elemente nebeneinander platzieren Floating Problematik des Floatings clear - aufheben des floatings Clearing von Menus HTML Strukturieren Strukturierung einer typischen Webseite Die position Eigenschaft static absolute relative fixed eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 2/21

3 1 Einleitung Das vorliegende Dokument enthält die Dokumentation des Kurses Fortgeschrittenes CSS". Dieser Kursteil behandelt. Am Ende des Kurses soll der Teilnehmer/die Teilnehmerin in der Lage sein, komplexere Layouts in HTML und CSS umzusetzen. Dazu wird das CSS-Box-Modell, Floating von Elementen, verschiedene Arten der Positionierung und die Strukturierung von Layouts behandelt. 4eyes GmbH Falknerstrasse Basel CHE MWST Seite 3/21

4 2 Erweitertes CSS Im ersten Kursteil wurden die meisten wichtigen HTML-Elemente behandelt und es wurde gelernt wofür sie eingesetzt werden können. Ein Einstieg in die Möglichkeiten der Darstellung mittels CSS wurde ebenfalls gemacht. In diesem Teil soll CSS deutlich vertieft werden, so dass wir auch komplexere Layouts umsetzen können. Dies soll schrittweise geschehen und beginnt mit dem Kennenlernen des CSS Box-Modells, geht dann auf die Möglichkeiten der Positionierung und Anzeige einzelner Elemente ein und endet schliesslich mit der Strukturierung von Layouts. 4eyes GmbH Falknerstrasse Basel CHE MWST Seite 4/21

5 2.1 Box-Modell 2.1 Box-Modell Jedes HTML-Element können wir uns als rechteckige Box vorstellen. Wenn wir eine Webseite in den Google Chrome oder Firefox Entwicklerwerkzeugen anschauen, sehen wir das sehr gut. Die Grössen dieser Boxen können wir beeinflussen, in erster Linie werden sie aber von der Grösse ihres Inhalts definiert. Ein einzeiliger Titel ist logischerweise weniger hoch als ein Absatz von 100 Wörtern, so sind auch die umschliessenden Boxen dieser beiden Elemente ganz Unterschiedlich gross. Auf diese Boxen können wir aber auch auf verschiedene Weise selber Einfluss nehmen, dies in Form des Innenabstands, des Rahmens und des Aussenabstands zu anderen Elementen. 1. box { 2 padding : 10px 20px 10px 40px ; 3 margin : 15px 7px 25px 15px ; 4 border : 3px s o l i d #000; 5 } In diesem Code-Schnipsel sehen wir die drei neue CSS-Eigenschaften: padding, Innenabstand, margin, Aussenabstand und border, Rahmen. Was wir auf der oberen Grafik sehen ist, dass der Rahmen zwischen den Innen- und Aussenabständen liegt. Folgende Grafik, ein Screenshot aus den Google Chrome Entwicklerwerkzeugen, soll das illustrieren. In diesem Beispiel hat die eigentliche Box eine Grösse, gegeben durch den Inhalt und den Kontext in dem sich das Element befindet, von 960px mal 862px, die anderen Werte kommen dazu. 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 5/21

6 2.1 Box-Modell margin und padding Innen- und Aussenabstände sind einfache Zahlenwerte, wie wir sie beispielsweise von Schriftgrössen kennen (Es können hier und in allen folgenden Bereichen auch Prozentwerte, ems, etc. angegeben werden). Geben wir nur einen einzigen Wert an, gilt der Wert auf allen Seiten der Box. Wir können den Wert aber auch für jede Seite einzeln setzen, dies über das Ergänzen der padding- und margin-eigenschaft um eine Seitenbezeichnung: 1 padding top : 10px ; 2 padding r i g h t : 0; 3 padding bottom : 15px ; 4 padding l e f t : 5px ; Auch eine Kurzschreibweise ist möglich, im Uhrzeigersinn, startend von oben: 1 padding : 10px 0 15px 5px ; / oben, rechts, unten, l i n k s / Diese Zeile hat den gleichen Effekt wie die vier Zeilen zuvor Unterschied von margin und padding Da Innenabstände, wie der Name vermuten lässt, innerhalb eines Elements wirken, beeinflussen sich Innenabstände verschiedener Elemente nicht gegenseitig. Anders bei Aussenabständen. Ein erstes Element mit einem angenommenen unteren Aussenabstand von 50px, wird genau 50px an ein nächstes Element mit einem oberen Aussenabstand von nur 20px herankommen. Die Abstände werden also nicht addiert, was hier zu 70px führen würde, sondern es wird der grössere Wert genommen. Die nächste Grafik zeigt dies (Die seitliche Verschiebung dient lediglich der besseren Sichtbarkeit des Effekts). 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 6/21

7 2.2 Die display Eigenschaft border Die Rahmen-Eigenschaft border verhält sich ähnlich wie margin und padding. Geben wir nur einen Wert an, gilt dieser für alle Seiten, ergänzen wir die border-eigenschaft um eine Seitenangabe, können wir den Rahmen jeder einzelnen Seite separat beeinflussen. 1 border top : 1px s o l i d black ; 2 border r i g h t : 2px s o l i d black ; 3 border bottom : 1px s o l i d black ; 4 border l e f t : 4px s o l i d black ; Im Gegensatz zu den Innen- und Aussenabständen, müssen wir bei Rahmen ausserdem eine Farbe und einen Typ angeben. Möglichkeiten für den Rahmentyp sind none, dotted, dashed, solid, double und noch ein paar weitere, die aber eigentlich keine praktische Anwendung mehr finden, weil sie in jedem Browser anders dargestellt werden. Mit Abstand am häufigsten sind solid und none. Warum none? Angenommen wir haben eine Box, die den gleichen Rahmen auf allen bis auf eine Seite hat. Wir können den Wert erst für die ganze Box einheitlich setzen und dann die eine Seite wieder mit none zurücksetzen. Dies spart unter Umständen ein paar Zeilen CSS. 1 border : 1px s o l i d black ; 2 border l e f t : none ; 2.2 Die display Eigenschaft Alle HTML-Elemente haben eine gesetzte display-eigenschaft. Als Werte dieser Eigenschaft kommen inline und block in Frage (es gibt noch mehr, diese beiden sind aber für den Moment die wichtigsten). Schauen wir uns für beide Fälle die typischen Vertreter an, die Illustrationen in den Unterkapiteln sollen das Verhalten verdeutlichen inline Typische inline-element sind A, SPAN, IMG. Mit unserem Wissen, dass wir bereits über CSS haben, stellen wir fest, dass es sich um Elemente handelt, die hauptsächlich innerhalb des Textflusses vorkommen. Ein Link (A-Tag) beispielsweise, kann irgendwo in einem Absatz beginnen, läuft über eines oder mehrere Zeichen hinweg und hört irgendwo wieder auf. Der restliche Text im Absatz läuft danach ganz normal weiter. Gleiches gilt für SPANs oder Bilder, die dann zwar die Zeilenhöhe aufspannen können (bei Bildern), aber grundsätzlich mitten im Text vorkommen können. 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 7/21

8 2.2 Die display Eigenschaft Wir sehen, dass inline-elemente genau den Platz beanspruchen, den sie benötigen. Dies gilt für die Höhe wie auch für die Breite. Über CSS haben wir keine Möglichkeit die Höhe oder die Breite des Elements zu beeinflussen. Ein Beispiel: Wenn wir die zwei typischen Elemente eines Formulars anschauen, sehen wir, dass ein Label nur so Breit wird, wie der darin enthaltene Text. Das Input-Feld beginnt unmittelbar dahinter. Eine per CSS gesetzte Breite oder Höhe wird ignoriert. Bei den Innen- und Aussenabständen verhält es sich so, dass die Werte für links und rechts berücksichtigt werden, die Werte für oben und unten aber nicht. Würden wir die display-eigenschaft der Label-Elemente per CSS auf block setzen, würde das folgende Input-Feld erst nach einem Zeilenumbruch angezeigt (siehe nächster Teil display: block) block Typische block-elemente sind DIV, P, H1-6, UL, LI. Diese Elemente nehmen immer die zur Verfügung stehende Breite ein. Diese ist typischerweise, solange wir nichts anderes definiert haben, oder ein umschliessendes Element mit einer gesetzten Breite vorhanden ist, die Breite des Browserfensters. Damit wird auch klar, dass in einer SZeile"keine Elemente vor oder nach einem block-element vorkommen können, es sorgt immer für einen Zeilenumbruch vor und nach sich selber. 4eyes GmbH Falknerstrasse Basel CHE MWST Seite 8/21

9 2.2 Die display Eigenschaft 1 d i s p l a y : i n l i n e ; 2 d i s p l a y : block ; Bei block-elementen werden Innen- und Aussenabstände in alle Richtungen berücksichtigt display: inline-block Eine weiterer Wert der display-eigenschaft ist inline-block. Da wir jetz schon inline und block kennen, haben wir eine Idee was bei diesem Wert passiert. Ein solches Element hat alle Eigenschaften eines block-elements in Bezug auf Innen- und Aussenabstände sowie beim freien setzen von Breiten und Höhen. Einzig die automatischen Zeilenumbrüche und die automatisch volle Breite des Elements wir nicht wie bei einem block-element behandelt, sondern wie bei einem inline-element. Das kann beispielsweise bei horizontalen Menus genutzt werden. Wir werden für diesen Fall aber eine Variante mit floating anschauen Breite und Höhe Die Breite und die Höhe eines block-elements kann über folgende zwei CSS-Eigenschaften beeinflusst werden. 1 d i v. box { 2 width : 500px ; 3 h e i g h t : 250px ; 4 } Wird ein Wert gesetzt, der kleiner ist als die nötige Grösse des vorhandenen Inhalts, läuft dieser Inhalt über das Element hinaus. Dies gilt für Browser die sich an den Standard halten, Internet- Explorer spannt das Element auf die benötigte Höhe auf. 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 9/21

10 2.2 Die display Eigenschaft paddings, Höhen und Breiten und die Browser In den Standards der w3c ist definiert, dass die gesetzte Breite und Höhe eines Elements, der vom Inhalt nutzbaren Breite oder Höhe entspricht. Das heisst, dass paddings zur Breite addiert werden müssen um die effektive Breite eines Elements zu erhalten. So verhalten sich auch fasst alle Browser, leider aber nicht InternetExplorer. Für ihn ist die über width und height-eigenschaft definierte Breite und Höhe, die totale Breite resp. Höhe, inklusive paddings. Ist also beispielsweise eine Breite von 500px definiert, mit einem Innenabstand von links und rechts je 100px, steht dem Inhalt im InternetExplorer noch 300px zur Verfügung. In Browsern die sich an den Standard halten, wird das Element total 700px breit (100px Innenabstand links, 500px Breite für den Inhalt, 100px Innenabstand rechts). Dies kann natürlich zu grossen Problemen führen. Gelöst, oder eher umgangen, werden kann dieses Problem so, dass gesetzte Breiten nicht mit Innenabständen kombiniert werden. 4eyes GmbH Falknerstrasse Basel CHE MWST Seite 10/21

11 2.3 Elemente nebeneinander platzieren 2.3 Elemente nebeneinander platzieren Sehr schnell sehen wir die Limitierung von HTML, wenn es um die Umsetzung von etwas anspruchsvolleren Layouts geht. Alle Elemente werden einfach untereinander angezeigt, ein Menu das horizontal anstatt vertikal aufgebaut ist, oder eine Hauptspalte mit einer Randspalte daneben, ist nicht umsetzbar. Man könnte theoretisch das HTML-Konstrukt der tables verwenden, um ein komplexeres Layout zu erstellen, das wird aber seit einigen Jahren nicht mehr gemacht (die Ausnahme sind Newsletter), weil der HTML-Code zu starr wird (Änderungen werden sehr aufwendig) und es dem Prinzip der Trennung von Inhalt (HTML) und Darstellung (CSS) widerspricht. Mit CSS haben wir nun die Möglichkeit, Elemente nebeneinander anzuordnen und so mehrspaltige Layouts, horizontale Menus und viele weitere Konstrukte umzusetzen. Die CSS-Eigenschaft die wir dafür nutzen heisst float. Ursprünglich gedacht um den Textfluss beispielsweise um Bilder in einem Absatz zu steuern, wird float heute eingesetzt um komplexeste Layouts umzusetzen. Im vorher gezeigten Schema wir das Bild-Element (IMG) mittels der float-eigenschaft nach rechts gebracht: 1 img { 2 f l o a t : r i g h t ; 3 } der zugehörige Absatz umfliest das Bild links. In HTML würde das Beispiel so aussehen: 1 <img src=" meinbid. jpg " / > 2 <p >... < / p> Floating Der Umstand, dass ein HTML-Element, welches auf ein gefloatetes Element folgt, dieses auf der gegenüberliegenden Seite umfliesst (siehe Beispiel oben, float: right bewirkte, dass der Text links um das Bild herum fliesst), ermöglicht uns nun zwei Container nebeneinander zu platzieren. Dazu setzen wir bei beiden Elementen (DIVs, z.b.) die float-eigenschaft auf left. Damit wird das zweite Element rechts neben das erste Element verschoben, anstatt einfach unter dem ersten DIV zu verweilen. 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 11/21

12 2.3 Elemente nebeneinander platzieren 1 d i v. s p a l t e { 2 f l o a t : l e f t ; 3 / weitere Styles, f u e r Breite, etc. / 4 } Wir wissen bereits, dass Block Elemente standardmässig, wenn also nicht anders definiert, 100% der zur Verfügung stehenden Breite einnehmen. Um sie nebeneinander zu platzieren, müssen wir ihnen eine Breite geben, die zusammen addiert in den umschliessenden Container passt, oder mit Prozentwerten arbeiten. Misst der Container also beispielsweise 600 Pixel in der Breite, dürfen die beiden Spalten, inklusive allfälliger Aussenabstände (Siehe dazu auch das Boxmodel ) dieses Mass nicht überschreiten, ansonsten werden die beiden Spalten trotzdem nacheinander und nicht nebeneinander angezeigt. Dies ist aber natürlich nicht auf zwei Spalten begrenzt, sondern kann beliebig fortgesetzt werden, beispielsweise für Menus. Wenn wir die einzelnen Listenelemente (LIs) eines Menus ebenfalls als Spalten ansehen, können wir diese Elemente auf die exakt gleiche Weise nebeneinander platzieren Problematik des Floatings Inline- wie auch block-elemente befinden sich normalerweise im Verbund mit Ihren Elternelementen. Das führt dazu, dass ein Elternelement mitwachst, es weiss wie gross seine Kindelemente sind. Beim Floating wird dieser Verbund aufgehoben, folgende Grafik zeigt das Verhalten: Nachfolgend der HTML-Code dazu. Das Element content sollte die beiden Spalten eigentlich umschliessen. 1 < d i v i d = " content " > 2 < d i v i d = " spalte 1" > 3 [... ] 4 </ div > 5 < d i v i d = " spalte 2" > 6 [... ] 7 </ div > 8 </ div > Wollten wir im Container beispielsweise eine Hintergrundfarbe setzen, die hinter beiden Spalten 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 12/21

13 2.3 Elemente nebeneinander platzieren sichtbar ist, würde das so nicht funktionieren, weil der Container nicht weiss wie hoch die Spalten, seine Kindelemente, sind clear - aufheben des floatings Um dieses Problem zu beheben, müssen wir das Floating nach dem letzten zu floatenden Element aufheben. Dies können wir auf verschiedene Weisen tun, wir lernen hier eine zuverlässige Variante kennen die auch auf alten Browsern funktioniert. Sie bringt aber ein eigentlich (semantisch) unnötiges Element mit sich. Die Eigenschaft, die ein float aufheben kann, heisst clear, damit können wir dem oben beschriebenen und sehr unerwünschten Effekt begegnen. Nach der letzten zu floatenden Spalte wird ein weiteres DIV eingefügt, dem wir die Klasse clear geben (der Klassenname ist natürlich völlig frei, wir müssen das Element aber über CSS ansprechen können. Ein sprechender Klassenname macht Sinn, clear hat sich bewährt) 1 < d i v i d = " spalte 1" > 2 [... ] 3 </ div > 4 < d i v i d = " spalte 2" > 5 [... ] 6 </ div > 7 <! Hier das c l e a r Element > 8 < d i v class=" c l e a r " ></ div > In CSS definieren wir folgendes: 1. c l e a r { 2 c l e a r : l e f t ; 3 } Damit clearen wir das Floating (float: left) aus dem vorherigen Element ( Spalte-2 ) und ermöglichen dem umschliessenden Container die Höhe der Kindelemente zu übernehmen. 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 13/21

14 2.3 Elemente nebeneinander platzieren Clearing von Menus Auch gefloatete LI-Elemente eines Menus müssen gecleart werden. Wir dürfen aber kein clear- DIV in ein UL einfügen, weil wir sonst nicht-valides HTML produzieren würden (Ein UL darf als unmittelbare Kindelemente nur LIs enthalten. Funktionieren würde es aber wohl trotzdem.). Etwas weiter vorne haben wir gesehen, dass ein Elternelement den Bezug zu gefloateten Kindelementen verliert. Dies ist glücklicherweise nur dann der Fall, wenn das Elternelement nicht selber gefloatet ist. Das machen wir uns zunutze und floaten das UL-Listenelement, obwohl es aus Gründen der Darstellung eigentlich nicht nötig wäre. Da es nun selber den Bezug zu seinem Elternelement verliert was die Breite angeht, müssen wir hier darauf achten, seine Breite auf 100% zu setzen. 1 u l. menu{ 2 f l o a t : l e f t ; 3 width : 100\%; 4 / weitere s t y l e s / 5 } 6 7 u l. menu l i { 8 f l o a t : l e f t ; 9 / weitere s t y l e s / 10 } Nun können wir das Floating wie gewohnt nach dem gefloateten UL mit einem clear-div aufheben: 1 <ul > 2 < l i ><a h r e f = " # " >Home</ a> </ l i > 3 < l i ><a h r e f = " # " >About </ a> </ l i > </ ul > 6 < d i v class=" c l e a r " ></ div > 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 14/21

15 2.4 HTML Strukturieren 2.4 HTML Strukturieren Bisher haben wir HTML-Elemente aufgrund ihrer Bedeutung eingesetzt. Bei einem neuen Absatz war das ein P, bei einer Aufzählung ein UL mit LIs, IMG-Tags für Bilder, etc. Wir können gewisse HTML-Elemente aber auch einsetzen, um dem HTML- und CSS-Code mehr Struktur zu geben und um schlussendlich überhaupt komplexere Layouts zu erstellen. Schauen wir uns ein einfaches Beispiel an 1 <body> 2 < d i v i d = " page " > 3 < d i v i d = " header " > 4 < d i v i d = " logo " > 5 <img src=" images / company logo. jpg " / > 6 <h1>firma XY</ h1> 7 </ div > 8 < d i v i d = "menu" > 9 <ul > 10 < l i class=" a c t i v e " ><a h r e f = " # " >Home</ a> </ l i > 11 < l i ><a h r e f = " # " >About </ a> </ l i > 12 < l i ><a h r e f = " # " >Blog </ a> 13 < l i ><a h r e f = " # " >Daytrips </ a> </ l i > 14 </ ul > 15 </ div > 16 </ div > 17 < d i v i d = " content " > 18 <h1>das i s t ein T i t e l </ h1> 19 <p >... < / p> 20 <p >... < / p> 21 <p >... < / p> 22 </ div > 23 < d i v i d = " f o o t e r " > 24 <p>adresse </ p> 25 <p>telefonnummer </ p> 26 </ div > 27 </ div > 28 </ body> In diesem Beispiel sehen wir verschiedene Bereiche, die mit DIV-Tags definiert sind ( page, header, menu, content, footer, etc.). Diese Elemente sind, wenn wir den HTML-Code im Browser anschauen, nicht zu sehen. Auch haben sie, ohne Anweisungen im CSS, keine weitere Bedeutung (ausser der, dass es sich um Block-Elemente handelt, die vor und nach sich selber für einen Zeilenumbruch sorgen). 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 15/21

16 2.4 HTML Strukturieren Strukturierung einer typischen Webseite Strukturieren wir nun eine typisches Webseiten-Layout, die Startseite von dolphin.ch soll uns als Beispiel dienen. Es bietet sich an, wie beim Schälen einer Zwiebel, von aussen nach innen zu arbeiten, von groben Strukturen zu immer feineren, bis wir schlussendlich bei einzelnen Titeln und Absätzen angelangt sind. Als erstes sehen wir, dass die Seite eine fixe Breite hat und horizontal zentriert ist. Als ersten Container können wir darum ein DIV um die ganze Seite definieren: Als weitere Struktur innerhalb der eigentlichen Seite scheint es drei vertikale Bereiche zu geben: Den Kopfbereich, den Inhaltsbereich und einen Fussbereich: 4eyes GmbH Falknerstrasse Basel CHE MWST Seite 16/21

17 2.4 HTML Strukturieren Auch der Kopf- und der Fussbereich setzt sich wiederum aus verschiedenen Elementen zusammen, stellvertretend nehmen wir uns aber den Interessantesten Teil, den Inhaltsteil, als nächstes vor. Dieser ist wiederum in drei horizontale Spalten aufgeteilt: Eine erste Spalte für das Menu, eine zweite für den Hauptinhalt der Seite und eine dritte Spalte für aktuelle Meldungen. Nun sind wir beim eigentlichen Inhalt angelangt, die nächsten Elemente sind schon Titel und Absätze. Nur die zwei eingeschobenen zweispaltigen Elemente können wir noch weiter aufteilen, die dann auch wiederum aus Titel und Absätzen bestehen: 4eyes GmbH Falknerstrasse Basel CHE MWST Seite 17/21

18 2.4 HTML Strukturieren Hier die Grobstruktur der Webseite wie sie effektiv implementiert wurde: 1 < d i v class=" outer c o n t a i n e r " > 2 < d i v class=" header c o n t a i n e r " > </ div > 5 < d i v class=" inner c o n t a i n e r " > 6 < d i v class="menu c o n t a i n e r " >... < / div > 7 < d i v class=" content c o n t a i n e r " > 8 < d i v class=" breadcrumbs " >... < / div > 9 < d i v i d = " content " > </ div > 12 < d i v class=" f o o t e r " >... < / div > 13 </ div > 14 < d i v class=" sidebar c o n t a i n e r " > </ div > 17 </ div > 18 < d i v i d = " f o o t e r n a v i g a t i o n " > </ div > 21 </ body> Wir sehen, dass wir alle im Layout identifizierten Bereiche wiederfinden. Über verschachtelte DIVs wird die Datei in HTML aufgebaut und kann dann mittels CSS gestylt werden. 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 18/21

19 2.5 Die position Eigenschaft 2.5 Die position Eigenschaft Alle HTML-Elemente haben eine Standardpositionierung von static. Diese ist implizit und muss nicht angegeben werden, wenn wir aber die computed styles, beispielsweise in den Chrome Entwicklerwerkzeugen, anschauen, sehen wir folgendes: Dies bedeutet nichts anderes, als dass sich das Element im normalen und erwarteten Elementfluss befindet, die Elemente werden, wie in HTML definiert, nacheinander angezeigt. Sie beeinflussen sich ausserdem wie gelernt über das Box-Modell (Grössen und Abstände) und Floating. Neben static kann die position-eigenschaft per CSS aber auch auf andere Werte gesetzt werden. 1 d i v. box a { 2 p o s i t i o n : s t a t i c ; 3 } 4 d i v. box b { 5 p o s i t i o n : absolute ; 6 } 7 d i v. box c { 8 p o s i t i o n : f i x e d ; 9 } 10 d i v. box d { 11 p o s i t i o n : r e l a t i v e ; 12 } 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 19/21

20 2.5 Die position Eigenschaft static Static ist das Standardverhalten eines Elements, es führt dazu, dass sich das Element wie bisher gelernt in die HTML-Struktur einfügt. Elemente die im HTML-Code nacheinander eingefügt sind, werden im Browser auch so angezeigt absolute Mit der absoluten Positionierung eines Elements, lösen wir es für den Browser praktisch aus der HTML-Struktur. Seine Position im HTML-Quellcode lässt nicht mehr auf die Anzeige im Browser schliessen. Unter normalen Voraussetzungen ist beispielsweise ein H1-Element, gefolgt von einem P-Element, auch in der Ausgabe, immer VOR dem Absatz. Setzen wir die position- Eigenschaft des P-Elements aber auf absolute, können wir den Absatz überall im Browserfenster platzieren. Wenn wir wollen sogar ausserhalb des sichtbaren Bereichs. Für die Grösse eines Elternelements ist ein absolut positioniertes Kindelement nicht mehr massgeblich. Zur Positionierung können wir dem Element einen Abstand zu einem Fixpunkt angeben, dies können wir über die CSS-Eigenschaften left, right, top und bottom tun, wobei pro Richtung nur eine Angabe möglich ist: Entweder links oder rechts, oben oder unten. 1 d i v. box { 2 p o s i t i o n : absolute ; 3 bottom : 0; 4 r i g h t : 50px ; 5 } In diesem Beispiel wäre die untere Seite des Elements 0px von unten und die rechte Seite 50px von rechts, vom Fixpunkt entfernt. Wo aber liegt dieser Fixpunkt? Grundsätzlich, wenn nicht anders definiert, ist das HTML-Dokument der Fixpunkt. Angaben mit left und top beziehen sich also auf die linke obere Ecke des HTML- Dokuments. Das ist aber nicht immer sinnvoll, den Fixpunkt möchten wir häufig irgendwo an einer flexibleren Stelle im Dokument festlegen (fix, relativ zu einem anderen Element, siehe position: relative). Das absolut positionierte Element sucht sich über seine Elternelemente das nächste, ebenfalls absolut oder relativ positionierte, Elternelement, oder, wenn es keines findet, nimmt sich das HTML-Dokument als Fixpunkt. 4eyes GmbH Falknerstrasse Basel info@4eyes.ch CHE MWST Seite 20/21

21 2.5 Die position Eigenschaft In der Grafik oben haben wir mehrere Fixpunkte. Einen an der linken oberen Ecke des Browserfensters und drei weitere, für die kleinen Rechtecke, an den linken oberen Ecken der drei länglichen Elemente, diese sind relativ positioniert relative Ein relativ positioniertes Element verhält sich grundsätzlich wie ein statisch positioniertes Element, es liegt im normalen Elementfluss. Es dient einem darin befindlichen absolut positionierten Element aber als Fixpunkt. Alle Angaben des absolut positionierten Kindelements zur Ausrichtung (siehe position: absolute) beziehen sich auf die Ecken dieses relativen Elements fixed Das Element bleibt im Browserfenster an der über die left, right, top oder bottom definierten Position stehen. Auch wenn gescrollt wird, blebt das Element an dieser Stelle stehen. Eingesetzt wird es häufig für Fusszeilen oder Menus die immer sichtbar sein sollen. Als Fixpunkt dient hier ausschliesslich das Browserfenster. 4eyes GmbH Falknerstrasse Basel CHE MWST Seite 21/21