Webprogrammierung — 6. Lektion

Boxen

Mit den Tags <div> (division) und <span> können Bereiche festgelegt werden, die durch CSS gestaltet werden. Bei einem div-Bereich handelt es sich um einen Block, in dem üblicherweise mehrere Strukturelemente (z.B. Überschriften und Absätze) zusammengefasst sind und der standardmäßig horizontal allein steht. Bei einem span-Bereich handelt es sich üblicherweise um einen Bereich, der innerhalb einer Zeile aufgespannt ist. Es dürfen mehrere div-Bereiche und auch mehrere span-Bereiche geschachtelt werden. Ein div-Bereich enthält möglicherweise mehrere span-Bereiche. Umgekehrt sollte man es jedoch vermeiden, da sonst die Intension von <span> (Bereich in einer Zeile) ignoriert wird und es zu (wahrscheinlich) unerwünschten Effekten kommt.
Standardmäßig ist bei div-Elementen das Attribut display auf block gesetzt und bei span-Elementen auf inline. Dies kann man jedoch individuell abändern.
Das Setzen von display:inline bei div-Elementen hat jedoch nicht den Effekt, dass dadurch solche Elemente nebeneinander platziert werden. Ein Block kann aber von anderen Elementen „umflossen“ werden. Dazu ist das Attribut float auf left oder right zu setzen. Es ist der Wert zu nehmen, wo der Block stehen soll; auf der anderen Seite wird er dann umflossen. Beim ersten Block, der ein links oder rechts stehendes Element nicht mehr umfließen soll, ist clear:left bzw. clear:right zu setzen. Wenn das Umfließen auf beiden Seiten beendet werden soll, nehme man clear:both.
Blöcke erhalten ihre Größe automatisch durch die Größe ihres Inhaltes. Man kann sie allerdings auch selbst festlegen.
Attribut width gibt die Breite an
Attribut height gibt die Höhe an
Größenangaben in Pixeln (px), m-Breiten (em), x-Höhen (ex) oder in Prozent (von der Größe des übergeordneten Elementes).
Nimmt der Inhalt mehr Platz ein, als eigentlich vorgesehen, wird er über den Bereich hinaus gesetzt. Dieses Verhalten kann über das Attribut overflow definiert werden. Mögliche Werte sind scroll (es werden Scrollbalken angezeigt, mit denen man gegebenenfalls über den Inhalt scrollen kann), auto (der Browser entscheidet, wie angezeigt werden soll), hidden (es wird an den Bereichsgrenzen „abgeschnitten“; der überstehende Inhalt ist nicht sichtbar), visible (Standard; es ist alles sichtbar, aber steht gegebenenfalls über).
Mit den Attributen padding und margin setzt man den Abstand vom Bereichsrand zum Inhalt bzw. zur äußeren Umgebung. Mit den Zusätzen -top, -bottom, -left und -right kann man Einzelabstände für oben, unten, links bzw. rechts setzen.
Die Ausrichtung des Inhaltes in Blöcken ist standardmäßig linksbündig. Aber auch das kann man anders gestalten.

Positionierung

Die Lage von Elementen wird normalerweise automatisch festgelegt. Man kann Elemente aber auch selbst anordnen.
Attribut position: mögliche Werte
  • static (Standard, Element wird dem normalen Fluss der Seite entsprechend platziert),
  • relative (eine angegebene Lage ist relativ zur eigentlichen Lage, eigentlicher Platz wird freigehalten),
  • absolute (angegebene Lage ist absolut im übergeordneten Element, kein Platzhalter im normalen Fluss),
  • fixed (Lage ist im Browser-Fenster fixiert, kein Platzhalter im normalen Fluss),
  • sticky (Lage hängt von der Scroll-Position ab, Element bleibt beim Scrollen gegebenenfalls am oberen oder unteren Rand „kleben“)
Attribute top, right, bottom und left: Abstände von oben, rechts, unten bzw. links
Bei position:static (oder keiner Angabe von position) haben diese Attribute keinen Effekt.
Bei position:relative bilden diese Abstände die Verschiebung von der eigentlichen Lage.
Ist der position-Wert absolute oder fixed, bilden diese Abstände die Verschiebung vom Rand des innersten Elementes, das dieses Element enthält und positioniert ist (bei dem der position-Wert nicht static ist, spätestens das body-Element).
Wenn beim position-Wert relative, absolute oder fixed sowohl top als auch bottom angegeben sind, wird der top-Wert genommen; wenn left und right angegeben sind, wird der left-Wert genommen.
Die Positionsangaben definieren die Lage eines Elementes beim Aufbauen. Durch späteres Scrollen verändert sich die Lage (es „wandert mit“), es sei denn, der position-Wert ist fixed, dann bleibt das Element im Fenster fixiert.
Bei position:sticky gibt der left- oder right-Wert die horizontale Verschiebung vom Rand des innersten positionierten Elementes (spätestens des body-Elementes) an (der left-Wert, wenn beide angegeben sind). Vertikal ist das Element nicht verschoben, wenn es sich samt top- und bottom-Rand im sichtbaren Ausschnitt befindet. Beim Scrollen bleibt das Element im top-Abstand unter dem oberen Rand und im bottom-Abstand über dem unteren Rand des Bezugselementes hängen.
Attribut z-index: „Ebene“ vor dem Hintergrund (ganze Zahl; je größer die Zahl, desto weiter entfernt von der Hintergrund-Ebene; Standard ist Wert 0)