[HTML] Ausrichten von Objekten im Firefox

[TurboMartin]

Hallo DP ,
ich muss zur Zeit für meine Schule eine Webseite machen. Dabei greift der Lehrer, der bisher die Seite erstellt hat auf Frames zurück. Das ganze habe ich nun alles entfernt und rufe alles per XmlHttpRequest ab. Das ganze funktioniert auch soweit im IE problemlos, im Firefox zick dies aber noch.

Mit folgendem Code richte ich einige Divs aus, was ich bisher nicht mit CSS geschaft habe:

Code:

        function Init() {
            //Erzeugen der Größe der Zellen
            var win = null;
            if (!win) win = window;
            if (typeof win.innerHeight != 'undefined') {
                alert("0");
                ctLeft.style.height = win.innerHeight - 40;
                alert("1");
                ctMiddle.style.height = win.innerHeight - 40;
                alert("2");
                ctRight.style.height = win.innerHeight - 40;
                alert("3");
            }
            else {
                var obj = getBody(win);
                ctLeft.style.height = parseInt(obj.clientHeight) - 40;
                ctMiddle.style.height = parseInt(obj.clientHeight) - 40;
                ctRight.style.height = parseInt(obj.clientHeight) - 40;
            }
            //Eventhandler für Größenänderung registrieren
            alert("");
            window.onresize = Init;
            //window.test.innerHTML
            //AJAX-Aufruf
            alert("");
            setRequest();
            alert("");
        }

Die alerts wurden dabei nur zum Testen im Firefox eingefügt. Dabei zeigte sich, dass ich nur eine Box mit der 0 als Inhalt angezeigt bekomme. Danach wird nichts mehr ausgeführt. Alles dahinter wird einfach nicht ausgeführt.

Was mache ich da falsch?

Schon mal danke im Voraus.

Ich hoffe mal, dass das ganze hier in die Kategorie gehört...

[Die Muhkuh]

Warum müssen die Divs noch angepasst werden?

Wenn man es gescheit verschachtelt, ich kenne Deine Seite nicht, kommt man ohne Anpassung aus.

[sniper_w]

An dieser Stelle würde ich für solche Ansätze (DOM Manipulation per Javascript) JQuery empfehlen.

[Valle]

Lädst du den gesamten Content und so alles per Ajax?

Mit freundlichen Grüßen,

Valle

[Meflin]

Zitat von sniper_w:

An dieser Stelle würde ich für solche Ansätze (DOM Manipulation per Javascript) JQuery empfehlen.

Hm, naja - oder gutes CSS (Aber gut, so ganz ist mir nicht klar was das werden soll...)

[TurboMartin]

Zitat von Valle:

Lädst du den gesamten Content und so alles per Ajax?

Nein, nur einen kleinen Teil.

Zitat von Meflin:

Zitat von sniper_w:

An dieser Stelle würde ich für solche Ansätze (DOM Manipulation per Javascript) JQuery empfehlen.

Hm, naja - oder gutes CSS (Aber gut, so ganz ist mir nicht klar was das werden soll...)

Und wie mache ich das? Ich glaube kaum, dass ich der Höhe 100%-40px zuweisen kann .
Und außerdem funktioniert es ja so ganz gut auch im IE.

[Meflin]

Zitat von TurboMartin:

Und wie mache ich das? Ich glaube kaum, dass ich der Höhe 100%-40px zuweisen kann .
Und außerdem funktioniert es ja so ganz gut auch im IE.

das sollte doch in CSS3 kommen oder - wär jedenfalls geil

Height 100% könnte z.B. so gehen: http://www.webmasterworld.com/forum83/200.htm (die 40px Rand oben kannst du ganz einfach via margin erzeugen). Aber height 100% ist tatsächlich immer problematisch

[Valle]

Zitat von TurboMartin:

Zitat von Valle:

Lädst du den gesamten Content und so alles per Ajax?

Nein, nur einen kleinen Teil.

Mh, also ich weiß ja nicht welchen Teil, aber denk daran, dass alle Ajax-Elemente für Besucher ohne JavaScript (z.B. ich) nicht benutzbar sind und dass Google solche Elemente auch niemals indexieren wird.

Mit freundlichen Grüßen,

Valle

[quendolineDD]

Wie Meflin sagte.
Um solche Abstände zu erzeugen nutze margin.

Das JS nebenbei noch von einigen abgeschalten wird, ist ein anderes Problem, was bei einer Sache für die Schule glaube ich nicht von Belangen ist.

[alcaeus]

Moin,

JQuery (und auch andere Tools, wie z.B. mooTools) sind fuer solche Dinge normalerweise ein bisschen overkill. Man muss aber ganz ehrlich sagen, dass die ganze Sache ziemlich stinkt.

Erstens ist es ne sehr dumme Idee, im DOM rumzupfuschen, bevor dieser fertig gebaut ist. Da kommen die oben genannten Tools aber zum Einsatz: diese definieren ein domready-Event, welches erst feuert, sobald der DOM vollstaendig geladen und aufgebaut ist. Vorher solltest du nichts machen.

Zweitens setzt du im onResize immer wieder den Event-Handler fuer Resize neu. Ist auch nicht die tolle Art, was zu machen.

Drittens kannst du einer Box sehr wohl die height:100% - 40px geben. Du musst einfach nur bisserl was ueber absolute Positionierung wissen. Nehmen wir folgenden Code:

Code:

<html>

<body>
   <div id="full">
      Hier ist alles drin
   </div>
   <div id="bottom">
      Hier nur bisserl was
   </div>
</body>
</html>

Diese Box ist zwar so breit wie die Seite (liegt daran dass div ein Block-Element ist), aber noch nicht ganz so hoch. Hier kommt nun absolute Positionierung ins Spiel. Die Hintergrundfarbe ist nur zum Demonstrieren des Aufbaus da, sonst nichts.

Code:

#full {
   background-color: red;
   
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 40px;
}

So, was machen diese Anweisungen. Wenn ich ein Element absolut positioniere, wird es aus dem Elementenfluss rausgenommen. Die Position richtet sich dann relativ zum naechsthoeheren, nicht static positionierten Element. In diesem Fall ist das unser body. Wenn ich nun left und right definiere, definiere ich damit die Position des Randes zum entsprechenden Rand des Elternelements. Die Breite errechnet sich der Browser dabei automatisch. Genauso funktioniert es mit top und bottom. In diesem Fall soll es ueberall am Rand kleben, ausser unten wo wir 40px Platz lassen. Ja, aber wo ist das zweite div? Da wo es laut dem Elementenfluss hingehoert: an der Position 0,0 - schliesslich ist das absolut positionierte Element rausgerissen. Nun muessen wir auch #bottom stylen:

Code:

#bottom {
   background-color:green;
   
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 40px;
}

Hier machen wir im Grunde genommen dasselbe, aber wir definieren nicht mehr top und bottom, sondern nur bottom. Damit sagen wir dem Browser, dass er das Element unten ausrichten soll. Tm naechsten Schritt sagen wir dann, dass es auch noch eine Hoehe haben soll, naemlich die 40px, die wir in #full weggelassen haben. Das Ergebnis ist....naja, probiers mal aus

BTW, das Ganze funktioniert natuerlich nur in einem Browser, der CSS2 korrekt interpretiert. IE6 hab ich grad net zum Testen hier, aber Firefox 3 und IE7 machens korrekt - wenn die Seite im Standards Mode laeuft. Im Quirksmode kannst du das natuerlich knicken. Und wenns im IE6 nicht tut: fuck it, den sollte man eh nicht hernehmen. Wenns auch im IE6 funktionieren soll: nimm das IE7-Script um dir Probleme zu ersparen.

Spiel einfach damit rum - die Moeglichkeiten sind fast grenzenlos. Beachte aber, dass du saemtliche Margins, Paddings und Border mit dazurechnen musst. Wenn die beiden divs jetzt noch einen Rahmen von 1px erhalten sollen, musst du das natuerlich beachten, da sich die Boxen sonst ueberschneiden. Das findest du aber noch selbst raus

Achso, und bevor ichs vergesse: wenn du dem #full-div dann noch overflow-scroll gibst und viiiieeeeel Text reinwirfst...naja, sieh selbst

Greetz
alcaeus