• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Browser(FF) scrollt, obwohl ich es nicht will

dodo2998

dodo2998

Neues Mitglied
Um mich kurz zu fassen, der Firefox scrollt, wenn ich eine der Pfeiltasten drücke. Das Problem ist auf jeden Fall erst mit JS aufgetreten; ich habe dort das Event abgefragt, und habe es verarbeitet um den div "WORLD" zu bewegen.
Nur dass alle anderen Divs (die nicht in World drin sind) sich mitbewegen. Was soll ich tun?

Hier mein Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <title>PlaThaGame</title>        <script type="text/JavaScript" src="main.js">        </script>        <script type="text/JavaScript">            function init2()            {                document.getElementById("WORLD").style.left = 0;                document.getElementById("WORLD").style.top = 0;            }            function eventHandler(e)            {                if(e.keyCode==38)                {                    document.getElementById("WORLD").style.top = document.getElementById("WORLD").style.top-10;                }                if(e.keyCode==39)                {                    document.getElementById("WORLD").style.left = document.getElementById("WORLD").style.left+10;                }                if(e.keyCode==40)                {                    document.getElementById("WORLD").style.top = document.getElementById("WORLD").style.top+10;                }                if(e.keyCode==37)                {                    document.getElementById("WORLD").style.left = document.getElementById("WORLD").style.left-10;                }            }            document.onkeydown = eventHandler;        </script>    </head>    <body onload="chatWatch();worldLoad();init1();init2()" style="overflow:hidden">        <div id="WORLD" style="position:absolute;left:0px;top:0px;width:200%;height:200%;">        </div>        <div id="chatWatch" style="position:absolute;left:0px;top:0px;width:25%;height:10%;background-color:#DDDDDD">        </div>        <input type="text" id="chatWrite" style="position:absolute;left:0px;top:10%;height:3%;width:20%;">        <button onclick="chatWrite()" style="position:absolute;left:20%;top:10%;height:3%;width:5%;">            <font size="1">---<b>&gt;</b><font>        </button>        <div id="resources" style="position:absolute;left:25%;top:0px;height:13%;width:35%;background-color:#DDDDDD;">        </div>        <div id="items" style="position:absolute;left:60%;top:0px;height:13%;width:40%;background-color:#DDDDDD">        </div>        <div id="hangar" style="position:absolute;left:0px;top:13%;height:60%;width:21%;background-color:#DDDDDD">        </div>        <img src="round.png" style="position:absolute;left:21%;top:13%;width:4%;height:5%">        <div id="hangarSwitch" style="position:absolute;left:0px;width:21%;height:2%;top:73%">            <img src="sl.png" style="position:absolute;left:0%;width:33%;height:100%;top:0px">            <img src="sm.png" style="position:absolute;left:33%;width:33%;height:100%;top:0px">            <img src="sr.png" style="position:absolute;left:66%;width:34%;height:100%;top:0px">        </div>    </body></html>

Danke schon einmal im Vorraus für die Hilfe.
 
Sofern dein JavaScript funktioniert, ist das doch schon mal was. Die Frage wäre allerdings: was soll sich bewegen, warum soll es sich überhaupt bewegen und wie vermeide ich, dass andere Dinge sich mitbewegen? Vielleicht geht es ja auch ganz ohne Bewegung. ^^

Im ersten Schritt solltest du dir Grundlagenwissen in CSS aneignen. Dazu die Seite noch einmal schreiben, ohne JavaScript und unter strikter Vermeidung von inline CSS (das ist die Sache mit dem style=""), position (egal ob absolute, relative oder fixed), sowie top, left, right, bottom. Erlaubte Hilfsmittel zur Positionierung sind lediglich margin, padding, float und display (inline und inline-block). Bei der Gelegenheit dann auch gleich einen vernünftigen Doctype verwenden. HTML 4 zählt nicht mehr dazu, und loose bedeutet schlampig. Gültig sind hier entweder XHTML oder besser noch HTML5.

Soll anschließend immer noch etwas bewegt werden, bau eine dritte Version der Seite und inkludiere dort wieder dein JavaScript. In dieser Datei nimmst du lediglich das zu bewegende Div und das nachfolgende Blocklement auf, der Rest ist nicht wichtig.

Hört sich das für dich jetzt nach ziemlich viel Arbeit an, liegst du völlig richtig. Aber so läuft es nun mal in der Webentwicklung. Wenn ein Problem zu komplex erscheinen sollte, bricht man es auf ein kognitiv fassbares Maß herunter, isoliert nach Möglichkeit die Fehlerquellen, löst die Aufgabenstellungen einzeln und setzt das Ganze zum Schluss wieder zusammen.

Sicherlich hättest du statt dessen lieber eine einfache, zielführende Antwort gehabt. Aber einmal ist das aufgrund des unübersichtlichen Quellcodes kaum möglich, und zum anderen hebst du mit position: absolute die Elemente aus ihrem Textfluss, womit sie sich dann auch nicht mehr "normal" verhalten. Deshalb zum Schluss noch mal die Erinnerung: Solange du dich nicht wirklich mit CSS auskennst, vermeide dieses Attribut. Das bringt dir nur Probleme.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben