CSS Kurs: Positionierung von Seitenelementen

CSS-Attribut Erklärung Code-Beispiel

clear

gehört zu float. Es beendet einen speziellen Float-Modus. Danach folgt normaler Fluß der Seitenelemente (meist Text). Mögliche Werte: left, right, both, none (float-Modus bleibt).

Hier ist der

Floatmodus vorzeitig unterbrochen worden. Der Code dazu lautete:
<div style="width:25mm;float:left"> <img src="bilder/pfeil.gif"> </div>
Hier ist der
<div style="clear:left">
Floatmodus....
</div>

clip Ausschnitt aus einem Seitenelement, das absolut positioniert sein muß. Zulässig ist die Angabe von rect()(Rechteck), dazu gehören die Grenzpositionen in zulässigen Zahlwerten oder auto in der Reihenfolge oben, rechts, unten, links. Sinnigerweise zählen die Maße obn und unten von der Oberkante aus, rechts und links von der linken Kante aus. Eintrag in dieser Zelle: <img src="bilder/pfeil.gif" alt="bild" style="position:absolute; left:100px; top:0; clip:rect( 5px, 55px, 21px, 15px ); /> Die Anzeige dazu erfolgt im zuständigen Elter, der Tabelle; es ist der beschnittene Pfeil in der Tabellenkopfzeile.

cursor

Möglichkeit, den Cursor zu manipulieren. Möglich sind: eine Webadresse, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-reisze, n-resize, se-resize, sw-resize, w-resize, text, wait, help, progress, inherit.

crosshair	default	pointer	move
e-resize	ne-resize	nw-resize	n-resize
se-resize	sw-resize	w-resize	text
wait	help	progress	inherit

display

Diese Eigenschaft regelt die Stärke und die Art des "Besitzergreifens" von Boxen. Boxen kann man um alle Seitenelemente herum definieren ( vgl. die Seite über Abstände). Kompliziert wird die Sache dadurch, daß unterschiedliche Tags sich bezüglich der Box-Eigenschaften schon von Hause aus unterschiedlich verhalten (inline- und Block-Elemente - z.B. span und div).
Mögliche Werte sind: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group,table-column, table-cell, table-caption, none, inherit

Der große Test

folgt auf der Stelle.

<h2 style="display:run-in">Der große Test</h2><p> folgt auf der Stelle. </p>

float

Ein Seitenelement wird von nachfolgenden umflossen, typischerweise etwa ein Bild/Container von Text. Anzugeben ist, an welcher Seite left, right, none (=tu nix!) das umflossene Element liegen soll und wie breit width der ausgesparte Bereich sein soll. Die Höhe ergibt sich aus der Höhe des umflossenen Elements.

Bei der Breite des Pfeiles von 70 Pixeln ist hier eine width von 80px verlangt. damit der Text den Pfeil gefällig umfließt.
Der Aufruf lautet: <div style="width:25mm;float:left"> <img SRC="bilder/pfeil.gif" height=25 width=70> </div>
Bei der Breite ...

overflow

Festlegung darüber, wie mit Inhalten einer Box zu verfahren ist, die den Boxrahmen überschreiten (würden). Mögliche Werte sind: visible, hidden, scroll, auto, inherit.

overflow:visible

overflow:hidden

overflow:scroll

overflow:auto

overflow:inherit

Einträge nach dem Muster: <p style="background-color:#ddd; max-width:60px; overflow:visible">overflow:visible</p>

position

WICHTIG WICHTIG WICHTIG
Die Art der Positionierung von Seitenelementen wird mit Schlüsselwörtern bestimmt:

absolute positioniert ein Element relativ zum Elternelement, problematisch ist die Bestimmung dieses Elements.
fixed soll ein Seitenelement scrollresistent festhalten. Bei "kontinuierlichem Medium", dazu gehört der Bildschirm, erfolgt die Fixierung am Bildschirmpixel. Bei Druckseiten wird auf eine Seitenposition fixiert.
relative meint: Die Elementposition wird dem normalen Textfluß entsprechend bestimmt. Danach wird die angegebene Verschiebung berücksichtigt. Relativ also zu dem Punkt, wo sich das element normalerweise anordnen würde.
static bedeutet den Normalfall. left und top-Angaben haben keinen Sinn. Das Element wird in den normalen Fließtext eingebaut.
inherit setzt den geerbten Wert durch

Beispiel absolute:
Elternelement des folgenden <div style="position:absolute; left:0; top:0;"><img src="bilder/bluepnt.gif" width="14" height="14" border="0" alt="Punkt"></div> ist die Tabelle! Der hier positionierte Pfeil ziert die obere linke Ecke der Tabelle!

Beispiel fixed:
Egal, wo es erklärt wird:

fixed!

<div style="position:fixed; top:15px; left:15px; width:25px; height:25px;...">fixed! </div> ergibt das fixierte Fensterchen in der oberen linken Ecke des Bildschirms. Wenn es allerdings hier in der Tabelle erscheint, dann zickt bloß der Browser.
Beispiel relative:
Hier ist, um übersichtlich zu bleiben, nur eine kleine Verschiebung sinnvoll: <div style="position:relative; top:5px; left:5px;>verschoben!</div>verschoben! dann geht der normale Textfluß weiter.
Beispiel static:
Es folgt zum Testen: statisch! Der Code: <span style="position:static;font:italic 1.5em;color:#ff0088;">statisch!</span> und man sieht, dass man nichts sieht. Das <span>-Tag verhält sich wie immer - unauffällig, was den Textfluß angeht.

In Verbindung mit position
left:
top:
width:
min-width:

zulässig sind Zahlwerte oder auto, problematisch die Bezugspunkte.

Erläuterungen und Code siehe unten unter Punkt 6

visibility Möglich sind: visible, hidden, collapse, inherit. Theoretisch kann man hiermiet Seitenelemente verschwinden lassen und sie auf ein Event hin wieder erscheinen lassen. Da die Realisierung nach dem Vorschlag des W3C absolute Positionierungen verlangt, die diese Seite überfordern würde, gibt es ausnahmsweise eine Probierseite. Bitte testen!

width
min-width
max-width
height
min-height
max-height

Größenfestlegung für alle Platz beanspruchenden Seiten- bzw. Formularelemente wie img, input, textarea, select, object. Der Wert wird in Zahlwerten oder mit dem Schlüsselwort auto (Default-Wert) angegeben.

Dies sind ein Texteingabefeld, normal nur eine Zeile hoch und ein Button. Für letzteren ist -zum Testen- das an sich notwendige Size-Attribut entfallen. Die Größe wird allein über CSS bestimmt (oder auch nicht!). Der Code:

<form>

</form>

In Verbindung mit position:
z-index: Zahl, legt die Überlappung mehrerer absolut positionierter Seitenelemente fest, höchste Nummer für vorn Beispiel sind die drei Textbereiche im Kopf.
Vergleiche Erläuterung unten

Erläuterungen:

Die Seite enthält als normales Fließtextelement nur die Überschrift. Der Rest ist mittels div-Container auf der Seite fixiert.
Die drei bunten Felder im Kopfteil sind absolut positioniert. Probieren Sie sie ruhig bei verkleinertem Fenster oder anderer Bildschirmauflösung. Ich gebe den Code für den Aufruf kurz an:
<div style="position:absolute;top:100px;left:20px;width:340px;z-index:3; border:none;background-color:#ffdddd;padding:35px">
In CSS ist die Option ... anzuordnen.
</div>
<div style="position:absolute;top:200px;left:410px;width:340px;z-index:2; border:none;background-color:#aaffcc;padding:35px">
Die Positionierung ...abgegrenzt wurden.
</div>
<div style="position:absolute;top:450px;left:165px;width:450px;z-index:1; border:none;background-color:#cfddef;padding:35px">
Die wichtigsten Möglichkeiten, ... Tabelle:
</div>
Mit dem <div>-Tag abgegrenzt werden drei Textbereiche formatiert. Dabei erklären sich die meisten Angaben aus der Tabelle.
Bei der Definitionsreihenfolge würde der zweite Textbereich über dem ersten und der dritte als oberster erscheinen. Diese Reihenfolge wird durch die z-order-Angabe umgekehrt.
An sich müßte die große Tabelle nicht absolut positioniert werden. Aber als Fließtext würde die Tabelle hinter die bunten Felder rutschen und wäre nicht mehr so gut zu lesen. Um den Tabellencontainer sichtbar zu machen, hat er eine Grenze erhalten. Der Code für diesen Container lautet:
<div style="position:absolute;top:590px;padding:20px;margin:3%;border:1px dotted blue">
<table summary="......">
...
</div>
Zu float: Die Grafik ist ein normales, als Fließelement eingeordnetes Element. Der float:-Eintrag positioniert den Text relativ zur linken Bildkante der Grafik. Wenn der Abstandswert zu klein gewählt wird, wird hier ein default-Abstand gewählt.
Die Seite enthält, evtl. kaum zu sehen, in der linken oberen Ecke ein Testfeld, das "gefixed" ist. Der Code wird von unterschiedlichen Browsern unterschiedlich umgesetzt. Damit Sie Ihren Browser verstehen lernen, folgt der Code:
<div style="position:fixed;top:5px;left:5px;width:25px; height:25px;background-color:#330066;padding:10mm; font:italic 1cm;color:#ff0088;">
fixed!
</div>
Die Pfeilstaffeln sind sehr lehrreich.
Zum Festlegen eines Kunstwerkes innerhalb der Tabelle bedarf es genau einer static-Angabe. Meine Beispielzelle enthält zwei Kunstwerke. Das zweite ist mit einem <br /> von der ersten abgesetzt und mit einer Verschiebung 0,0 adressiert.
Wozu zwei Kunstwerke? Weil wir die Möglichkeiten genießen wollen. Zunächst soll nur die linke Kante variiert werden. Mit der Höhe soll nichts passieren. Der Code demnach:
<div style="position:static;left:0px;top:0">
  <img src="bilder/pfeil.gif" height="25" width="70">
</div>
<div style="position:relative;left:10px;top:0">
  <img src="bilder/pfeil.gif" height="25" width="70">
</div>
<div style="position:relative;left:20px;top:0">
  <img src="bilder/pfeil.gif" height="25" width="70">
</div>
<div style="position:relative;left:30px;top:0">
  <img src="bilder/pfeil.gif" height="25" width="70">
</div>
<div style="position:relative;left:40px;top:0">
  <img src="bilder/pfeil.gif" height="25" width="70">
</div>
Wie man sieht, bezieht sich die relative left-Verschiebung auf die erste, mit static-festgelegte linke Kante. Erscheint logisch. Eine Höhenverschiebung hatten wir nicht verlangt. Die Browser packen die Bilder untereinander, eineige genehmigen sich pro Bild noch einmal Pixel zusätzlich, zeigen deshalb eine Lücke zwischen den Bildern. Bezugsgröße für top ist also der Beginn des freien Raumes unterhalb des vorangegangenen Elements! Erscheint weniger logisch, wenn man es mit left vergleicht!
Versuchen wir nun, die Höhenverschiebung zu eliminieren. Das gelingt (oder auch nicht) mit der zweiten Staffel:
<div style="position:static;left:0px;top:0">
   <img src="bilder/pfeil.gif" height="25" width="70">
</div>
<div style="position:relative;left:10px;top:-25px">
  <img src="bilder/pfeil.gif" height="25" width="70">
</div>
<div style="position:relative;left:20px;top:-50px">
  <img src="bilder/pfeil.gif" height="25" width="70">
</div>
<div style="position:relative;left:30px;top:-75px">
  <img src="bilder/pfeil.gif" height="25" width="70">
</div>
<div style="position:relative;left:40px;top:-100px">
  <img src="bilder/pfeil.gif" height="25" width="70">
</div>
Warum ist die Zelle, in der sich die Beispiele befinden, so hoch? Warum erscheint der Text, der mit einem einfachen <br /> auf die Bildcontainer folgt, am unteren Zellenrand? Beim Laden der Seite werden die 10 Bilder alle fein gestapelt, wie HTML es tut, auf Kante, Kopf an Fuß. Die Zellengröße rührt von diesem Bilderstapel her. Erst danach beginnt die Positionierung.

Positionierung, Bemessung und Anzeige von Seitenelementen

Der große Test

Erläuterungen: