Mastodon

renephoenix.de

CSS-Positionierung

Bei der Positionierung besteht folgendes Problem: In einer Seite tauchen an beliebigen Stellen kleine Hinweisschilder mit der Beschriftung »Mehr« auf. Beim Drüberfahren soll eine Box sichtbar sein, die weitere Angaben enthällt.

Die Breite soll dabei von dem urspünglichen Feld »Mehr« bis zum Seitenrand ausgedehnt werden (also keine feste Breitenangabe). Wenn nichts angeben ist, bzw. eine 100%ige Breite, erstreckt sich das Element über den allgemeinen Seitenrand hinaus, wie in der Grafik zu sehen ist:

Der HTML-Code sieht wie folgt aus:

normaler Text <div class="mehr">[mehr ...]<div class="text">Hier steht mehr</div></div> weiter mit normalen Text

Und die bisherige CSS-Datei:

.mehr{
 position:relative;
 display:inline;
}
.mehr .text {
 position:absolute;
 top:0px; left:0px;
 visibility:hidden;
 z-index:99;
 border:2px dashed #00008e;
}
.mehr:hover .text {
 visibility:visible;
}

Bisherige Kommentare (2)

Kommentar von Thiemo

Ich hatte mich damit beschäftigt, dann aber vergessen, zu antworten. Kurz: Ohne JavaScript ist das nicht möglich. Abgesehen davon ist diese Technik ohnehin fragwürdig: Das Wort »mehr« ist kein Link und damit für Tastatur- oder auch Screenreadernutzer nicht erreichbar. Auch Mausnutzer hätten Probleme, weil der Cursor auf einer nur wenige Pixel großen Fläche geparkt werden muss — sonst verschwindet der Text sofort wieder. Die mindeste Forderung wäre ein verzögertes Ausblenden, das wiederum nur mit JavaScript möglich ist.

Kommentar von Matthias

Aus dem div-Container ein a-Element zu machen sollte kein grosses Problem sein. Und das Argument der Grösse halte ich auch für etwas weit hergeholt. Das wäre nicht die erste Seite, die nur etwas Text oder ein einzelnes Wort »verlinkt«. Diese Art der Verlinkung existiert auf praktisch jeder Seite, dort gibt es nirgends das Argument der Grösse.
Der Cursor kann auch — wenn das Erklärungsfeld erstmal besteht — auf dem Feld selbst verweilen, ohne dass das Feld ausgeblendet wird, da es ein Kindelement des div-Elementes ist.
Die Screenreader sprechen für mich in erster Linie EBEN GERADE gegen Javascript, da diese mit Javascript wenig bis überhaupt nicht umgehen können.
Da ich es (nicht nur von mir selbst) kenne, dass viele Leute ohne Javascript surfen möchte ich auf jeden Fall auf Javascript verzichten.

Kommentar verfassen

Freiwillige Angabe
Freiwillige Angabe
Der Text kann mit Textile formatiert werden, z.B. *fett* _kursiv_ "link":url. Wie das geht?
Wieviel ist 40 plus 2?

Bisherige Trackbacks (0)

Es wurde noch kein Trackback empfangen!