Little Boxes – CSS-Positionierung und mehrspaltige Layouts

HTML-Elemente folgen Dokumentenfluss

29,95
Grundsätzlich folgen HTML-Elemente bei der Positionierung innerhalb einer Website dem Fluss eines Dokuments im sichtbaren Bereich eines Browserfensters.

Beim Gestalten mit CSS spielt das Positionieren von HTML-Elementen eine große Rolle. Und so wie es hier heißt: Kästchen verschieben mit "position", denn die HTML-Elemente erzeugen am Bildschirm rechteckige Kästchen. Der Überblick: Es gibt mehrere Arten und Weisen zur Positionierung. Da gibt es zunächst einmal den normalen Flow, den man kennen sollte. Das sind die Eigenschaften "display: block", "display: inline" und dergleichen. Dann gibt es die absolute Positionierung, "position: absolute" und "position: fix". Und es gibt Float und wo Float ist, ist Clear nicht weit. Diese drei Methoden sind weit verbreitet zum Positionieren von HTML-Elementen. Los geht es hier mit dem Flow, dem Fluss des Dokumentes, der normale Dokumentenfluss. normalerweise folgen die Elemente im sichtbaren Bereich des Browserfensters diesem "document flow", diesem Fluss, und alle HTML-Elemente schwimmen in diesem Fluss mit. Der "document flow" ist der natürliche Zustand einer Webseite, und für Webdesigner ungefähr so wichtig wie Schwerkraft für Architekten. Man sollte also mit diesem Flow arbeiten und nicht gegen ihn. Man sollte verstehen, wie der funktioniert. Es gibt zum einen Blockboxen, mit der Eigenschaft "display" kann man das ändern: "display: block" erzeugt Blockboxen. "display: inline" erzeugt Inline-Boxen. Und der Flow besteht darin, dass die erste Blockbox so weit wie möglich links oben beginnt. Geblockte Boxen werden so breit wie die umgebende Box, also das umgebende Kästchen, und nachfolgende geblockte Boxen stehen immer unterhalb der vorhergehenden Box. Das heißt, wir haben also einen integrierten Zeilenumbruch. Inline-Boxen, die mit "display: inline" erzeugt werden können, oder einige HTML-Elemente sind von Haus aus Inline-Elemente... Die erste Inline-Box steht, genau wie eine Blockbox, so weit wie möglich oben links. Folgende Inline-Boxen stehen rechts daneben. Die stehen also in einer Zeile oder "in one line", wie es im Englischen heißt. "Inline" kommt dieser Sache schon relative nahe. Wenn kein Platz ist, dann rutschen sie eine Zeile tiefer. Das ist der normale Fluss der Dinge. Um ein bisschen Gefühl für diesen Flow zu bekommen, studieren Sie jetzt zunächst einmal das natürliche Verhalten der Boxen in freier Wildbahn sozusagen, und schauen sich diese Beispielseite einmal etwas näher an. Hier ist der Quelltext im Editor, die Datei heißt "flow.html", "01-flow.html", und darin werden hier unten drei "div"-Boxen definiert. Ganz simpel. Und die stehen hier mit "Box 1", "Box 2" und "Box 3" steht da drin. Diese "div"-Boxen werden gestaltet durch wenige CSS-Eigenschaften und -Werte hier: "backgroundcolor: white", "color: black", "padding" drum rum, bisschen "border". Abgerundete Ecken und ein bisschen Abstand. Das ist alles. So sehen die hier aus. Und eine der Fragen, die jetzt auftaucht: Wenn ich jetzt zu Beispiel diese Boxen verkürze, was passiert dann? Sie sehen aber hier zunächst einmal das normale Verhalten. Es geht links oben los, es wird so breit, wie es geht, und die nächste Box fängt eine Zeile tiefer an. Wenn jetzt diese Boxen nicht die volle Breite einnehmen... -Ich mache das hier einfach mal im Entwicklertool des Firefox, Element untersuchen. Und hier ist das "div" markiert, das oberste. Und diese CSS-Regel hier die gilt natürlich für alle drei "div"-Elemente. Wenn ich hier also jetzt das "border" entferne, dann ist das von allen dreien entfernt. Genauso kann ich hier direkt im Firefox mit der Tab-Taste eine neue Zeile erzeugen und da schreibe ich jetzt rein "width:" "25 Prozent". Sie können auch gerne eine andere Prozentzahl nehmen, Sie sehen oben schon, - einmal Enter, dann wird das bestätigt - das ist jetzt nicht in die Datei geschrieben, das spielt alles nur im Browser, aber zum Ausprobieren und Spielen sind diese Entwicklertools natürlich ideal. Sie sehen "width: 25%". Man könnte ja denken, dass 25 Prozent - dreimal 25 sind 75 - das würde alles in eine Zeile passen. aber der normale Fluß bei Blockelementen ist so, dass sie auf jeden Fall untereinander stehen, weil sie haben einen integrierten Zeilenumbruch, egal wie breit sie sind. Dieses normale Verhalten wird übrigens auch als "position: static" bezeichnet. Das ist ein bisschen ironisch, die dem natürlichen Fluß der Elemente freien Lauf lässt, die bekommt den Namen "static", also statisch, such is life.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!