Inhalt: 1. 2. 3. 4. 5. 6.

Das Box-Modell Reset-CSS CSS-Eigenschaft: position (static, relative, absolute) CSS-Eigenschaft: float, clear Übung 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

 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. .codeschrift { }

box.html Code für die Box – mit „div class“ Box Eberhart

4.css.box.docx

2

Diese Box hat eine Gesamtbreite von 340 Pixel

Die Box zentrieren Um die Box zentriert darstellen zu können, kann man nicht auf den bekannten HTML-Code 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

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

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 CSSDeklarationen, 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

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 der HTML-Datei auf die CSS-Datei verlinkt werden muss: position.css

position.html

Ergebnis:

Eberhart

4.css.box.docx

6

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 -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

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: … Hier kommt der Text des Containers und nicht vor dem div id=”floating_box”….. 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

Code:

Ergebnis: wenn man den Bildschirm etwas verkleinert

float.css:

Eberhart

4.css.box.docx

9

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 :

Eberhart

4.css.box.docx

10

Das ist die Box mit der Eigenschaft float. Hier kann Text stehen muss aber nicht!

Es bedarf keiner Änderung in der CSS-Datei. Ergebnis im Browser:

Eberhart

4.css.box.docx

11

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

Erstelle danach die HTML-Datei „box_fertig.html“ mit „semantischem HTML5“:

Ergebnis:

Den Kopfbereich 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 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 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

vermeiden, erhält einen linken Außenabstnd (margin-left: 224px) was exakt der Breite der linken Spalte entspricht. Der Container ist eine statische Box und wird damit automatisch unterhalb von , 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 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