Formatierung

CSS: Allgemeine Formatierung

<div> und <span>

Die beiden Elemente div(von engl. "division", Bereich) und span besitzen in HTML keine festgelegte Funktion. Die einzige Festlegung ist die, dass <div> ein Blockelement ist, also einen Zeilenumbruch nach sich zieht, während <span> zu den Inline-Elementen zählt und sich einfach in den Textfluss integriert. Das Fehlen einer Primärfunktion macht die beiden Elemente sehr interessant für die Gestaltung mit CSS.

Außen- und Innenabstand

Man könnte sich einen <div> als eine Art Block vorstellen, der zunächst keine Größe hat.

Füllt man einen div-Block mit Text, zum Beispiel so:

<div>Dies ist ein Text</div>

passiert zunächst nichts, außer, dass der Text dargestellt wird.
Möchte man den Text z.B. mit einem gewissen Abstand von dem umgebenden Element positionieren, verwendet man das Schlüsselwort margin.

Beispiel - CSS:
div.eingerueckt { margin-left: 8px;}

In diesem Beispiel wird ein div der Klasse "eingerueckt"
(<div class="eingerueckt"></div>) um genau 8 Pixel vom linken Rand des umgebenden Elementes (z.B. body, dem Seitenrand) weg gerückt.

Die Schlüsselwörter, um diesen so genannten Außenabstand zu realisieren, sind selbst erklärend:

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom
  • Alternativ kann auch einfach nur das Schlüsselwort margin verwendet werden. Dessen Verwendung entnehmen sie hier

Möchte man hingegen den Text, wie im ersten Beispiel, vom Rand des ihn umschließenden div entfernen, verwendet man das Schlüsselwort padding, dem Innenabstand. Dieses wird völlig analog zu dem Schlüsselwort margin verwendet (vertiefende Informationen).

Beispiel - CSS:

div.eingerueckt { padding-left: 12px; padding-top: 40px; }

In diesem Beispiel wird ein Element <div class="eingerueckt">Dies ist ein Text</div> so formatiert, das der Text innerhalb des div 12 Pixel vom linken Rand und 40 Pixel vom oberen Rand (des div) weg gerückt wird.

Positionierung

Mit <div>-Tags gibt es verschiedene Möglichkeiten, ein präzises Seitenlayout zu erstellen. Mit der Eigenschaft "position" kann die Standard-Anordnung von HTML-Tags durchbrochen werden. Werte, die position=" " annehmen kann:

  • absolute
    absolute Positionierung, gemessen am vorherigen Element.
  • relative
    relative Positionierung, gemessen an der eigentlichen Position des Elements.
  • static
    keine Positionierung, folgt dem normalen Element- bzw. Textfluss.

Zur Bestimmung der genauen Position dienen:

  • top
    legt den Abstand von oben zum vorherigen Element fest.
  • bottom
    legt den Abstand von unten zum vorherigen Element fest.
  • left
    legt den Abstand von links zum vorherigen Element fest.
  • right
    legt den Abstand von rechts zum vorherigen Element fest.

Weitere Informationen zur Formatierung auf w3schools:

Hinweis

Das Positionieren mit div-Blöcken fällt Anfängern im Bereich von Webdesign meistens äußerst schwer, und die Möglichkeiten dieser Techniken sind weit vielfältiger, als dass sie in diesem Proseminar abgedeckt werden könnten. Gerade aber weil sie so flexibel sind, sind sie im Bereich des professionellen Webdesigns unverzichtbar. Daher ist eine weitere Beschäftigung (siehe Literatur und Links) mit diesem Thema sehr zu empfehlen.

Zum Seitenanfang