unterstützt die Werte
inherit
und
collapse
nicht.
14.13.2 Content-Modelle von Elementen umdefinieren
Die
display
-Eigenschaft hat noch mehr Aufgaben, als nur zwischen »Element anzeigen« und »nicht anzeigen« zu wechseln. Das ist schon an den beiden möglichen Angaben
block
und
inline
deutlich geworden. Die Eigenschaft erlaubt es letztlich, das Content-Modell von Elementen umzudefinieren. Dazu steht eine ganze Reihe von Möglichkeiten zur Verfügung.
Folgende Angaben sind insgesamt 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.
•
inline-block
erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden können, belässt das Element jedoch im laufenden Textfluss – ähnlich einem »inline replaced element« wie
img
. Dieser Wert wird erst mit CSS 2.1 eingeführt.
•
list-item
erzeugt die gleiche Wirkung wie
block
, jedoch mit einem Aufzählungszeichen (Bullet) davor.
•
run-in
bewirkt, dass das Element kontextabhängig als Block-Element oder als Inline-Element dargestellt wird.
•
none
unterdrückt die Anzeige des Elements. Es wird auch kein Platzhalter freigelassen.
In CSS 2.0 waren noch die folgenden Werte vorgesehen, die wegen mangelnder Browserunterstützung in CSS 2.1 nicht übernommen wurden. In CSS3 werden sie jedoch wieder mit aufgenommen:
•
marker
sollte automatisch generierten Inhalt für das Element deklarieren.
•
compact
sollte wie
run-in
bewirken, dass ein Element kontextabhängig als Block-Element oder als Inline-Element dargestellt wird.
Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu
display
zur Verfügung. Gedacht sind sie 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 zu
display:
sind in diesem Zusammenhang möglich:
•
table
macht ein Element zu einem Element, das dem
table
-Element in HTML entspricht.
•
inline-table
wirkt wie das
table
-Element in HTML, aber inline.
•
table-row
macht ein Element zu einem HTML-
tr
-Element.
•
table-cell
macht Elemente zu HTML-
th
und -
td
-Elementen.
•
table-row-group
macht ein Element zu einem HTML-
tbody
.
•
table-header-group
macht ein Element zu einem HTML-
thead
-Element.
•
table-footer-group
macht ein Element zu einem HTML-
tfoot
-Element.
•
table-column
macht ein Element zu einem HTML-
col
-Element.
•
table-column-group
macht ein Element zu einem HTML-
colgroup
-Element.
•
table-caption
macht ein Element zu einem HTML-
caption
-Element.
Beispiel
Titel Bild 14.41: div-Elemente als Tabelle
Erläuterung
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.
14.14 Layer-Technik und Transparenz
Durch Positionierung oder auch durch negative Abstände wie z. B.
margin-top:
-100px
ist es möglich, Elemente ganz oder teilweise übereinander anzuordnen.
Bild 14.42: Transparente HTML-Elemente mit teilweiser Überlappung
Sichtbare HTML-Elemente sind normalerweise per Voreinstellung transparent. Überschneiden sich Inhalte solcher Elemente, zeigt sich ein ähnlicher Effekt, wie er in der Abbildung zu sehen ist. Anders wird es, wenn CSS-Hintergrund-Definitionen
Kostenlos Online Lesen 
