| Die Steuerung der Sichtbarkeit ist eine der grundlegend neuen Möglichkeiten von CSS gegenüber der 'alten' HTML-Syntax. | Sehen sie hier eine Live-Demonstration an einigen Beispielen. |
CSS
|
Cascading Stylesheets |
| visibility | Sichtbarkeit ohne Layout-Änderung |
| display | Sichtbarkeit mit Layout-Änderung |
| Steuerung | Live-Beispiele für die Steuerung der Sichtbarkeit (Links, Buttons, events) |
| Tabellen | Sichtbarkeit von Zeilen ein- oder ausschalten. |
visibility |
|
|
•
Die Eigenschaft style.visibility macht einen
beliebigen Teil der Webseite unsichtbar, ändert jedoch nichts am Layout. • Sie kann die beiden Werte visible oder hidden annehmen. • Standard (default) ist visible. Der veränderliche Teil ist hier durch einen Mustertext vertreten. Genauso kann man die Sichbarkeit von Bildern, Tabellen oder größeren Kapiteln ändern. Live-Demonstration von |
HTML-Quelltext
Text vorher.
<div id="v1" style="color:red;"> Das ist ein Mustertext.
</div>Text nachher. |
|
Zuerst muss man den gewünschten
→ DOM-Knoten
adressieren: Das geschieht hier mit Hilfe des HTML-Attributs id
und der Javascript-Methode getElementById() In der Objekt-Hierarchie folgt das Unter-Objekt style und die Eigenschaft visibility - sie wird hier verändert. Bei Bedarf kann man diese Eigenschaft auch lesen (im Beispiel abgeschaltet). ♦ Details zur Adressierung von DOM-Knoten und zum style-Objekt. |
Javascript:
n = document.getElementById("v1");
// v = n.style.visibility;
n.style.visibility = "hidden";
|
display |
|
|
•
Die Eigenschaft style.display macht unsichtbar,
das Element verschwindet und "macht Platz". • Sie kann die beiden Werte inline oder none annehmen. • Standard (default) ist inline. Der veränderliche Teil ist hier durch einen Mustertext vertreten. Genauso kann man die display-Eigenschaft jedes anderen Teils einer Webseite ändern. Live-Demonstration von |
HTML-Quelltext
Text vorher.
<div id="d1" style="color:red;"> Das ist ein Mustertext.
</div>Text nachher. |
|
Zuerst muss der gewünschte
DOM-Knoten adressiert werden:
Das geschieht hier mit Hilfe des HTML-Attributs id und der
Javascript-Methode getElementById In der Objekt-Hierarchie folgt das Unter-Objekt style und die Eigenschaft display - sie wird hier verändert. Bei Bedarf kann diese Eigenschaft auch gelesen werden. ♦ Details zur Adressierung von DOM-Knoten und zum style-Objekt. |
Javascript:
n = document.getElementById("d1");
// v = n.style.display;
n.style.display = "none";
|
Leider weisen Gecko-Browser (Firefox, Mozilla, ..) einen unangenehmen Fehler auf:
Die Sichtbarkeit von Tabellen-Zeilen <tr> kann
derzeit nicht umgeschaltet werden.♦ Details im Absatz Tabellen dieser Seite. |
Deshalb werden sie im nächstan Absatz nicht die Zeilen der Tabelle geschaltet, sondern nur deren Inhalte. |
|
Block
Die CSS-Anweisung display:block; erzwingt die
Darstellung des jeweiligen Elements als 'Block'. Das Element wird in diesem
Fall auf die gesamte verfügbare Breite (des Eltern-Elements) ausgedehnt,
so wie das für die Elemente <div> <p>
automatisch geschieht.XML verfügt ohne zusätzliche Maßnahmen (wie z.B. → XSL) nur über sehr geringe Möglichkeiten zur Formatierung. Mit display:block lassen sich → XML-Daten zeilenweise übersichtlich darstellen. HyperLinks
Manchmal wird gewünscht, ein Hyperlink-Element <a>
über die gesamte Fläche des Eltern-parent-Elements
auszudehnen.
|
Anwendung auf ein selbst definiertes
XML-Element <person> Jedes dieser Elemente wird in einer eigenen Zeile angezeigt:
<person style="display:block;">
Anna Zeppelin
</person><person style="display:block;"> Zacharias Alt
</person>
|
|
Anwendung auf Hyperlinks: • Die erste Zeile enthält einen normalen Hyperlink: Man muss den Text genauüberfahren, um den Link auszulösen. • Der Link der zweiten Zeile ist auf die ganze Breite des Eltern-Elements ausgedehnt und intuitiv leichetr zu bedienen.
<a>
Test
</a>
|
|
Inline-BlockDiese CSS-Anweisung ordnet mehrere Elemente in einem gemeinsamen (Zeilen)-Block an.Man verwendet sie u.a., um die Elemente einer Liste ul nicht wie üblich vertikal sondern horizontal anzuzeigen, z.B. für ein horizontal angeordnetes Navigations-Menü. |
Ein normales Listen-Element:
<li style="display:inline-block"></li>
|
Steuerung der Sichtbarkeit |
|
Steuerung mit HTML-HyperLinks:Durch Klick auf einen Link wird ein Teil der Webseite ein- oder ausgeblendet.Das lässt sich verwenden, um sehr kompakte Webseiten herzustellen: Am Anfang sind viele Teile unsichtbar - Sie werden nur auf Wunsch der AnwenderInnen eingeblendet (z.B. Hilfe-Texte). |
Klicken sie hier zur Demonstration:
<a href="javascript:test()">Ein</a>
|
Steuerung mit <button>s:Das HTML-Element <button> ist für den Einsatz als "Klickbutton" ideal geeignet und in allen gängigen Browsern verfügbar: |
Klicken sie hier zur Demonstration: |
Steuerung mit Ereignissen (Events):Im Absatz oberhalb (button) wird bereits das onclick-Ereignis demonstriert. Hier ein Beispiel für die Ereignisse onmouseover und onmouseout.♦ Details zu Events und ihrer Behandlung mit Javascript |
Bewegen sie den Mauszeiger über das Bild:
|
Tabellen und -Zeilen |
||||
|
Für viele Zwecke wäre es praktisch, die Sichtbarkeit einzelner
Zeilen einer Tabelle ein- oder auszuschalten. Leider weisen Gecko-Browser (Firefox, Mozilla, Netscape, ..) einen unangenehmen Fehler auf. |
Gecko-Fehler: Wenn mit display ganze
Tabellen-Zeilen <tr></tr>
ein- und ausgeblendet werden, dann bricht das Layout der Tabelle in den
meisten Fällen zusammen. Neuere Versionen reagieren besser, aber noch
nicht zufriedenstellend.
|
|||
|
Klicken sie, um die Sichtbarkeit von Zeile 2 der Tabelle rechts umzuschalten:
|
|
|||
|
Rechts der HTML-Code (vereinfacht). Durch Klick auf den Button testen sie die Änderung von style.display ♣ Damit das Layout nach dem Einschalten der Sichtbarkeit halbwegs funktioniert, kann man jede einzelne Tabellen-Zelle mit display:block formatieren. ♦ Details zu Tabellen |
HTML-Code einer Tabelle:
<table>
<tr><td>Zeile 1</td></tr>
</table>
<tr id="z2"><td style="display:block;" >Zeile 2</td></tr> <tr><td>Zeile 3</td></tr> |
|||
> Entwicklung
> CSS
> Sichtbarkeit
|
