Anzeige-Steuerung von Elementen

Mit Hilfe von CSS können Sie auch bewirken, dass Elemente samt Inhalt und untergeordneten Elementen überhaupt nicht angezeigt werden, oder explizit angeben, dass sie angezeigt werden. Gedacht ist dies vor allem für das Zusammenspiel mit Scripting. Ferner können Sie das Content-Modell von Elementen umdefinieren. So können Sie beispielsweise aus Überschriften Phrasing-Elemente (Inline-Elemente) machen, die sich auch so verhalten.

Sichtbarkeit von Inhalten

Es gibt insgesamt zwei CSS-Eigenschaften, um Elemente unsichtbar oder sichtbar zu machen: display und visiblity. Dabei ist display die allgemeinere Eigenschaft, die auch andere Aspekte der Anzeige-Steuerung abdeckt. Es gibt jedoch auch einen wichtigen optischen Unterschied zwischen beiden Eigenschaften. Was Sie mit display unsichtbar machen, wird vollständig aus dem sichtbaren HTML-Output entfernt. Was Sie dagegen mit visibility unsichtbar machen, hinterlässt einfach nur einen Leerraum in dem Erstreckungsraum, den das Element normalerweise einnehmen würde.

Das nachfolgende Beispiel verwendet JavaScript, um die Möglichkeiten der beiden Eigenschaften zu demonstrieren. Auf das JavaScript wird in den Erläuterungen jedoch nicht weiter eingegangen.

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function toggle_display(elem_id, mode) {
   if(document.getElementById(elem_id)) {
      var display = document.getElementById(elem_id).style.display;
      if(display == "block" || display == "inline") {
         document.getElementById(elem_id).style.display = "none";
         return;
      }
      if(display == "none") {
         document.getElementById(elem_id).style.display = mode;
         return;
      }
   }
}
function glossar() {
   document.getElementById('glossar').style.visibility = "visible";
   document.getElementById('glossarlink').style.display = "none";   
}
</script>
<title>Titel</title>
</head> 
<body>
 
<h1>Glossar</h1>
<p id="glossarlink">
<a href="javascript:glossar();">Glossar anzeigen</a>
</p>
<dl id="glossar" style="border: solid 4px silver; border-radius: 9px;
font-size: 110%; padding: 9px; visibility: hidden">
<dt><a href="javascript:toggle_display('webauftritt', 'block');">
Webauftritt</a></dt>
<dd id="webauftritt" style="display: none;">Die Begriffe Webauftritt
und Webpräsenz stammen aus der kommerziellen Welt und werden immer
dann gebraucht, wenn es um Seiten mit Präsentationscharakter geht,
also um Unternehmensporträts, Informationsseiten zu Messen oder
Großveranstaltungen usw.</dd>
<dt><a href="javascript:toggle_display('webdesigner', 'block');">
Webdesigner</a></dt>
<dd id="webdesigner" style="display: none;">Ein Webdesigner entwirft
und erstellt Webseiten. Dabei umfasst sein Aufgabengebiet jedoch
weniger das Erstellen von Inhalten als vielmehr das Umsetzen von
Layoutvorstellungen. Von Fall zu Fall gehört auch das Verteilen von
Information auf verschiedene Seiten sowie das Verlinken von Seiten
zu seinen Aufgaben.</dd>
<dt><a href="javascript:toggle_display('weblog', 'block');">
Weblog</a></dt>
<dd id="weblog" style="display: none;">auch: »Blog«. Steht für
»Web-Tagebuch«, wobei auch weniger privat klingende Begriffe wie
»Logbuch«, »Jahrbuch«, »Journal« und »Chronik« mitschwingen. Blogs
sind vorrangig autorenorientiert und werden meist von Privatpersonen
oder Unternehmen betrieben.</dd>
</dl>
<footer>
<p>Das Glossar wurde Ihnen präsentiert von GlossyPossy</p>
</footer>
</body>
</html>

Zustand 1 des Sichtbarkeitsbeispiels - visibility

Zustand 2 des Sichtbarkeitsbeispiels - display: none

Beispiel-Zustand 3 des Sichtbarkeitsbeispiels - display: block

Erläuterung

Nach dem Laden des Beispiel-HTML-Dokuments wird dieses so angezeigt wie in der ersten der drei Abbildungen zu sehen. Unterhalb der Überschrift ist ein Link mit dem Text Glossar anzeigen notiert. Darunter ist ein größerer Leerraum, bevor der Inhalt des Footer-Bereichs folgt. Der Leerraum entsteht dadurch, dass das Glossar selbst, die dl-Liste, zunächst verborgen ist, und zwar mit visibility: hidden;. Diese Angabe bewirkt, dass der Raum, den das Element normalerweise einnehmen würde, als Leerraum dargestellt wird.

Klickt der Anwender den Link Glossar anzeigen an, wird der Link selbst mittels Scripting ausgeblendet, und zwar mit display: none;, wodurch er ohne Leerraumersatz verschwindet. Stattdessen wird nun der Zustand sichtbar, der in der zweiten Abbildung zu sehen ist. Das Glossar ist so gestaltet, dass die dt-Elemente sichtbar sind. Die zugehörigen Definitionen in den dd-Elementen sind dagegen mit display: none; auf unsichtbar ohne Platzhalterleerraum gesetzt. Die Glossar-Begriffe in den dt-Elementen bestehen aus Hyperlinks. Klickt der Anwender einen der Hyperlinks an, wird das zugehörige dd-Element mittels Scripting eingeblendet. Genauer: dessen display-Eigenschaft wird mittels Scripting auf "block" gesetzt. Dadurch wird das dd-Element als Blockelement angezeigt, so wie im dritten Bild zu sehen. Ein weiterer Klick auf den zugehörigen Link blendet die Definition übrigens wieder aus. Mit den übrigen Glossareinträgen funktioniert das genauso.

Mit visibility: können Sie bestimmen, ob ein Element mit Platzhalterleerraum angezeigt wird oder nicht. Mögliche Wertzuweisungen sind die Schlüsselwörter visible (der Inhalt des Element wird angezeigt = Normaleinstellung) oder hidden (der Inhalt des Element wird nicht angezeigt).
Ferner gibt es noch die Angabe collapse. Diese ist speziell für Tabellen gedacht. So ausgezeichnete Spalten oder Reihen einer Tabelle werden versteckt und geben den zuvor benötigten Platz frei. Auf alle anderen Elemente wirkd collapse so wie hidden.

Mit display: können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen. Zu den möglichen Wertzuweisungen gehören unter anderem die Schlüsselwörter none (Element ist unsichtbar ohne Leerraum), block (Element wird sichtbar als Blockelement angezeigt) und inline (Element wird sichtbar als Inline-Element angezeigt).

Referenzinformationen

  • display
CSS1.0 MSIE FFOX CHROME SAF OP
  • visibility
CSS2.0 MSIE FFOX CHROME SAF OP

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 stehen 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 kann, 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 wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor.
  • run-in bewirkt, dass das Element kontext-abhä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 kontext-abhä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 eine Element zu 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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.table {
   display: table;
   border-collapse: collapse;
}
div.tr {
   display: table-row;
}
div.td {
   display: table-cell;
   border: thin solid red;
   padding: 5px;
}
</style>
<title>Titel</title>
</head> 
<body>
 
<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>

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.

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License