nicht angemeldet
Hallo Tim,
Im CSS 2 wird eindeutig definiert, daß Benutzeragenten bei den
:before und :after-Pseudo-Elementen eindeutig mehrere CSS-Eigenschaften
ignorieren müssen, so auch das zu genauerer Positionierung notwendige
position. After heißt eben After.
Hatte ich mir aber schon fast gedacht. Schade.
(1) Es gibt jedoch andere Hacks, die sowas zu erzeugen zu versuchen. So
zum Beispiel die "Pure CSS Popups" von Eric Meyer. Allerdings
semantisch nicht so schön wie Deine Lösung.
Genau um das semantisch Sinnvolle[tm] gings mir ja bei diesem Versuch (z.B. für Benutzer-Style-sheets u.s.w.).
Ich hatte eben noch folgende (etwas absurde/aufwändige) Idee:
HTML-Bereich:
<body>
Die Verwendung von
<span class="outer">
<abbr title="Cascading Style Sheets">
<span class="inner">
CSS
</span>
</abbr>
</span>
kann eine Seite nicht nur optisch sondern auch inhaltlich verbessern.
</body>
CSS-Bereich:
body{
position:relative
}
abbr{
border-bottom:none;
position:absolute;
top:0;
left:0;
}
.outer{
position:relative;
}
.inner{
position:relative;
}
abbr:after{
content:"*";
font-size:0.8em;
font-family:Courier new,monospace;
font-style:normal;
color:#090;
vertical-align:super;
}
abbr[title]:hover:after {
content:"'"attr(title)"'";
border:1px solid #900;
color:#900;
padding:1px;
background:#FFC;
}
Die Idee dabei ist folgende:
<span class="outer"> wird relativ innerhalb des normalen Text-Flusses positioniert. Der Text-inhalt von <abbr> wird mittels <span class="inner"> relativ innerhalb von <span class="outer"> positioniert.
Nur der 'Tooltipp' wird mittels <abbr> absolut innerhalb von <span class="outer"> positioniert (und "drängelt" somit den folgenden Text nichtmehr weg).
Klappt aber leider nicht. Vielleicht probier ich heut abend noch ein bisschen weiter.
Wobei diese Lösung (sofern sie eine ist) natürlcih schon wieder eher eine Spielerei wäre, nichtmehr für user-Style-Sheets nutzbar und somit ein bisschen sinnlos :\
Naja, mal schauen.
schö
stefan