header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Lembach's nichtkommerzielle Website rund um CMSimple_XH
Templates, Plugins, Tools, Programme
und Tips und Tricks die mir wichtig sind
Sie sind hier: Startseite > Tipps und Tricks zusammengetragen > Infobox im Textbereich über CSS einblenden

Infobox im Textbereich über CSS einblenden

Quelle: http://www.1ngo.de/web/infobox.html

Erklärungstexte können beim Überfahren eines Elements zwar über das title-Attribut angezeigt werden, jedoch ist dies nur für kurze Texte praktikabel, da diese nicht formatiert werden können und auch nur kurz eingeblendet werden. Eine Infobox mit formatiertem Inhalt kann über CSS auch ohne Verwendung von JavaScript angezeigt werden. Jedoch ist hierzu leider noch ein Link erforderlich, da der Internet-Explorer bis zur Version 6 die Pseudoklasse :hover nur auf dieses Element anwenden kann.
Die Positionierung der Infobox im Textbereich relativ zu dem aktivierenden Element ist allerdings nicht ganz einfach. Das Element relativ zu positionieren und dadurch als Basis für eine absolute Positionierung der Infobox zu nehmen scheidet aus, da dessen Position im Fließtext unbekannt ist und zu nahe am Fensterrand liegen könnte, so daß die Infobox teilweise außerhalb des sichtbaren Fensters positioniert würde.

Dies können AFAIK  alle modernen Browser interpretieren:

<style type="text/css">
  a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
  a.infobox:hover { cursor:help; color:#c30; background:white; }
  a.infobox span { visibility:hidden; position:absolute; left:-99em;
    margin-top:1.5em; padding:1em; text-decoration:none; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    visibility:visible; left:1em;
    border:1px solid #c30; color:blue; background:white; }
</style>
<!--[if IE 5]><style type="text/css">
  a.infobox span { display:none; }
  a.infobox:hover span { display:block; }
</style><![endif]-->

...
<p>Dies können <a class="infobox" href="#INFO">AFAIK<span> <b>Infobox:</b><br />
englisch für: 'As far as I know' ('soweit ich weiß')</span></a> alle modernen Browser interpretieren:</p>

Zur Unterscheidung von echten Verweisen erhält der Link die CSS-Klasse 'infobox' und wird mit einem gestrichelten unterem Rand formatiert; auch der im href-Attribut angegebene Anker sollte vorhanden und sinnvoll benannt sein, da er in der Statuszeile erscheinen wird. Im Zustand :hover wird für den Link ein weißer Hintergrund und ein Fragezeichen-Cursor definiert. Beachten Sie, daß mindestens eine dieser Änderungen erforderlich ist, damit der Internet Explorer die Infobox auch anzeigt; es würde sogar ausreichen, einem vorher mit background:#fff definierten Link background:#ffffff oder background:white zuzuweisen. ;-)

Der Inhalt der Infobox wird nach dem zu erklärenden Wort in ein weiteres inline-Element (<span>, sofern <dfn> nicht semantisch passender wäre) gesetzt und als 'unsichtbar' definiert.
Für die über ':hover' (und zur Tastaturbedienung ':focus' bzw. für den IE ':active') später 'sichtbar' gemachte Anzeige wird das Element absolut positioniert, wobei ich einen nicht ganz standardkonformen, aber funktionierenden Trick anwende: ich gebe über 'left:' den Abstand des Textbereichs zum linken Rand (vom <body> oder wie hier vom relative positionierten Elternelement) an und setze die Box über 'margin-top:' unter die aktuelle Zeile. Da keine Angabe zu 'top:' gemacht wurde, funktioniert das erfreulicherweise auch in allen modernen Browsern.

Ein weiterer Trick ist der Verzicht auf eine Breitenangabe. Eigentlich müßte die Box nun die gesamte noch verfügbare Breite einnehmen, aber nur standardkonforme Browser wie Mozilla setzen dies so um. Wenn allerdings der Text der Infobox an geeigneten Stellen über <br /> umgebrochen wird, ist das zweite Ziel erreicht: alle Browser geben der Box eine zum Inhalt passende Breite und gleiche 'padding'-Angaben bewirken einen einheitlichen Abstand zum Rahmen der Infobox.

Alle Browser? Leider benötigt der Internet Explorer 5.x noch display:block zur Anzeige der Infobox. Dies hat jedoch auch im IE 6 zur Folge, dass die Infobox bereits beim wiederholten anmausen des eigentlich noch unsichtbaren Anzeigebereichs erscheint. Daher sollte diese "Hilfe" nur dem IE 5.x gegeben werden, z.B. wie hier über einen 'conditional comment'.

Um in der Infobox Fließtext im Blocksatz anzuzeigen, ist außerdem eine Weite anzugeben. Erweitern Sie hierzu den obigen Code wie folgt:

a.infobox span { text-align:justify; width:20em; }

In meiner ersten Version dieser Infobox übersah ich leider, dass einem absolut positioniertem Element auch ohne display:block eine Breite zugewiesen werden kann.

Ingo Turski

 


| Seitenanfang |