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 vonfloat: left
right
beendet Umfluss vonfloat: right
both
beendet jeden Umflussnone
keine Beendigung, Standard
3. display
Definiert die Art der Anzeige. Dabei gibt es drei Optionen.
block
macht aus einem Inline-Element ein Block-Elementinline
macht aus einem Block-Element ein Inline-Elementinline-block
macht aus einem Element ein Block-Element, legt aber den Inhalt als Inline-Element festlist-item
wie block jedoch mit einem Aufzählungszeichen, was das bezwecken soll, weiß ich aber nichtnone
das Element wird nicht angezeigt und auch kein Platz reserviert (siehe auchvisibility: 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 umflossenright
das Element steht rechts und wird links von den nachfolgenden Elementen umflossennone
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 hinaushidden
der "überschüssige" Inhalt wird abgeschnitten und nicht dargestelltscroll
der Browser zeigt eine Scroll-Leiste, allerdings horizontal und vertikalauto
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 angezeigthidden
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.