nicht angemeldet
Blogger.com und <div>s
Hallo zusammen,
bin mir nicht ganz sicher, ob der Themenbereich von mir richtig gewählt ist, aber hoffe ja.
Ich habe eine Blog-Seite bei dem Blogger.com. Bei der handelt es sich um ein kleines Projekt für Leute, die Deutsch lernen. Man hat ein Text, am Ende ist eine Liste mit Unbekannten Worten, und im Text selbst sind javascript-popups eingebaut, die Übersetzung für 10sek einblenden.
Realisiert ist das ganze über JavaScript - wenn der Benutzer auf das unterstrichene Wort klickt, wird ein "div"-block mit der Überesetzung erzeugt und zum Eltern-Knoten hinzugefügt (ein span-tag).
Nur werden divs in Mozilla immer am linken Rand der Seite und nicht neben dem Wort selbst angezeigt. Bei IE gibt es Problem nicht. Und so bald die Lösung außerhalb Blogger.com getestet wird, gibt es auch kein Problem.
Vielleicht kennt eine von Euch Lösung für das Problem. Fehlt vielleicht eine Eigenschaft?! Oder evtl. ist eine Eigenschaft zu viel?!
Danke Euch im Voraus.
Ok. Hier der Beispiel-Link (http://zametki.ametov.net/2008/09/in-dem-luftballon.html) und das hier ist der Quelltext mit ganzen Funktionen:
<html>
<head>
[code lang=javascript] <script type="text/javascript">
function showTranslation(elter, translationText)
{
alert(elter.innerHTML);
var translation;
translation = document.getElementById("translation");
if (translation)
{
removeTranslation();
}
var translationData = document.createTextNode(translationText);
translation = document.createElement("div");
translation.appendChild(translationData);
translation.style.backgroundColor = "#EEE";//"#CCCCCC";
translation.style.borderStyle = "solid";
translation.style.borderWidth = "1px";
translation.style.position = "absolute";
translation.style.margin = "0 0 0 3";
translation.style.padding = "5px";
translation.id="translation"
translation.onmousedown = removeTranslation;
// elter.appendChild(translation);
elter.innerHTML+="<div id=\"translation\" class=\"t\">"+translationText+"</div>";
window.setTimeout("removeTranslation()", 10000);
}
function removeTranslation()
{
var translation;
translation = document.getElementById("translation");
if (translation)
{
var elter = translation.parentNode;
elter.removeChild(translation);
}
}
</script>
~~~ <style>
.wort {cursor:help; border-bottom:1px dashed;}
</style>
</head>
<body>
<table valign=middle align=center height="100%">
<tr><td>
<p><span onclick="showTranslation(this, 'Übersetzung')" class="wort">Test</span> Nur Text<br>Text Text Text</p>
<p><span onclick="showTranslation(this, 'Translation')" class="wort">Test2</span> Nur Text<br>Text Text Text</p>
</td></tr>
</table>
</body>
</html>[/code]
-
Yerf!
Realisiert ist das ganze über JavaScript - wenn der Benutzer auf das unterstrichene Wort klickt, wird ein "div"-block mit der Überesetzung erzeugt und zum Eltern-Knoten hinzugefügt (ein span-tag).
Das ergibt eine ungültige HTML-Struktur (div ist in span nicht erlaubt), möglicherweise liegt hier das Problem. Verwende für den neuen "Block" auch einen Span und gib ihm per CSS ein "display:block" mit.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->