XHTML SVG CSS PHP

Dr. O. Hoffmann

CSS-Layout

Man sollte immer ehrlich spielen, wenn man die Trümpfe in der Hand hat.
Oscar Wilde

Aufklapptricks

Das Pseudoformat :hover wird in Kombination mit der Eigenschaft display immer wieder gerne verwendet, um Teilbereiche einer Seite zunächst nicht anzuzeigen (display: none) - einige Leute nennen das auch 'rollover'-Effekt. Erst wenn die Maus sich über einem bestimmten Bereich befindet (:hover), so wird der Inhalt an beliebiger Stelle angezeigt (display: block). Der zu überfahrende Bereich ist dabei ein (X)HTML-Element, in dem sich der dynamisch anzuzeigende Bereich als eigenes (X)HTML-Element befindet.

Ältere Darstellungsprogramme einschließlich aller microsoft internet-explorer bis Version 6 sind oft nicht in der Lage, das Pseudoformat :hover in vollem Umfange zu interpretieren. Durch einen Trick sollte dafür gesorgt werden, daß diese Programme den Inhalt statisch anzeigen. Am einfachsten ist es, dazu einen alternativen Stil auswählbar zu machen, der kein Pseudoformat :hover verwendet. Eine weitere Möglichkeit besteht darin, alles sichtbar zu lassen, solange sich kein Zeigergerät über dem gesamten Dokument befindet, die gewünschten Dinge nur einzuklappen, wenn sich ein Zeigergerät über dem Dokument befindet und dann mit dem :hover beim gewünschten Element wieder aufzuklappen.

Wenn in dem aufklappenden Bereich Verweise untergebracht sind, etwa wie in einem Menü, muß dieser Bereich natürlich mit dem mit :hover angesprochenen in Verbindung stehen, damit die Verweise überhaupt erreichbar sind. Das Problem der Erreichbarkeit kann besonders auftreten, wenn der aufklappende Bereich positioniert wird und dabei kein Überlapp gewährleistet wird. Im Beispiel ist das der letzte Listenpunkt, bei dem daher der Inhalt anders angeordnet wird als der fixed-positionierte der anderen Punkte. Spannend wird es bei diesem Aufklappen, wenn der Anzeigebereich eine geringere Höhe hat als der Aufklappbereich, denn ein Rollen ist nur möglich, wenn der Bereich selbst Rolleisten erhält.

Beispiel: CSS-Aufklappliste (pures CSS-'popup')

:hover-Liste als zugängliche verweissensitive Graphik oder ein sensitiver Bereich als Ersatz für 'image-maps'

Durch das Pseudoformat :hover können aus Listen ebenfalls sehr elegante und flexible verweissensitive Graphiken konstruiert werden, die im Gegensatz zu 'image-maps' auch zugänglich bleiben und bei deaktiviertem CSS als ganz normale Listen erscheinen. Nicht nur Verweise können so realisiert werden sondern auch das Einblenden beliebiger Informationsblöcke.
Beispiel 1 zeigt nun einen div-Bereich, der absolut positioniert ist. Das eignet sich also besonders für singuläre Lösungen auf Einzelseiten. Die damit erkauften Vorteile liegen darin, daß das absolut positionierte div-Element einen neuen Anzeigebereich aufmacht, sich also die Koordinaten der darin befindlichen Elemente relativ auf dieses Element beziehen. Mittels position: fixed ist es aber immer noch möglich, aus diesem Anzeigebereich zu entkommen und relativ zum Anzeigebereich zu positionieren.
Ähnliches wäre mit einer fixed-Positionierung zu erreichen oder mit einer relativen Positionierung, wie es im zweiten Beispiel realisiert ist - Vorteil hier ist, daß der div-Bereich immer noch mit dem sonstigen Inhalt mitfließt, die Absolutangaben für eingeschlossene Elemente sich aber nach wie vor auf die Koordinaten dieses Bereiches beziehen - das eignet sich also besonders, wenn der sonstige Aufbau der Seite so komplex ist, daß eine Absolutpositionierung des Bereiches nur schwierig sinnvoll vorauszuberechnen ist. Da offenbar der Konqueror (Version 3.2) durcheinander gerät, wenn in einem relativ positionierten Elemente nochmal was relativ positioniert wird und dann noch mit :hover eingeblendet wird, habe ich die inneren Positionierungen hier bei absolut gelassen - da ist das Ergebnis ohnehin leichter nachzuvollziehen.
Beim dritten Beispiel ist die XHTML-Datei mit den :hover-Effekten mittels des Elementes object eingebunden. Das hat den Vorteil, daß die CSS-Eigenschaften dieses Bereiches komplett getrennt vom Rest definiert werden können, aber auch den Nachteil, daß der Anzeigebereich auf das Element object beschränkt bleibt, auch für position: fixed.
In jedem Falle ist darauf zu achten, daß mittels :hover sichtbar gemachte Teile der Seite nicht über eine plausible Größe des Anzeigebereiches überstehen, weil sie sonst leicht für den Nutzer unzugänglich werden.

Beispiel 1: sensitiver Bereich, absolut positioniert
Beispiel 2: sensitiver Bereich, relativ positioniert
Beispiel 3: sensitiver Bereich als Objekt eingebunden

Es geht natürlich auch umgekehrt - beim Drüberfahren über eine Liste werden Informationen und andere oder zusätzliche Bilder eingeblendet und Stellen in Bildern markiert:
Beispiel 4: Informationen, Bilder und Markierungen einblenden

Das Beispiel zeigt allerdings auch, daß Nutzer mit kleinen Monitoren mit solch komplexen Anwendungen leicht in Schwierigkeiten gebracht werden können. Um zu zeigen, was bei alten browsern passiert, habe ich hier einmal auf die entsprechende Kompensation verzichtet. Programme ohne CSS werden gar keine Bilder anzeigen - die so vermittelte Bildinformation ist also eher als dekorativ und optional einzustufen.