✔ JS zum zentrieren "zuckt"

D

drathy

Mitglied
Hallo!
Ich habe eine schlichte Seite, die 1004px breit und 623px hoch ist. Bei höheren Auflösungen wird diese Seite mittels folgendem JS zentriert:

function center_object()
{
var pageX = (document.all)?document.body.offsetWidth:window.innerWidth;
var pageY = (document.all)?document.body.offsetHeight:window.innerHeight;
if((pageX > 1030) || (pageY > 640))
{
var objRef = document.getElementById("tabelle");
var objW = 1004;
var objH = 642;
objRef.style.left = ((pageX/2)-(objW/2))+"px";
objRef.style.top = ((pageY/2)-(objH/2))+"px";
if (window.opera)
{
document.body.style.backgroundColor ='#FFFFFF';
}
}
}
window.onload=center_object;

Wenn ich nun in Opera eine andere Unterseite aufrufe, "zuckt" das Bild immer, sprich, es für einen Sekundenbruchteil oben links dargestellt, ehe es zentriert angezeigt wird. Komischerweise nur im Opera und bei einem IE6 (bei einem anderen IE6 klappt es ohne Probleme).
Hat jemand ne Idee, wo das Probelm liegt? Kann man irgendwie ne "preload-Funktion" einbauen oder so was
Vielen Dnak im Voraus!
Gruß, Drathy
 
Hab ich schon alles mit css versucht: Bei einer Lösung gab es Probleme, da dann bei kleineren Auflösungen die Ränder abgeschnitten waren und wenn ich bspw. alles in eine Tabellenzelle packe und den Inhalt zentriere (vertikcal-align:middle;) habe ich Probleme mit meinen fest positionierten Elementen...
Mit JS klappt ja so gesehen auch alles, bis auf diese beiden kleinen Ausnahmen.
Hat nicht jemand ne Idee direkt zum meinem JS. Kann man nicht z.B. alles unsichtbar und dann nach dem Positionieren wieder sichtbar machen
 
Du kannst den <body> eingangs per "visibility:hidden" verstecken und am Ende von center_object() einblenden.

Aber wenn du mich fragst....hast du schon mal an die Leute gedacht, die kein JS anhaben.... da dürfte CSS allemal die bessere Alternative sein, auch wenn es in deinen Augen Schönheitsfehler in sich birgt.
 
Sven Mintel hat gesagt.:
Du kannst den <body> eingangs per "visibility:hidden" verstecken und am Ende von center_object() einblenden.
Zum Vergrößern anklicken....
Danke, werde das testen.
Sven Mintel hat gesagt.:
Aber wenn du mich fragst....hast du schon mal an die Leute gedacht, die kein JS anhaben.... da dürfte CSS allemal die bessere Alternative sein, auch wenn es in deinen Augen Schönheitsfehler in sich birgt.
Zum Vergrößern anklicken....
Da hast Du natürlich Recht. Ich hab das bislang so gelöst, dass die Leute ohne JS die Seite halt normal oben links sehen. Das JS wird ja erst bei einer Fensterbreite aktiviert, die einer Auflösung > 1024x768px entspricht...
Mir ist bewusst, dass es so nicht ganz sauber ist, aber ich weiß als Anfänger momentan keinen anderen Rat...
Wie würdest Du denn eine Seite zentrieren, dei bspw. 1004x623px groß ist? Angenommen, die Seite ist von einem <div>-Tag umschlossen und beinhaltet auch absolut Positionierte Elemente. Könntest Du mal ein kleines Beispiel geben?
 
Hier ein Beispiel mit CSS:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
    body, html {
        height:100%;
        margin:0;
        padding:0;
    }
    #centerIt {
        overflow:auto;
        position:relative;
        top:50%;
        height:300px;
        width:400px;
        margin:-150px auto auto auto;
        background:#c00;
    }
    #absolute {
        position:absolute;
        background:#66c;
        top:10px;
        left:20px;
        width:150px;
        height:20px;
    }
</style>
</head>
<body>
<div id="centerIt">
<div id="absolute">Absolut</div>
</div>
</body>
</html>
getestet mit IE 6.0, FF 1.0.7, OP 8.01, NS 8.0

Gruß hpvw
 
drathy hat gesagt.:
Angenommen, die Seite ist von einem <div>-Tag umschlossen
Zum Vergrößern anklicken....

Ich würde kein <div> nehmen sondern eine Tabelle(und mir den Unmut einer Reihe von Mitlesern zuziehen :suspekt: )

Code: 
<html>
<head>
<title>Test</title>
<body>
<table style="height:100%;width:100%;text-align:center">
  <tr>
    <td>
       <span>relativer Inhalt</span>
       <span style="position:absolute;top:100px;left:100px;">absoluter Inhalt</span>
    </td>
  </tr>
</table>
</body>
</html>
Alles in der Mitte, alles valide...also was solls. bevor ich ein paar kB CSS zusammenzimmere, wo dann doch wieder irgendein Browser nicht mitspielt, mach ichs lieber so.

Wenn Abwärtskompatibilität erforderlich ist, würde ich mich sogar zu einer noch verachtenswürdigeren Tat hinreissen lassen, und der Tabelle .... ich wage es kaum auszusprechen :) .... eine HTML-height von 100% verpassen(was dann natürlich nicht mehr valide wäre)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück