Hallo!
Ich habe schon Stunden in folgendes Problem investiert und bin immer noch nicht weiter.
Ich suche eine Möglichkeit, ein CSS-Popup zu realisieren.
Anforderungen:
- Einsatz von lediglich CSS
- KEIN Javascript
- funktionsfähig mit IE,FF und Opera
- funktionsfähig auf Mac,Linux & Windows
- muss eingebettet in Fließtext funktionieren
(also nicht wie hier: http://www.cssplay.co.uk/menu/balloons.html)
- durch Auslösen des Popup darf der umgebenden Text nicht springen oder sich bewegen
(also nicht wie hier: http://webbe.de/index.shtml?CONTENT=script_css_tooltip;LANG=de)
- das Popup muss aktiv bleiben, solange sich der Cursor auf dem auslösenden Element oder dem Popup selbst befindet)
- es muss möglich sein, Links in das Popup einzubetten
Hier ein Beispiel, mit obigen Funktionalitäten, das allerdings nicht im IE funktioniert:
http://www.magkes.de/Test.html
Was mir bisher aufgefallen ist:
- der IE braucht auf alle Fälle um das gesamte Konstrukt ein a-Tag
- der IE mag nicht immer Links im Popup
- Opera mag keine doppelt verschachtelten a-Tags
Ich habe Google schon abgegrast und bin leider noch nicht fündig geworden.
Hat jemand von Euch schon mal so etwas realisiert oder ist schon mal im Internet über soetwas gestolpert?
Also im IE7, XP funktioniert es ohne Probleme!
Hallo Marcus,
ich glaube was Du hier als Popup bezeichnest läuft eher unter dem Namen "Tooltips", zumindest im Falle von JavaScript. Versuche danach zu suchen.
Aber ob das per CSS geht kann ich nicht sagen.
Viel Erfolg, Tadeusz
===
http://onreact.com
Alter, du und deine scheiss onreact Signatur nervst ohne ende!
Sorry, wollt ich nur mal gesagt haben (u_u)
man überlege aber mit welcher hingabe tadeusz diese jeden tag aufs neue in die zwischenablage lädt, um sie hier einzufügen...
Naja,immerhin bringt mir der Tipp, nach "css tooltip" zu suchen, noch einige unbekannte Seiten. Jetzt klicke ich mich mal da durch.
Hab grad was ausprobiert und das klappte sofort:
dfn span {
position: absolute;
display: none;
padding: 10px;
border: 1px solid #eee;
background-color: #fff;
}
dfn:hover span {
position: absolute;
display: inline;
}
<p>Dies ist <dfn><span>Hallo<br /><a href="">Hallo</a></span>ein</dfn> Text, so wie er dargestellt werden soll.</p>
Funktioniert im IE und FF.
http://www.fifty-nine.de/_stuff/tooltips.html
@Moritz: sieht gut aus aber ...
funktioniert hier nicht im IE6.0
falls Du den IE7 nutzt:
scheint, dass der IE7 in Sachen CSS mächtig aufholen wird; ich hoffe, dann kann man sich irgendwann Browserweichen und üble CSS-Hacks sparen
Reine CSS Tooltips gehen im IE>=6 nur mithilfe des a-Elements. In diesem kannst du aber nicht nochmal nen Link platzieren.
Kurz: Deine Anforderungen sind derzeit definitiv nicht erfüllbar. Du musst für die IE auf Links im Tooltip verzichten oder Javascript verwenden.
Hallo "Alan",
das braucht Dir nicht sooo peinlich sein, dass Du Dich unter einem Psedonym verstecken musst: "Alan Smithee, der als Regisseur vieler Filme genannt wird, ist eigentlich kein Regisseur, sondern ein Anagramm von "The Alias Men", was bedeutet, dass Filme, in denen Alan Smithee Regie geführt hat, dem eigentlichen Regisseur so peinlich waren, dass er seinen Namen nicht dafür aufs Spiel setzen wollte."
http://de.wikipedia.org/wiki/Alan_Smithee
Schade nur, dass Trolls DMIG wieder übernehmen.
Sammy Amara, Dir scheint aber auch nichts peinlich zu sein. "Deutsche kauft nicht beim Juden" abgewandelt als Slogan zu verwenden ist wohl das geschmacklosesete seit dem Holocaust selbst.
Liebe Grüße, Tadeusz
P.S.: Und ich werde weiterhin keine Einzeiler schreiben. Für einen Klarnamen, ausgeschriebene grammatikalisch korrekte Sätze mit Subjekt, Prädikat und Objekt, Grußformeln und eine Sigantur ist immer Platz und Zeit. Wen das stört kann gerne woanders anonym trollen.
===
http://onreact.com
Hi Tadeusz,
auch wenn der Ton von Alan Smithee etwas ungehobelt ist:
Mir ist auch schon aufgefallen das Du der einzige hier bist der immer versucht seine
URL unter zu bringen. Macht wahrscheinlich aus Deiner (SEO) Sicht auch Sinn.
Ich finde das muss aber nicht sein.
Seitentitel: CSS-Popup