nicht angemeldet
einfaches JavaScript und trotzdem Fehler
JürgenB
MudGuard
StruppiGuten Abend!
Ich sitze gerade an einem, eigentlich relativ einfachen JavaScript. Aber ich krieg es trotzdem nicht gebacken. Das <div> wird einfach nicht absolut positioniert. Warum nicht? Hier noch der Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function Fensterhoehe () {
if (window.innerHeight) {
return window.innerHeight;
} else if (document.body && document.body.offsetHeight) {
return document.body.offsetHeight;
} else {
return 0;
}
}
function Fensterweite () {
if (window.innerWidth) {
return window.innerWidth;
} else if (document.body && document.body.offsetWidth) {
return document.body.offsetWidth;
} else {
return 0;
}
}
function zentriere () {
var weite = Fensterweite();
top = (weite / 2) - 200;
alert(weite);
alert(top);
document.getElementById("hallo").position = "absolute;";
document.getElementById("hallo").top = top + ";";
document.getElementById("hallo").left = "0;";
}
</script>
</head>
<body>
<div id="hallo" style="position: absolute:0; top:0; left:0; cursor:pointer;" onclick="zentriere()">
Dieses div sollte nach einem Klick absolut positioniert werden.
</div>
</body>
</html>
Danke schön! MfG, Katrin
-
Das <div> wird einfach nicht absolut positioniert. Warum nicht? Hier noch der Quellcode:
document.getElementById("hallo").position = "absolute;";
document.getElementById("hallo").top = top + ";";
document.getElementById("hallo").left = "0;";Da fehlt jedesmal ein style. Außerdem sind die Semikolons überflüssig, wenn nicht falsch.
So müsste es gehen: (Allerdings ungetestet)
document.getElementById("hallo").style.position = "absolute";
document.getElementById("hallo").style.top = top;
document.getElementById("hallo").style.left = 0;MfG Jonathan
-
Nachtrag:
document.getElementById("hallo").style.top = top;
Hier fehlt natürlich noch ne Maßeinheit. Denkbar wäre:
document.getElementById("hallo").style.top = top + "px"; -
Danke für eure Antworten! Irgendwie scheint heute nicht mein Tag zu sein :-(
Jetzt habe ich nochmal ein Problem. Und zwar positioniert JavaScript das div wunderbar, nur das Problem ist, dass es nicht _zentriert_ positioniert wird. Wo liegt mein Denkfehler in dieser Funktion:function zentriere () { var weite = Fensterweite(); left = (weite / 2)-200; document.getElementById("hallo").style.position = "absolute"; document.getElementById("hallo").style.top = "0px"; document.getElementById("hallo").style.left = left + "px"; }Das div ist immer noch 200 Pixel breit.
Meine Logik:
JavaScript liest die Fensterbreite aus, teilt diese durch 2 und zieht 200 pixel ab. Dann müsste das div doch eingentlich zentriert sein, oder?
Danke schön für eure Hilfe! MfG, Katrin!-
Hallo Katrin
Das div ist immer noch 200 Pixel breit.
Meine Logik:
JavaScript liest die Fensterbreite aus, teilt diese durch 2 und zieht 200 pixel ab. Dann müsste das div doch eingentlich zentriert sein, oder?
Danke schön für eure Hilfe! MfG, Katrin!Falls das div 200 Pixel breit ist, würde ich nur 100 Pixel von der halben Fensterbreite abziehen.
Wenn es nur eine kleine Abweichung war, wird es daran liegen. Falls die Abweichung größer ist, oder gar nicht zentriert wird: magst du uns noch die Funktion Fensterweite() zeigen?Liebe Grüße
mbr
-
Hallo!
Falls das div 200 Pixel breit ist, würde ich nur 100 Pixel von der halben Fensterbreite abziehen.
Wenn es nur eine kleine Abweichung war, wird es daran liegen. Falls die Abweichung größer ist, oder gar nicht zentriert wird: magst du uns noch die Funktion Fensterweite() zeigen?Klar! Habe ich zwar schon in meinem ersten Posting aber ich kann auch nochmal den Quelltext posten:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript">function Fensterhoehe () { if (window.innerHeight) { return window.innerHeight; } else if (document.body && document.body.offsetHeight) { return document.body.offsetHeight; } else { return 0; } } function Fensterweite () { if (window.innerWidth) { return window.innerWidth; } else if (document.body && document.body.offsetWidth) { return document.body.offsetWidth; } else { return 0; } } function zentriere () { var weite = Fensterweite(); left = (weite / 2)-100; alert(weite); document.getElementById("hallo").style.position = "absolute"; document.getElementById("hallo").style.top = "0px"; document.getElementById("hallo").style.left = left + "px"; }</script> </head> <body> <div id="hallo" style="position: absolute; top:0; left:0; cursor:pointer; width:200px;" onclick="zentriere()"> Hallo! Wie geht es dir? Ich hoffe gut. </div> </body> </html>Bitte schön :-) Übrigens habe ich nur 100 abgezogen und es ist immer noch nicht richtig zentriert.
MfG, Katrin-
Hallo Katrin,
... und es ist immer noch nicht richtig zentriert.
und was heißt "nicht richtig zentriert"? Ich habe das gerade mal im IE und im FF getestet, das sah ganz gut aus. Ich habe allerdings nicht nachgemessen, ob es wirklich pixelgenau die Mitte war.
Gruß, Jürgen
-
Hallo!
... und es ist immer noch nicht richtig zentriert.
und was heißt "nicht richtig zentriert"? Ich habe das gerade mal im IE und im FF getestet, das sah ganz gut aus. Ich habe allerdings nicht nachgemessen, ob es wirklich pixelgenau die Mitte war.
Ganz gut sieht es bei mir auch aus :-) Aber ich wüsste gerne warum es nicht perfekt aussieht. Weil wenn man ein Fenster von Windows so verkleinert, dass es rechts hinpasst, dann steht es auf der linken Seite um 10 - 20 Pixel über. Und das ist mir völlig unklar wieso?
MfG, Katrin-
Hallo Katrin,
irgendwie beschreibst Du Dein Problem recht rätselhaft:
... Weil wenn man ein Fenster von Windows so verkleinert, dass es rechts hinpasst, dann steht es auf der linken Seite um 10 - 20 Pixel über. ...
Heißt das jetzt, das der Inhalt breiter als das Browserfenster ist, das war bei mir im FF kein Problem, außer dass rechts und links symmetrisch abgeschnitten wurde. Mit welchem Browser testest Du?
Du solltest mal ein Beispiel hochladen, damit sich das auch andere ansehen können.
Gruß, Jürgen
-
Hallo!
irgendwie beschreibst Du Dein Problem recht rätselhaft:
... Weil wenn man ein Fenster von Windows so verkleinert, dass es rechts hinpasst, dann steht es auf der linken Seite um 10 - 20 Pixel über. ...
Heißt das jetzt, das der Inhalt breiter als das Browserfenster ist, das war bei mir im FF kein Problem, außer dass rechts und links symmetrisch abgeschnitten wurde.
Entschuldigung! Ich habe es ganz anders gemeint. Wenn das JavaScript ausgeführt wurde, dann ist das div _einigermaßen_ zentriert. Also nicht ganz. Und umzu schauen, ob es wirklich nicht richtig zentriert ist gehe ich so vor:
- Ich rufe den Arbeitsplatz auf. Dann verkleinere ich das Arbeitsplatzfenster solange, bis es zwischen den rechten Rand des divs und den rechten Rand des Bildschirmes passt. Und dann ziehe ich das Fenster nach links und probiere ob es dort zwischen den linken Rand des divs und den linken Rand des Bildschirmes passt. Wenn es links auch passt, dann weiss ich, dass das div genau zentriert ist.
Und jetzt habe ich das Arbeitsplatzfenster verkleinert bis es zwischen rechten Rand des divs und den rechten Rand des Bildschirmes passt. Dann ziehe ich es nach links und sehe, dass das Arbeitsplatzfenster zu groß ist. Das bedeutet, dass das div nicht richtig zentriert ist und näher am linken als am rechten Rand ist.
Mit welchem Browser testest Du?
FF
Du solltest mal ein Beispiel hochladen, damit sich das auch andere ansehen können.
Streue Salz in meine Wunden ;-) Ich habe leider noch keinen Webspace :-(
Ich hoffe meine Erklärungen waren verständlich :-/ MfG, Katrin.
PS: Vielen Dank für deine Ausdauer :-)-
Hallo Katrin,
kann es sein, dass Du nicht berücksichtigst, das der Text im DIV nicht zentriert ist und auch nicht per Blocksatz an beide Ränder gleich grenzt? Spendiere dem DIV mal einen "Border", dann siehst Du, wie gut es zentriert ist.
Gruß, Jürgen
-
Hallo Jürgen!
Danke schön! Das war es natürlich! Vielen vielen Dank!
Katrin.
-
-
Hi,
- Ich rufe den Arbeitsplatz auf. Dann verkleinere ich das Arbeitsplatzfenster solange, bis es zwischen den rechten Rand des divs und den rechten Rand des Bildschirmes passt. Und dann ziehe ich das Fenster nach links und probiere ob es dort zwischen den linken Rand des divs und den linken Rand des Bildschirmes passt. Wenn es links auch passt, dann weiss ich, dass das div genau zentriert ist.
Und jetzt habe ich das Arbeitsplatzfenster verkleinert bis es zwischen rechten Rand des divs und den rechten Rand des Bildschirmes passt. Dann ziehe ich es nach links und sehe, dass das Arbeitsplatzfenster zu groß ist. Das bedeutet, dass das div nicht richtig zentriert ist und näher am linken als am rechten Rand ist.
Au weia. Man kann es umständlich machen. Oder einfach: http://www.wintotal.de/Software/index.php?rb=40&id=445
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
- Ich rufe den Arbeitsplatz auf. Dann verkleinere ich das Arbeitsplatzfenster solange, bis es zwischen den rechten Rand des divs und den rechten Rand des Bildschirmes passt. Und dann ziehe ich das Fenster nach links und probiere ob es dort zwischen den linken Rand des divs und den linken Rand des Bildschirmes passt. Wenn es links auch passt, dann weiss ich, dass das div genau zentriert ist.
- Ich rufe den Arbeitsplatz auf. Dann verkleinere ich das Arbeitsplatzfenster solange, bis es zwischen den rechten Rand des divs und den rechten Rand des Bildschirmes passt. Und dann ziehe ich das Fenster nach links und probiere ob es dort zwischen den linken Rand des divs und den linken Rand des Bildschirmes passt. Wenn es links auch passt, dann weiss ich, dass das div genau zentriert ist.
-
-
-
-
-
-
hi,
Meine Logik:
JavaScript liest die Fensterbreite ausUnd dass das korrekt funktioniert hat, hast du durch eine Kontrollausgabe überprüft?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo!
Und dass das korrekt funktioniert hat, hast du durch eine Kontrollausgabe überprüft?
Klar! Mit alert. Und es kam die richtige Breite heraus.
MfG, Katrin
-
-
-
-
Hallo Katrin,
document.getElementById("hallo").position = "absolute;";
kein ";", wie Jonathan schon schrieb.
document.getElementById("hallo").top = top + ";";
document.getElementById("hallo").left = "0;";statt ";" hier "px". Positionsangaben benötigen eine Einheit.
<div id="hallo" style="position: absolute:0; top:0; left:0; cursor:pointer;" onclick="zentriere()">
absolute:0 kenne ich nicht.
Gruß, Jürgen
-
<body>
<div id="hallo" style="position: absolute:0; top:0; left:0; cursor:pointer;" onclick="zentriere()">
Dieses div sollte nach einem Klick absolut positioniert werden.
</div>Mir scheint du suchst eher margin: auto
Struppi.
--
Javascript ist toll (Perl auch!)-
Hallo
<div id="hallo" style="position: absolute; top:0; left:0; cursor:pointer;" onclick="zentriere()">
Dieses div sollte nach einem Klick absolut positioniert werden.
</div>Mir scheint du suchst eher margin: auto
...das ich schon lange gefunden habe. Nur scheint der IE das noch nicht gefunden zu haben.
MfG, Katrin-
Hallo
<div id="hallo" style="position: absolute; top:0; left:0; cursor:pointer;" onclick="zentriere()">
Dieses div sollte nach einem Klick absolut positioniert werden.
</div>Mir scheint du suchst eher margin: auto
...das ich schon lange gefunden habe. Nur scheint der IE das noch nicht gefunden zu haben.wirklich nicht?
Oder nur im Quirksmode nicht?Ansonsten könnten auch expressions helfen.
so in der Art: width:expression(document.body.offsetWidth / 2 - 100 );Die jetztige Lösung ist die schlechtere für alle anderen Browser, da das Element mit CSS zentriert, auch zentriert bliebe, wenn die Schrift- oder die Fenstergröße verändert wird.
Struppi.
--
Javascript ist toll (Perl auch!)-
Hallo!
Ansonsten könnten auch expressions helfen.
so in der Art: width:expression(document.body.offsetWidth / 2 - 100 );Was ist das? Was sind Expressions?
MfG, Katrin-
Was ist das? Was sind Expressions?
(Javascript)-Ausdrücke, die nur der IE kennt. Wie im oberen Beispiel:
width:expression(document.body.offsetWidth / 2 - 100 );
Das weist eben dem Element wie bei width:200px; ne Breite zu, nur ist die eben nicht fest sondern wird aus der Breite des bodys (bzw. bodies, sieht aber beides falsch aus) berechnet.
-
-
-
hi,
Mir scheint du suchst eher margin: auto
...das ich schon lange gefunden habe. Nur scheint der IE das noch nicht gefunden zu haben.Neben dem Verlassen des Quirksmode im IE 6, was du vielleicht noch nicht gefunden hast, gibt es auch noch einen simplen Workaround für IE < 6, den du vielleicht noch nicht gefunden hast: text-align.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-