Inhalt: 1)Das Box-Modell

Transkript

1 Inhalt: 1. Das Box-Modell 2. Reset-CSS 3. CSS-Eigenschaft: position (static, relative, absolute) 4. CSS-Eigenschaft: float, clear 5. Übung 6. Die Seite zentrieren mit margin:auto 1)Das Box-Modell Die Box (auch Kiste, Kästchen, Kontainer ) ist der Baustein einer Website und das grundlegende Gestaltungselement bei CSS. Alle Boxes sind nach diesem Schema aufgebaut! Es beschreibt einen rechteckigen Bereich, der für alle Elemente des Dokumentenbaums generiert wird. Ein solche Box besteht immer aus vier Teilen: dem eigentlichen Inhaltsbereich, dem Innenabstand (padding), einem definierten Rahmen (border) sowie dem Außenabstand (margin). Eberhart 4.css.box.docx 1

2 Innenabstand (padding) beschreibt den Abstand des Inhaltsbereiches vom Rahmen der Box. Übernimmt die Hintergrundfarbe des Inhaltsbereiches Rahmen (boder) schließt den sichtbaren Bereich des Box-Modells nach außen hin ab. Kann eine eigene Farbe, einen eigenen Stil und eine eigene Dicke erhalten Außenabstand (margin) ist generell transparent und beschreibt den Abstand der Box zum nächsten Element. Er übernimmt die Hintergrundfarbe des umgebenden Elements, auch Elternelement genannt und kann keine eigene Farbe definiert bekommen. Die Außenabstände zweier Boxen innerhalb einerr Gliederungsebene addieren sich dabei nicht. Sie greifen übereinander, wodurch der größere Wert für den Abstand zwischen den beiden Boxen maßgebend wird. Inhaltsbereich: Breite und Höhe des Inhaltsbereichs richten sich entweder nach der Größe der Inhalte des Elements (z.b. eines Bildes oder einer Tabelle) oder sie können über die CSS Eigenschaften width und height explizit vorgegeben werden. Zur Gesamtbreite einer Box kommen die Innenabstände (padding) und die Rahmenbreite (border-width) hinzu. Die Innen- und Außenabstände sowie die Rahmenbreite und Rahmenhöhe können per CSS auf null gesetzt werden. Die Gesamtbreite errechnet sich somit aus der Addition aller sichtbaren Bestandteile (Inhaltsbereich, Innenabstand, Rahmen) des Box-Modells. Beispiel: Erstelle eine box.html und box.css Erstelle eine Box mit einem Inhaltsbereich von 300 Pixel, einen umlaufenden Innenabstand von 10 Pixel sowie einen ebenfalls umlaufenden und 10 Pixel breiten, dunkelgrauen Rahmen. Den Außenabstand setze auf null. Man kann Klassen auch selbst definieren. Sie müssen immer mit einem Punkt beginnen, danach folgt der Name der Klasse. <style type="text/css">.codeschrift { } </style> box.html Code für die Box mit div class <!doctype html> <html> <head> <meta charset="utf-8"> <title>box</title> <link rel="stylesheet" href="box.css" /> </head> <body> Eberhart 4.css.box.docx 2

3 <div class="box">diese Box hat eine Gesamtbreite von 340 Pixel</div> </body> </html> Die Box zentrieren Um die Box zentriert darstellen zu können, kann man nicht auf den bekannten HTML-Code <text align= center > zurückgreifen. Es genügen die beiden CSS-Eigenschaften width und margin : Beispiel: width: 720px; margin: 20px auto; Auto bedeutet, dass automatisch von beiden Seiten der gleiche Abstand gewählt wird. Im Angabenbeispiel füge die Eigenschaft auto bei margin hinzu: Ergebnis im Browser: Eberhart 4.css.box.docx 3

4 Angaben verkürzt darstellen: Die vier Seiten der Box können einzeln deklariert werden, z.b.: Einfacher ist es aber diese in einem darzustellen: (im Uhrzeigersinn) Weiter Vereinfachung: Hat ein Style nur 2 Werte, dann gilt dies immer für oben und unten, bzw. rechts und links. Diese Regelmäßigkeit nutzt man für folgende Darstellung: = padding: 5px 20px 5px 20px; Wird nur ein Wert angeben, dann sind damit alle vier Seiten gemeint und erhalten diesen Wert! Übung: Erstelle im obigen Beispiel ein padding von 30px für alle 4 Seiten. Eberhart 4.css.box.docx 4

5 2)Browserübergreifende, einheitliche Webgestaltung: Alle Browser haben ein eingebautes Stylesheet und vor allem für die Innen- und Außenabstände leider sehr unterschiedliche Standardvorgaben haben und daher den Code unterschiedlich interpretieren. Es ist daher für den Webdesigner schwierig browserübergreifende, einheitliche Gestaltung einer Website zu erzielen. Zu diesem Zweck nutzen viele Webdesigner ein so genanntes RESET CSS. Das ist ein Block von CSS- Deklarationen, die an den Anfang des eigenen Layouts gestellt werden und für eine möglicht einheitliche Darstellung aller HTML-Elemente sorgen. Beispiel: Mit Hilfe des Stern-Selektors werden pauschal alle Innen- und Außenabstände für sämtliche Elemente auf Null zurückgesetzt. Der bekannteste und kürzeste Weg ist folgender: *{margin:0; padding:0} Eberhart 4.css.box.docx 5

6 3)CSS-Eigenschaft: position Die Grundlage für die Erstellung von Layouts liegt in der vielfältigen Möglichkeit zur Positionierung von Boxen. 3a.)position:static Der Standardwert der Eigenschaft position ist static. In der Regel wird diese Angabe daher weggelassen. Übung: Erstelle eine position.html und eine position.css mit folgenden Inhalten, wobei im <head> der HTML-Datei auf die CSS-Datei verlinkt werden muss: position.css position.html Ergebnis: Eberhart 4.css.box.docx 6

7 3b.)position:relative Die Box wird relativ zu der Stelle positioniert, an welcher sie normalerweise erscheinen würde. Beispiel: Änder dazu die Position static vom obigen Beispiel auf realtive und füge die Eigenschaften top und left ein: (beachte die Schreibweise relative und nicht relativ ) Ergebnis: mit der Live-Ansicht im Dreamweaver. Lösung: 50px nach unten und 100px nach rechts verschoben. 3c.)position:absolute Mit position:absolute werden Boxen vollständig aus dem Fluss der Elemente herausgelöst und in Bezug auf das <body>-element positioniert. Nachfolgende Elemente rücken nach, anders als bei position:relative. Beispiel: top und right mit Null = block_2 wird ganz rechts oben positioniert. Ergebnis: Eberhart 4.css.box.docx 7

8 Durch die Kombination von relative und absolute wird erste eine gute Layouterstellung ermöglicht. Um jedoch bestimmte Nachteile auszuschalten und noch flexibler zu werden ist die Einführung der CSS-Eigenschaft float sehr wichtig. 4)CSS-Eigenschaft float Man kennt diese Art der Positionierung aus der Zeitung oder von Textverarbeitungsprogrammen: Ein Bild wird innerhalb eines Textbereichs am linken oder rechten Seitenrand platziert, und die Wörter umfließen das Bild. Nachfolgende Elemente fließen einfach an ihnen vorbei. Als Wert der Eigenschaft float kann man left oder right angeben, je nachdem, auf welcher Seite des Elternelements das floatende oder schwebende Element platziert werden soll. Beispiel: float: left; Das Verhalten von Elementen mit der Eigenschaft float ist etwas gewöhnungsbedürftig, denn ein floatendes Element beeinflusst auch die umgebenden Inhalte: Beispiel: Erstelle eine neue Datei float.html und eine float.css : Die Box #floating_box befindet sich im HTML-Code innerhalb des statischen Containers. Die Box #container hat eine flexible Breite, während die floating Box eine Breite von 200 Pixel hat. Beachte im HTML-Code: <div id= container > <div id= floating_box > </div> Hier kommt der Text des Containers und nicht vor dem div id= floating_box.. </div> Text zum Kopieren: Diese Box ist ein statischer Container mit einer nicht festgelegten Breite. Durch die Eigenschaft floating:left wird die Box aus dem Textfluss herausgelöst und am linken Rand platziert. Alle nachfolgenden Inhalte fließen an der Box vorbei. Eberhart 4.css.box.docx 8

9 Code: Ergebnis: wenn man den Bildschirm etwas verkleinert float.css: Eberhart 4.css.box.docx 9

10 4a)CSS-Eigenschaft: clear float-verhalten beenden Bei der Arbeit an einer anderen Website könnte es vorkommen, dass man nach dem gefloateten Element weitere Elemente hat, die das gefloatete Element nicht mehr umfließen sollen. Stattdessen sollen sie wieder die gesamte Breite ihres Elternelements für sich beanspruchen. Dazu gibt man dem ersten Element, das wieder die gesamte Breite einnehmen soll, die CSS-Eigenschaft clear mit dem Wert both. Der Text in der statischen Box umschließt die floating Box, aber nur, da absichtlich sehr viel Text geschrieben wurde. Wenn der lange Text aus der HTML-Datei gelöscht wird, dann schießt der Elterncontainer die floating-box nicht ein, wie hier abgebildet: Dies ist ein Nachteil, da bei wenig Text das Elternelement nicht weitergezogen wird. Lösung: CSS-Eigenschaft clear: Um die floatende Box in den Elterncontainer einzuschließen, muss der mittels float definierte Textfluss innerhalbt des Elternelements wieder gestoppt werden. CSS sieht dafür die Eigenschaft clear vor. Ein Element mit dieser Eigenschaft wird automatisch unterhalb eines mit float positionierten Elements platziert. Die Eigenschaft clear muss allerdings einem Element innerhalb der Box #container (in unserem oberen Beispiel) zugewiesen werden, was bei einem ansonsten leeren Container zusätzliches Markup (HTML-Code) erfordert. Dazu füge in das Beispiel einen zusätzlichen Absatztest mit der Eigenschaft clear:both ein, um eine allgemein verwendbare Lösung zu erhalten. Durch dieses Clearing wird der obere Außenabstand (margin) dieses Absatztextes durch den Browser automatisch soweit vergrößert, bis derr Text unterhalb der floatenden Box angeordnet werden kann. Da sich der Absatztext innerhalb von #container befindet, wird die Box erweitert und umschließt die floatende Box. Beispiel: Arbeite im float.html weiter aber vereifache den <body>: Eberhart 4.css.box.docx 10

11 <body> <div id="container"> <div id="floating_box">das ist die Box mit der Eigenschaft float.</div> <p style="clear:both;">hier kann Text stehen muss aber nicht!</p> </div> </body> Es bedarf keiner Änderung in der CSS-Datei. Ergebnis im Browser: Eberhart 4.css.box.docx 11

12 5)Übung: Zwei Spalten mit Footer Durch die Kombination von floatenden und statischen Containern lässt sich auf sehr einfache Weise ein flexibles Layout erstellen. Ziel: folgendes Layout Erstelle die CSS-Datei box_fertig.css : Die Positionierung der einzelnen Container erfolgt in folgender Weise mit CSS: Eberhart 4.css.box.docx 12

13 Erstelle danach die HTML-Datei box_fertig.html mit semantischem HTML5 : Ergebnis: Den Kopfbereich <header> bildet ein normaler statischer Container. Die Eigenschaft width:auto braucht normalerweise nicht expizit angegebene zu werden, da auto sowieso der Standardwert ist. Die linke Spalte <aside> erzeugt man durch die Eigenschaft float:left. Sie erhält eine Breite von 200 Pixel und einen Innenabstand von 10 Pixel, sowie einen Rahmen. Die rechte Spalte <article> würde durch die Eigenschaft width:auto die volle Seitenbreite einnehmen und damit teilweise hinter der linken Spalte verschwinden. Um dies zu Eberhart 4.css.box.docx 13

14 vermeiden, erhält <article> einen linken Außenabstnd (margin-left: 224px) was exakt der Breite der linken Spalte entspricht. Der Container <footer> ist eine statische Box und wird damit automatisch unterhalb von <article>, dem im Quelltext voranstehenden Container, platziert. Es muss nur noch dafür gesorgt werden, dass auch die linke Spalte in die Positionierung mit einbezogen wird. Hier greift der große Vorteil von floats, denn durch die Eigenschaft clear:both wird <footer> automatisch unter die floatenden Spalten verschoben. 6)Tipp: Die Seite zentrieren mit margin: auto Text und Inline-Elemente kann man mit der Anweisung text-align: center zentrieren, aber für Blockelemente funktioniert das leider nicht. Da es keinen Befehl wie»zentriere ein Blockelement auf der Seite«gibt, benutzt man einen kleinen Trick: Wenn die Außenabstände (margin) für links und rechts auf automatisch gesetzt werden, sind sie immer gleich groß. Wenn die Außenabstände links und rechts gleich groß sind, ist das Element zentriert. Eberhart 4.css.box.docx 14