HackerSchool

Bisher haben wir ein bisschen mit Farben gespielt, das eigentliche Layout der Seite aber nicht weiter angefasst. In diesem Kapitel beschäftigen wir uns mit dem Layout-Modell von CSS um unsere Seite vom Layout her ein wenig aufzupeppen.

Block vs. Inline

Bei Block-Elementen handelt es sich etwas vereinfacht gesagt um rechteckige Boxen. Für sie gelten im Normalfall unter anderem die folgenden Regeln:

Wenn für sie keine explizite Breite gesetzt ist, versuchen Sie die gesamte Breite ihres Elterncontainers auszunutzen.
Es lassen sich Innen und Außenabstände für die Box festlegen.
Sofern keine Höhe gesetzt ist ergibt sich die Höhe aus der Höhe der Kindelemente.
Wenn eine Box platziert wird, beginnt Sie auf einer “leeren Zeil”. Oder andersrum gedacht: Nach einem Block Element wird ein Umbruch erzwungen.

Block Elemente nehmen die gesamte verfügbare Breite ein ...

... und fügen sich "unter" den bisherigen Elementen ein.

Beispiele für uns bekannte Block Elemente sind u.a: div, p, ul, li, h1. Das ist also der weitaus größere Teil der bisher kennengelernten Elemente. Trotzdem haben wir auch schon kurz mit Inline Elementen gearbeitet, nämlich mit strong und em. Für diese Elemente gelten unter anderem die folgenden Characteristika:

Sie “fließen” quasi mit dem Text, haben also weder zwingend rechteckige Boxen noch erzeugen sie einen Zeilenumbruch.
Ignorieren Regeln welche margin-top oder margin-bottom bzw. die padding Varianten für Abstand nach oben oder unten betreffen.
Ignoreiren Regeln welche versuchen explizit Höhen oder Breiten festzulegen.

Ich fließe hier so entlang und
breche auch mal viel zu früh um. Meine Box ist garantiert nicht rechteckig. Der Textfluss nach mir kommt auch nicht auf eine neue Zeile sondern fließt so weit und breit wie er halt gerne möchte..

Float

Manchmal möchte man seine Seite aber trotzdem mit Elementen “nebeneinander” ausstatten. Das funktioniert indem wir die ersten beiden Regeln für Blockelemente ausstzen. Die Breite lässt sich explizit mit der Eigenschaft width festlegen, der Umbruch lässt sich über die Eigenschaft float steuern.

width: 200px; float: left;

Ich bin ein div das weder width noch float Eigenschaften hat und verhalte mich daher wie gewohnt.

Mit dieser Technik lassen sich also relativ einfach Navigationsbereiche umsetzen.

Das CSS Box Modell

Um zu verstehen wie die einzelnen Abstände von Block Elementen berechnet werden muss man einen kurzen Blick auf das CSS Box Model werfen. Es zeigt anschaulich wie die Breiten von Padding, Border und Margin addiert werden um die endgültigen Dimensionen eines Block Elements zu bestimmen:

Zeigt mindestens vier Bilder in einer Reihe an. Dazu benötigt Ihr die float:left Eigenschaft.
Fügt unter jedes Bild eine kurze Beschreibung hinzu. Dazu benötigt Ihr ein div Element in dem das Bild und die passende Bildunterschrift zusammengefasst werden. Vermutlich müsst ihr ein wenig mit den Abständen des Box Model herumspielen, damit die Unterschriften auch visuell zu den Bildern passen.