Fork me on GitHub

Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

Welche Gestaltungsmöglichkeiten bietet CSS nun?

Text

Die Darstellung einer HTML-Seite durch den Browser erfolgt von oben nach unten, je nach Sprache von links nach rechts oder von rechts nach links. Dabei wird zwischen blockbildenden Tags und nicht-blockbildenden Tags unterschieden. In Abbildung 33 wurden <p> und <em>-Tags verwendet und mit folgendem Stylesheet formatiert:

p { background-color:#CCCCCC; }
em { background-color:#FFFF66; }

Bei der Darstellung im Browser kann der nicht-blockbildender Tag em dabei auf mehrere Zeilen verteilt werden und nimmt dann mehrere rechteckige Bereiche ein, der blockbildende Tag p wird immer als ein Rechteck dargestellt:

Abbildung 33: Darstellung von blockbildenden und nicht-blockbildenden Tags

Bild im Text

Ein Bild wird dabei wie ein Wort im Text behandelt, und nicht etwa frei auf der Webseite positioniert. Wenn Sie das Bild wie in Abbildung 34 mitten in einen Absatz hinein setzen, ergibt das meist ein sehr hässliches Layout.

Abbildung 34: Bild mitten im Absatz

Umbruch von Wörtern

Lange konnten Browser keine Wörter trennen und umbrechen, ein langes „Wort“ konnte dadurch die Breite eines Elements überschreiten. In Abbildung 35 können Sie sehen, wie Microsoft Internet Explorer 7.0 eine lange URL nicht umbricht.

Abbildung 35: Darstellung eines Absatzes mit Rahmen und fixer Breite, der lange Wörter enthält, in MSIE 7.0

CSS bietet ab Version 3 verschiedene Möglichkeiten diese Fälle zu behandeln, z.b mit der Eigenschaft text-overflow

Derzeit ist es immer noch notwendig im Text die Soll-Bruchstellen als &shy; einzutragen, damit der Browser dann den Zeilenumbruch korrekt durchführen kann. Die Library hyphenator.js bietet den Umbruch u.a. für englische und deutsche Texte an.

Width und Auto

Normalerweise nimmt ein Block die maximal zur Verfügung stehende Breite ein. Mit width kann eine andere Breite eines Blocks definiert werden:

div#main {  width:500px; }

Je nach box-sizing müssen Sie die Werte von padding, border, margin dazu addieren um den Gesamt-Platzbedarf zu errechnen, oder nicht: der default ist box-sizing: content-box.

box-sizing: content-box;
width: 200px; 
padding: 10px; 
border-width: 10px; 
margin: 32px 0px

Gesamtbreite inklusive Rahmen = 0px + 10px + 10px + 200px + 10px + 10px + 0px = 240px

Abbildung 36: width im Box-Model mit box-sizing: content-box

box-sizing: border-box;
width: 200px; 
padding: 10px; 
border-width: 10px; 
margin: 32px 0px

Gesamtbreite inklusive Rahmen = 0px + 10px + 10px + 160px + 10px + 10px + 0px = 200px

Abbildung 36a: width im Box-Model mit box-sizing: border-box

Zentrieren mit Auto

Um einen Element zu zentrieren kann margin mit Wert auto verwendet werden, der den zur Verfügung stehenden Platz automatisch gleichmäßig verteilt.

Demo-Seite dazu

div#main {
  width:500px; 
  margin-left:  auto;
  margin-right: auto;
}

Float

Eine Möglichkeit aus der normalen Reihenfolge der Darstellung auszubrechen bietet die Deklaration float mit den Werten left und right. Damit wird ein Element nach links bzw. rechts gesetzt, der Rest des Inhalts „rutscht nach oben“ und wird neben das Element gesetzt („umfließt das Element“).

Hier sind drei Absätze zu sehen, die jeweils als Erstes ein Bild enthalten. Im ersten Absatz ist die Darstellung ganz normal – das Bild wird wie ein Wort im Text behandelt. Im zweiten Absatz „floated“ das Bild nach rechts, der Text rutscht links davon nach oben. Im dritten Absatz „floated“ das Bild nach links, der Text rutscht rechts davon nach oben.

Beispiel als Demo-Seite

Abbildung 37: Bilder mit float

Bei Bildern funktioniert float besonders einfach, weil das Bild schon eine fixe Breite hat. Wird ein anderer HTML-Tag mit float versehen muß man auch die Breite des Tags setzen um einen sichtbaren Effekt zu erzielen. Soll ein Absatz nach rechts gehen, dann muss man dafür die Breite noch setzen.

p { margin: 0px; }
#slim { 
    float:right;
    width:33%;
}

Beispiel als Demo-Seite

Abbildung 38: Ein Absatz mit float

Wenn viele Elemente mit float positioniert werden, die die gleiche Höhe haben, entsteht ein besonders flexibles Layout: im folgenden Beispiel werden je nach zur Verfügung stehendem Platz drei oder vier Bilder nebeneinander dargestellt:

Abbildung 39: Zwei Darstellungen der Bildergalerie mit float

Absolute Positionierung

Mit der Deklaration position: absolute wird ein Tag aus der normalen Darstellung herausgenommen und über dem restlichen Inhalt der Seite platziert. Mit top und left kann die linke obere Ecke des Elements positioniert werden. (oder mit bottom und right die rechte unter Ecke). In folgendem Beispiel wird ein absolut positiniertes Menü kombiniert mit einem Inhalt mit margin-left - sonst würde das Menü den Inhalt verdecken!

#navi {
  position: absolute;
  width: 80px;
  top:    0px;
  left:   0px;
}
#content {
  margin-left: 100px;
}



Abbildung 40: Kombination von absoluter Positionierung und margin-left

Koordinatensystem

Die Koordinaten (top und left) beziehen sich normalerweise auf die linke obere Ecke des Browserfenster.

Ein Element mit der Eigenschaft position: absolute oder position: relative bildet für seine untergeordneten Elemente ein neues Koordinationsystem. In folgendem Code definiert das main-div ein neues Koordinatensystem, das navi-div ist also in der linken oberen Ecke des main-div und nicht in der linken oberen Ecke des Browser-Fensters positioniert.

<div id="main">
  <div id="content">
    <h1>Inhalt</h1>
    <p>Hier der Inhalt.</p>
    <p>Hier der Inhalt.</p>
    <p>Hier der Inhalt.</p>
    <p>Hier der Inhalt.</p>
  </div>
  <div id="navi">
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
    <p>e</p>
  </div>
</div>
#main {
  border: 1px red solid;
  position:relative;
  width: 700px;
  margin: 0px auto;
} 
#content {
  margin-left: 120px;
  background-color: yellow;
}
#navi {
  position: absolute;
  width: 80px;
  top:0px;
  left:0px;
}

Beispiel-Seite

Viele Methoden

Wie Sie gesehen haben gibt es viele CSS-Properties die das Layout beeinflussen. Manche davon passen zusammen, andere widersprechen sich. So macht es keinen Sinn absolute Positionierung mit Float zu kombinieren.

Mit der Zeit werden Sie Erfahrungen sammeln und auch Ihren eigenen Stil entwickeln.