SELFHTML/Navigationshilfen CSS Stylesheets CSS-Eigenschaften| SELFHTML/Navigationshilfen CSS Stylesheets CSS-Eigenschaften |
 |
Positionierung und Anzeige von Elementen |
|
|
 | |
Ab der CSS-Version 2.0 gibt es verschiedene Eigenschaften, um Elemente einer WWW-Seite exakt im Anzeigefenster des WWW-Browsers zu positionieren und die Position von Elementen untereinander genau zu kontrollieren. Dazu gehören Angaben zum absoluten und relativen Positionieren von Elementen, Angaben zur Ausdehnung von Elementen, Angaben zum Umfließen von Elementen und Angaben zum Überlappen und Anzeigen von Elementen.
Absolutes und relatives Positionieren von Elementen bietet Ihnen die Möglichkeit, das Erscheinungsbild von Web-Seiten stärker bildschirmorientiert zu gestalten. So können Sie für einzelne Bereiche festlegen, wo genau diese Bereiche beginnen sollen. Bereiche können sich überlappen usw. Im wesentlichen decken diese Style-Sheet-Angaben die Möglichkeiten der alten Netscape-
Layer ab. Im Gegensatz zu den Layern sind sie jedoch ein offizieller Vorschlag des W3-Konsortiums. Netscape und der Microsoft Internet Explorer interpretieren diese Angaben seit ihren 4er-Versionen - allerdings noch mit einigen Einschränkungen bzw. Besonderheiten.
Das Positionieren von Elementen ist eine wichtige Voraussetzung für viele Anwendungfälle von Danymischem HTML. Mit Hilfe entsprechender Script-Unterstützung können Sie positionierte Elemente bewegen, ein-/ausblenden, anders überlappen usw.
 |
position (Positionsart)Sie können für einen Bereich bestimmen, wie er positioniert werden soll.
Anzeigebeispiel: So sieht's aus
<html><head><title>position</title>
<style type="text/css">
<!--
body { }
#box1 { position:absolute; top:10px; left:10px; width:150px; height:150px; z-index:1; }
#box2 { position:absolute; top:40px; left:40px; width:100px; height:100px; z-index:2; }
#box3 { position:absolute; top:80px; left:50px; width:150px; height:150px; z-index:3; }
#box4 { position:absolute; top:40px; left:20px; width:70px; height:70px; z-index:1; }
#box5 { position:absolute; top:60px; left:10px; width:80px; height:80px; z-index:2; }
#box6 { position:absolute; top:20px; left:50px; width:90px; height:90px; z-index:-1; }
-->
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<div id="box1" style="background:red; border:solid 2px blue;">box1</div>
<div id="box2" style="background:blue; border:solid 2px white;">box2</div>
<div id="box3" style="background:yellow; border:solid 2px red;">box3
<div id="box4" style="background:gold; border:solid 2px green;">box4</div>
<div id="box5" style="background:lime; border:solid 2px navy;">box5</div>
<div id="box6" style="background:red; border:solid 2px blue;">box6</div>
</div>
</body></html>
|
Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:
absolute = absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.
fixed = absolute Positionierung, gemessen am Rand des Elternelements. Bleibt beim Scrollen stehen.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements. Wenn sonst kein Elternelement existiert, ist das body-Element das Elternelement. Die Angabe relative bezieht sich dagegen auf die Normalposition des Elements selbst.
Die Angabe position: legt noch nicht fest, wo genau ein Element beginnen soll. Die Angabe macht nur Sinn, wenn Sie zugleich die gewünschte Startposition angeben. Dies können Sie beispielsweise mit Angaben zur top oder left tun.
Wenn Sie also beispielsweise position:absolute; top:30px angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines Elternelements beginnt.
Wenn Sie position:relative; top:5px notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre.
Die Angabe fixed wird weder von Netscape noch vom MS Internet Explorer interpretiert.
Weder Netscape noch der MS Internet Explorer interpretieren Angaben zur absoluten Positionierung in allen HTML-Elementen. Um eine maximale Abwärtskompatibilität zu erreichen, ist es am besten, Angaben zur Positionierung auf das div-Element zu beschränken. Schließen Sie andere Elemente, etwa Textabsätze, Grafiken, Tabellen, Formulare usw. einfach in entsprechende div-Elemente ein.
Netscape und der MS Internet Explorer reagieren bei absoluter Positionierung unterschiedlich, was die automatische Breite von Elementen betrifft. Dieser Fall tritt ein, wenn Sie eine Angabe für left: notieren und nicht angeben, wie breit der so definierte Bereich sein soll. Netscape erstreckt das Element maximal bis zum rechten Fensterrand/Seitenrand, während der MS Internet Explorer es über den rechten Rand hinausdehnt (der Anwender muss quer scrollen). Bei relativer Positionierung reagieren beide Browser so wie der MS Internet Explorer bei der absoluten Positionierung. Um den Effekt zu vermeiden, können Sie z.B. Angaben zu width (Breite) des positionierten Bereichs machen.
|
|
top (Startposition von oben)Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von oben beginnt.
Anzeigebeispiel: So sieht's aus
<html><head><title>top</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; top:4.8cm"> <img src="hund.gif" width="208" height="181" alt="Hund" border="0"> </div> <div style="position:absolute; top:3.6cm; width:208px; background-color:#FFFFE0; border:1px solid #804000; padding:10px">Dies ist ein absolut positionierter Text über einer absolut positionierten Grafik.</div> </body></html> |
Mit top: können Sie die Startposition von oben bestimmen. Erlaubt ist eine 
numerische Angabe oder der Wert auto für eine automatische Positionierung.
|
|
left (Startposition von links)Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von links beginnt.
Anzeigebeispiel: So sieht's aus
<html><head><title>left</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; top:100px; left:100px;"> <img src="hund.gif" width="208" height="181" alt="Hund" border="0"></div> <div style="position:absolute; top:140px; left:350px; width:200px; background-color:#FFFFE0; border:1px solid #804000; padding:10px"> Dies ist ein absolut positionierter Text neben einer absolut positionierten Grafik.</div> </body></html> |
Mit left: können Sie die Startposition von links bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung.
|
|
bottom (Startposition von unten)Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von unten beginnt.
Anzeigebeispiel: So sieht's aus
<html><head><title>bottom</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; bottom:0px; left:100px;">Dies ist ein untenbündiger Hund:<br> <img src="hund.gif" width="208" height="181" alt="Hund" border="0"></div> </body></html> |
Mit bottom: können Sie die Startposition von unten bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung.
Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht.
|
|
right (Startposition von rechts)Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von rechts beginnt.
Anzeigebeispiel: So sieht's aus
<html><head><title>right</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; top:100px; right:0px;">Rechtsbündiger Hund:<br> <img src="hund.gif" width="208" height="181" alt="Hund" border="0"></div> </body></html> |
Mit right: können Sie die Startposition von rechts bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung.
Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht.
|
|
width (Breite)Sie können bestimmen, wie breit ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr Breite einnimmt als die hier angegebene Breite, können Sie zusätzlich die Eigenschaft overflow verwenden.
Anzeigebeispiel: So sieht's aus
<html><head><title>width</title> </head><body bgcolor="FFFFFF" text="#000000"> <h1 style="width:200px; overflow:hidden; border:1px solid red; padding:10px; font-size:36pt"> Eine Überschrift, die möglicherweise breiter ist als erlaubt</h1> </body></html> |
Mit width: können Sie die Breite bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für automatische Breite.
Dass im obigen Beispiel wo nötig in der Breite Text abgeschnitten wird, liegt nicht an der Eigenschaft width, sondern an der Angabe overflow:hidden. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht.
|
|
min-width (Mindestbreite)Sie können bestimmen, wie breit ein Element oder Bereich auf jeden Fall sein soll, auch wenn der Inhalt weniger Breite in Anspruch nimmt.
Anzeigebeispiel: So sieht's aus
<html><head><title>min-width</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; top:100px; left:100px; min-width:400px; border:solid 1px blue; padding:10px"> Fasse dich kurz!</div> </body></html> |
Mit min-width: können Sie die Mindestbreite bestimmen. Erlaubt ist eine numerische Angabe.
Der Internet Explorer 5.x interpretiert diese Angabe noch nicht.
|
|
max-width (Maximalbreite)Sie können bestimmen, wie breit ein Element oder Bereich maximal sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikelen Raum einnimmt als die hier angegebene Höhe, können Sie zusätzlich die Eigenschaft overflow verwenden.
Anzeigebeispiel: So sieht's aus
<html><head><title>max-width</title> </head><body bgcolor="FFFFFF" text="#000000"> <h1 style="max-width:250px; overflow:hidden; border:solid 1px green; font-size:36pt; padding:10px"> Eine Überschrift, bei das Wort 'möglicherweise' möglicherweise zu breit für 250px ist</h1> </body></html> |
Mit max-width: können Sie die Maximalbreite bestimmen. Erlaubt ist eine numerische Angabe.
Der Internet Explorer 5.x interpretiert diese Angabe noch nicht.
|
|
height (Höhe)Sie können bestimmen, wie hoch ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikelen Raum einnimmt als die hier angegebene Höhe, können Sie zusätzlich die Eigenschaft overflow verwenden.
Anzeigebeispiel: So sieht's aus
<html><head><title>height</title> </head><body bgcolor="FFFFFF" text="#000000"> <h1 style="height:100px; width:300px; overflow:hidden; border:1px solid red; padding:10px; font-size:36pt"> Eine Überschrift, die möglicherweise höher ist als erlaubt</h1> </body></html> |
Mit height: können Sie die Höhe bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für automatische Höhe.
Dass im obigen Beispiel wo nötig in der Breite Text abgeschnitten wird, liegt nicht an der Eigenschaft width, sondern an der Angabe overflow:hidden. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht.
|
|
min-height (Mindesthöhe)Sie können bestimmen, wie hoch ein Element oder Bereich auf jeden Fall sein soll.
Anzeigebeispiel: So sieht's aus
<html><head><title>min-height</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; top:100px; left:100px; min-height:200px; border:solid 1px blue; padding:10px"> Fasse dich kurz!</div> </body></html> |
Mit min-height: können Sie die Mindesthöhe bestimmen. Erlaubt ist eine numerische Angabe.
Der Internet Explorer 5.x interpretiert diese Angabe noch nicht.
|
|
max-height (Maximalhöhe)Sie können bestimmen, wie hoch ein Element oder Bereich auf jeden Fall sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikelen Raum einnimmt als die hier angegebene Höhe, können Sie zusätzlich die Eigenschaft overflow verwenden.
Anzeigebeispiel: So sieht's aus
<html><head><title>max-height</title> </head><body bgcolor="FFFFFF" text="#000000"> <h1 style="max-width:300px; max-height:300px; overflow:hidden; border:solid 1px green; font-size:36pt; padding:10px"> Eine Überschrift, die möglicherweise zu breit ist für eine Box von 300 mal 300 Pixeln</h1> </body></html> |
Mit max-height: können Sie die Maximalhöhe bestimmen. Erlaubt ist eine numerische Angabe.
Der Internet Explorer 5.x interpretiert diese Angabe noch nicht.
|
|
overflow (Elementbereich mit übergroßem Inhalt)Diese Angabe kann von Bedeutung sein, wenn Sie für ein Element oder einen Bereich eine feste oder maximale gewünschte Breite oder Höhe definieren. Angenommen, Sie definieren einen Bereich mit <div>...</div>, für den Sie mit Hilfe der Style-Sheet-Angabe width eine Mindestbreite von 200 Pixeln erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz (<img>) notieren, bei der das Bild eine Breite von mehr als 200 Pixeln hat, können Sie mit der hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lösen soll.
Anzeigebeispiel: So sieht's aus
<html><head><title>overflow</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; top:100px; left:100px; width:200px; height:150px; overflow:hidden; border:thin solid #804000"> abgeschnittener Hund:<br> <img src="hund.gif" width="208" height="181" alt="Hund" border="0"></div> </body></html> |
Mit overflow: können Sie bestimmen, wie übergroße innere Elemente behandelt werden. Folgende Angaben sind möglich:
visible = Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
hidden = Element wird abgeschnitten, wenn es die Grenzen überschreitet.
scroll = Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie in einem eingebetteten Framefenster.
auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.
Netscape 4.x kennt diese Eigenschaft nicht. Der Internet Explorer unterstützt die Angabe overflow:visible nicht.
|
|
direction (Richtung)Mit dieser Angabe können Sie die Schreibrichtung bei Elementen erzwingen, und abhängig davon auch, in welche Richtung beispielsweise Breitenangaben berechnet werden, oder an welcher Seite überbreite Inhalte mit overflow abgeschnitten werden. Die Schreibrichtung ist vor allem für die Darstellung von Schriftkulturen wie der arabischen gedacht, wo von rechts nach links geschrieben wird.
Anzeigebeispiel: So sieht's aus
<html><head><title>direction</title> </head><body bgcolor="FFFFFF" text="#000000" style="direction:rtl"> <h1>Hi Junkie!</h1> <p>Hier könnte möglicherweise alles anders aussehen als normal ...</p> </body></html> |
Mit direction: können Sie die Schreibrichtung bestimmen. Folgende Angaben sind möglich:
ltr = von links nach rechts.
rtl = von rechts nach links.
Die Browser der 4er-Generation interpretieren diese Angabe noch nicht.
|
|
float (Textumfluss)Sie können für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.
Anzeigebeispiel: So sieht's aus
<html><head><title>float</title> </head><body bgcolor="FFFFFF" text="#000000"> <h1 style="width:400px; float:left; color:red">Überschrift mal anders</h1> <p style="font-size:120%">Ein Überschrift muß nicht immer einen langweiligen, über die ganze Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal seitlich vom Text stehen, und der Text fließt um die Überschrift. Auch so kann man lange Texte mal anders gestalten als sonst üblich.</p> </body></html> |
Mit float: können Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen. Folgende Angaben sind möglich:
left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
none = Kein Umfluss (Normaleinstellung).
Wenn Sie für ein Element eine Angabe zu float notieren, müssen Sie auch eine Angabe zu width definieren.
|
|
clear (Fortsetzung bei Textumfluss)Wenn Sie mit float einen Textumfluss definieren, möchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben einem umflossenen Element haben und den folgenden Text dann unterhalb des umflossenen Elements fortsetzen. Dazu dient die hier beschriebene Angabe.
Anzeigebeispiel: So sieht's aus
<html><head><title>clear</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="float:left; margin-right:20px; margin-bottom:20px; border:solid 1px red; text-align:center"> Kapitel<br> <span style="font-family:Algerian,serif; font-size:72pt; color:red"> 1 </span></div> <p style="font-size:120%">In diesem Kapitel geht erst mal um Einführendes</p> <p style="clear:left">Dann kommen wir mal zur Sache: ...</p> </body></html> |
Mit clear: können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. Folgende Angaben sind möglich:
left = Erzwingt bei float:left die Fortsetzung unterhalb.
right = Erzwingt bei float:right die Fortsetzung unterhalb.
both = Erzwingt in jedem Fall die Fortsetzung unterhalb.
none = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).
Im obigen Beispiel werden die Eigenschaften float und clear dazu genutzt, eine seitliche, große Kapitelnummer zu notieren, neben der Kapitelnummer einen kleinen Text, worum es in dem Kapitel geht, und unterhalb dieser beiden Elemente dann den normalen Text des Kapitels.
|
|
z-index (Schichtposition bei Überlappung)Diese Angabe ist sinnvoll in Verbindung mit mehreren Angaben zu position. Wenn Sie mehrere Elemente absolut positionieren, deren Anzeigebereiche sich überlappen, werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Elemente Nummern vergeben. Elemente mit höherer Nummer überdecken Elemente mit niedrigerer Nummer.
Anzeigebeispiel: So sieht's aus
<html><head><title>z-index</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; top:100px; left:100px; z-index:1; border:thin solid #804000;"> <b>1.</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div> <div style="position:absolute; top:130px; left:150px; z-index:4; border:thin solid #804000;"> <b>2.</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div> <div style="position:absolute; top:160px; left:200px; z-index:2; border:thin solid #804000;"> <b>3.</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div> <div style="position:absolute; top:190px; left:250px; z-index:3; border:thin solid #804000;"> <b>4.</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div> </body></html> |
Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne das Element, je niedriger, desto weiter hinten das Element.
Im obigen Beispiel wird vier mal der gleiche Bereich erzeugt - mit einem transparenten GIF-Bild als Inhalt. Die Bereiche überlappen sich aufgrund ihrer Angaben zur Positionierung und den Ausmaßen des Bildes. Normalerweise überlagert der letzte notierte Bereich alle anderen, da er als letzter notiert ist. Im Beispiel überlagert jedoch der zweite Bereich alle anderen, weil er die höchste z-index-Nummer erhält.
|
|
display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Ohne Platzhalter" bedeutet, dass bei Nichtanzeige des Elements auch kein Raum für das Element reserviert wird. In diesem Fall deutet bei der Anzeige also zunächst nichts darauf hin, dass das Element überhaupt existiert. Mit Hilfe von Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.
Ferner können Sie mit der hier beschriebenen Angabe bestimmen, wie ein Element angezeigt werden soll. Sie können bestimmen, dass es einen eigenen (absatzerzeugenden) Block bilden soll, oder dass es mitten im Text (inline) angezeigt werden soll. So können Sie beispielsweise absatzerzeugende Elemente wie Überschriften in Elemente umdefinieren, die keinen eigenen Absatz erzeugen.
Anzeigebeispiel: So sieht's aus
<html><head><title>display</title> </head><body bgcolor="FFFFFF" text="#000000"> <h1 style="display:inline">Ich bin ein inline-Element</h1> <p style="display:inline">Dieser Text beweist es!</p> <h1 id="versteckt" style="display:none">Ich bin ein Blockelement, werde aber nicht angezeigt</h1> <p>Und dieser Text tut so als ob sonst nichts wäre!</p> </body></html> |
Mit display: können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen. Folgende Angaben sind möglich:
block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor.
marker = deklariert automatisch generierten Text für das Element.
run-in und compact = bewirken, dass das Element kontext-abhängig als Blockelement oder als Inline-Element dargestellt wird.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.
Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache übernehmen, mit deren Hilfe die XML-Daten angezeigt werden. In CSS hat man die display-Eigenschaft zu diesem Zweck auserkoren. Folgende Angaben sind in diesem Zusammenhang möglich:
table = Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML.
inline-table = Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline.
table-row = Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML.
table-row-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML.
table-header-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das thead-Element in HTML.
table-footer-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tfoot-Element in HTML.
table-column = Das Element steht für eine Gruppe von Elementen, die eine Spalte der Tabelle bilden. Wirkt wie das col-Element in HTML.
table-column-group = Das Element steht für eine Gruppe von Elementen mit der Eigenschaft table-cell. Das Element steht für eine Tabellenzelle. Wirkt wie das td-Element in HTML (auch für th-Elemente).
table-caption. Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML (auch für th-Elemente).
Anzeigebeispiel: So sieht's aus
<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<div class="table">
<div class="tr">
<div class="td">ich</div>
<div class="td">bin</div>
<div class="td">eine</div>
<div class="td">Tabelle</div>
</div>
</div>
</body></html>
|
Das Beispiel definiert Klassen für div-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus div-Elementen mit class-Attributen zusammengebaut.
Netscape 4.0 und der MS Internet Explorer 4.0 interpretieren die Angabe display:none korrekt. Die übrigen Angaben werden von der 4er-Versionen der beiden Browser jedoch nur unvollständig oder noch gar nicht interpretiert. Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer 5.x noch nicht.
|
|
visibility (Anzeige bzw. Nichtanzeige mit Platzhalter)Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Mit Platzhalter" bedeutet, dass bei Nichtanzeige des Elements trotzdem Raum für das Element reserviert wird. Mit Hilfe von Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.
Anzeigebeispiel: So sieht's aus
<html><head><title>visibility</title>
<script language="JavaScript" type="text/javascript">
<!--
function show() {
if(document.getElementById)
document.getElementById("Ueberschrift").style.visibility = "visible";
}
//-->
</script>
</head><body bgcolor="FFFFFF" text="#000000">
<h1 id="Ueberschrift" style="visibility:hidden">Die Überschrift zum Text</h1>
<p>Hier der Text. Aber fehlt da nicht was?</p>
<p><a href="javascript:show()">Anzeigen!</a></p>
</body></html>
|
Mit visibility: können Sie bestimmen, ob ein Element anfangs angezeigt wird oder nicht. Folgende Angaben sind möglich:
hidden = Der Inhalt des Element wird zunächst versteckt (nicht angezeigt).
visible = Der Inhalt des Element wird zunächst angezeigt (Normaleinstellung).
Im obigen Beispiel wird die Überschrift zunächst nicht angezeigt. Beim Anklicken des Verweises wird dies jedoch dynamisch nachgeholt. Auf die dazu erforderlichen JavaScript-Befehle wird an dieser Stelle nicht näher eingegangen.
|
|
clip (Anzeigebereich eingrenzen)Sie können bestimmen, dass nur ein Ausschnitt eines Elements sichtbar angezeigt wird, unabhängig davon, welche Angaben sonst zur Größe des Elements gemacht wurden und unabhängig von der automatischen Größe des Elements. Wenn das Element größer ist als so definierte Anzeigebereich, wird es an den Seiten entsprechend abgeschnitten. Derzeit können Sie nur ein Rechteck für den Ausschnitt definieren. In Zukunft sollen jedoch auch Polygone, Kreise bzw. Ellipsen möglich sein.
Anzeigebeispiel: So sieht's aus
<html><head><title>clip</title> </head><body> <div style="position:absolute; top:100px; left:100px; clip:rect(0px 130px 130px 0px);"> Etwas Hund:<br> <img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div> </body></html> |
Mit clip: können Sie einen Ausschnitt für die sichtbare Anzeige definieren. Dahinter folgt der Bezeichner rect (für rectangle, = Rechteck), und dahinter, in runde Klammern eingeschlossen, vier numerische Werte oder das Schlüsselwort auto zur Bestimmung des Ausschnitts.
Der erste der vier Werte bezeichnet den Wert für "oben", gemessen an der oberen Elementgrenze
Der zweite der vier Werte bezeichnet den Wert für "rechts", gemessen an der linken Elementgrenze
Der dritte der vier Werte bezeichnet den Wert für "unten", gemessen an der oberen Elementgrenze
Der vierte der vier Werte bezeichnet den Wert für "links", gemessen an der linken Elementgrenze
Damit überhaupt ein Ausschnitt sichtbar ist, muss der Wert für "unten" größer sein als der für "oben" und der Wert für "rechts" größer als der für "links". Das Schlüsselwort auto bedeutet: keine Angabe zu dem betreffenden Wert, das Element soll an der entsprechenden Seite bis zu seiner Elementgrenze angezeigt werden.
Sowohl bei Netscape also auch beim Internet Explorer war die clip-Eigenschaft nur im Zusammenhang mit absolut positionierten Elementen nachvollziehbar.
|
| |
 |
Layouts für Printmedien
|
 |
Pseudoformate
|
| SELFHTML/Navigationshilfen CSS Stylesheets CSS-Eigenschaften |
© 2001 
selfhtml@teamone.de