Hypertext Talk

Alles über die Darstellung von Inhalten in Browsern im dreidimensionalen Raum

Im dreidimensionalen Raum ?
Nicht nur Anfängern auf dem interessanten Gebiet der Webentwicklung sondern auch vielen Fortgeschrittenen erscheinen die Regeln für die Darstellung auf der imaginären z-Achse verwirrend.
Im folgenden erklären wir die Begriffe
stacking-context und
z-index
und deren Zusammenhang.

Stacking-context:

Ein Browser muß eine Regel haben wie er Inhalte darstellt. Bei der Menge an möglichen containern und tags die bei dem Bau einer Internetseite zum Einsatz kommen und bei deren Verflechtung mit- und untereinander ist es ja nicht selbstverständlich, dass alles so dargestellt wird, dass nichts überdeckt wird, es sei denn wir möchten es.
Folgend erklären wir also zuerst einmal in welcher Reihenfolge bezogen auf die imaginäre z-Achse Inhalte dargestellt werden
und zwar ohne die Angabe eines z-index im CSS.

weiterlesen »

Tooltips wirklich nur mit CSS

Viel kann man im Internet lesen über Tooltips die nur mit CSS realisiert werden.
Vielen der Beschreibungen und Ideen fehlt jedoch eine Tiefenbetrachtung und es wird oft auch nicht auf Browser-Kompatibilität geachtet.

So wird z.B. der stacking-context nicht erklärt und bei sich überlagernden Tooltips kommt es somit zu Problemen (insbes. in IE7).
Auch gibt es ein Problem bei erzwungenen Zeilenumbrüchen in IE7 das geklärt und gelöst werden muß und kann.

Hier wurde versucht eine mehr oder weniger umfangreiche Dokumentation zu erstellen, deren Ergebnis sich auf einer XHTML-Seite wiederfindet.
Einen kleinen Vorgeschmack bekommen Sie wenn Sie mit Ihrer Maus auf den Link zu dieser Abhandlung gehen:
CSS Tooltips erklärt interner Link, öffnet sich in diesem Tab oder Fenster

Tooltips sind beliebt um kleine Zusatzinformationen an den Besucher einer Internetseite zu geben, sei es eine Begriffserklärung oder eine Erklärung zu einem Link.

weiterlesen »

Wie berechnet man Prozentangaben für Hintergrundbilder

In der folgenden Abhandlung soll die Positionierung von Hintergrundbildern mit der CSS Eigenschaft background-position beleuchtet werden.
Insbesondere die Bestimmung der Position mit Hilfe von Prozentangaben werden wir behandeln.

Die zugelassen Werte für die Positionierung sind
Wortbezeichnungen - left, right, top, bottom -
Grössen- bzw. Längenangaben - px, em , pt -
oder eben Prozentangaben - x% - .
Auch Kombinationen der verschiedenen Möglichkeiten sind erlaubt mit Ausnahme von folgender:
Wortbezeichnung (s.o.), auch Schlüsselwort genannt, in Verbindung mit einer Prozentangabe.
Bei der Positionsangabe der background-position werden zwei Werte angegeben.
Insofern es sich nicht um eine Wortbezeichnung handelt, welche ja für sich spricht, gibt der erste Wert die horizontale, der zweite Wert die vertikale Position an.
Die Referenz des Bildes ist immer die linke obere Ecke desselben.

Nun stellt sich die Frage warum eine so einfache Sache von mir einer Abhandlung für würdig befunden wurde.
Ganz einfach: Die Positionierungsangabe in Prozent ist gar nicht so einfach und hat ihre Tücken.
Es ist nämlich nicht nur die Grösse des das Hintergrundbild bergenden Containers sondern auch die Grösse des Hintergrundbildes selbst von Wichtigkeit bei der Berechnung.

weiterlesen »