CSS - Elemente - Darstellung

1. clip

Bestimmt, wie viel von einem Element gezeigt werden soll. Dabei wird über rect (rectangle = Rechteck) der entsprechende Ausschnitt festgelegt.

.schnippi
{
  clip: rect(0px, 130px, 130px, 0px);
}

<div class="schnippi">
  <img src="schwall.gif" width="420" height="220" alt="schwall">
</div>

zeigt vom Bild schwall.gif nur einen Ausschnitt von 130 x 130 Pixeln. Der erste Wert steht für oben, der zweite für rechts, der dritte für unten und der vierte für links.

2. clear

Beendet den mit float angegebenen Fluss. Analog dazu die folgenden Optionen.

• left beendet Umfluss von float: left
• right beendet Umfluss von float: right
• both beendet jeden Umfluss
• none keine Beendigung, Standard

3. display

Definiert die Art der Anzeige. Dabei gibt es drei Optionen.

• block macht aus einem Inline-Element ein Block-Element
• inline macht aus einem Block-Element ein Inline-Element
• inline-block macht aus einem Element ein Block-Element, legt aber den Inhalt als Inline-Element fest
• list-item wie block jedoch mit einem Aufzählungszeichen, was das bezwecken soll, weiß ich aber nicht
• none das Element wird nicht angezeigt und auch kein Platz reserviert (siehe auch visibility: hidden)

Ein Hinweis

Es gibt noch die Möglichkeit, bei display tabellarische Darstellungen zu definieren, aber leider kommt ein spezieller Browser damit überhaupt nicht klar. Ratet mal wer. Außerdem kann man die meiner Meinung nach eh ignorieren.

4. float

Bestimmt den Fluss nachfolgender Elemente zum ausgewählten. Folgende Angaben sind möglich.

• left das Element steht links und wird rechts von den nachfolgenden Elementen umflossen
• right das Element steht rechts und wird links von den nachfolgenden Elementen umflossen
• none kein Umfluss (Standardwert)

Klingt zugegebenermaßen sehr verwirrend, aber mittlerweile gibt es dazu ein Tutorial, in dem ich das Prinzip genauer erkläre.

5. overflow

Damit kann eingestellt werden, wie übergroße Inhalte in HTML-Elementen behandelt werden. Dazu gibt es vier Möglichkeiten.

• visible der gesamte Inhalt wird angezeigt und ragt über das Element hinaus
• hidden der "überschüssige" Inhalt wird abgeschnitten und nicht dargestellt
• scroll der Browser zeigt eine Scroll-Leiste, allerdings horizontal und vertikal
• auto der Browser entscheidet selber über die Darstellung, heißt normalerweise vertikale Scroll-Leiste

6. visibility

Legt fest, ob ein Element gezeigt wird oder nicht. Im Gegensatz zu display: none wird hier aber der benötigte Platz im Browserfenster "reserviert". Das heißt, die entsprechende Fläche ist zwar da, aber nicht sichtbar. Das Ergebnis ist sozusagen ein leeres Feld.

• visible Element wird angezeigt
• hidden Element wird nicht angezeigt

7. width, height

Legt die Breite und Höhe eines HTML-Elements fest. Erlaubt sind numerische Angaben und der Wert auto.

min-width, min-height

Hiermit kann man Mindestgrößen festlegen. Allerdings werden diese Angaben vom Internet Explorer 6 als width und height interpretiert.

8. z-index

Diese Angabe hat nur Auswirkungen auf Elemente, die positioniert wurden, und auch nur dann, wenn diese sich überlappen. Mit z-index legen wir die Darstellungsreihenfolge der Elemente in Richtung der Z-Koordinate fest. Für die 3D-Laien: je höher der Z-Wert, desto weiter vorne befindet sich das Element.

zurück zum vorherigen Abschnitt weiter zum nächsten Kapitel