JavaScript + CSS Box-Modell Rätsel

Also ich hab da so eine HTML-Table. In der sind alle TDs mittels text-align: center zentriert von ihrem Inhalt her. In diesen TDs hab ich zwei DIVs, die übereinander angezeigt werden. Die obere enthält ein IMG, die untere einfach nur einen Text. Beide Inhalte werden auch brav zentriert. Jetzt tausche ich per JavaScript DOM Funktionen die obere DIV mit dem IMG drin gegen eine andere DIV aus, die nur zwei DIVs enthält, die wiederum Text enthalten. Die Texte in den inneren DIVs der neuen DIV sind brav zentriert. Nur die DIV selber, in der die inneren DIVs liegen, ist bezogen auf die umfassende TD nicht mehr zentriert. Das Problem ist mit Safari und Camino reproduzierbar - irgendwie geht die Eigenschaft "Inhalt zentriert ausrichten" flöten für die neu zugefügten Element. Ich hab schon alle möglichen CSS Attribute durchgeguckt und mit allem möglichen rumprobiert (z.B. gucken ob die alte DIV mit dem IMG drin oder das IMG selber einen Wert für left hinterlegt hat), aber irgendwie will das ums Verrecken nicht funktionieren.

Der Hintergrund für das ganze: per Klick auf ein Icon soll ein IMG komplett gegen eine gleichgrosse DIV ausgetauscht werden, in der ein paar Schalter drin sind mit denen Eigenschaften des IMG geändert werden können. Im Prinzip sowas ähnliches wie die Widgets bei Dashboard machen - Konfiguration auf der "Rückseite" eines Bildes.

Im Moment übernehme ich nur die Höhe des Bildes, damit passt die vertikale Ausrichtung perfekt. Nur halt bei der horizontalen Ausrichtung bleibt jetzt alles dynamisch an der Stelle. Wenn ich zwei Zellen übereinanderstehen habe und beide umschalte auf Konfiguration wird die Tabelle in der Breite verändert. Was dann hässliches Zucken gibt. Aber ich will jetzt nicht die TDs statisch aufspannen, denn dann würde sich das Layout nicht mehr dynamisch an die Browserbreite anpassen.

Achso, das ganze muss auch noch mit dem Safari funktionieren, ist schliesslich mein Hauptbrowser zwinkerndes Gesicht

Upadte: in den Kommentaren stehen Links auf Testseiten mit denen man sich das ganze im Effekt mal angucken kann.

tags: JavaScript, Programmierung

Kai Aug. 25, 2005, 9:44 p.m.

klingt hochgradig kompliziert (ist das fuer dies django bilderalbum?).. nen kleines einfaches codebeispiel wuerde sicherlich mehr leute animieren sich das mal anzugucken.. ;)

hugo Aug. 25, 2005, 10 p.m.

Jo, ist etwas kompliziert und jo, ist für die Gallery. Ich hab jetzt eine Testseite online gestellt. Einfach auf das kleine Werkzeugicon neben einem Namen klicken (übrigens funktioniert auch das Klicken auf den Namen um ihn zu ändern - war gerade dabei einen Dummy zu bauen, da kann der auch recht weitgehend tun ;-) ). Dann kommt der Umschalter für den Zustand "versteckt", der aber eben zwar inhaltlich zentriert ist, aber die Box selber ist nicht zentriert.

Die Ursache dafür ist in manage.js eine einzige Zeile, markiert mit /* !!! */ - nehme ich die Zeile raus, klappt alles, aber dafür ist die Breite eben nicht mehr festgelegt und das Tabellenlayout fällt zusammen. Kann man mit der zweiten Testseite sehen, die unterscheidet sich wirklich nur im JavaScript. Einfach da mal zwei Bilder übereinander umschalten in den Konfig-Modus, dann sieht man wie die Tabelle zappelt.

sec Aug. 26, 2005, 3:13 p.m.

Schuss ins Blaue, aber hast du mal versucht, bei den inneren divs margin-left: auto und margin-right: auto anzugeben?

hugo Aug. 26, 2005, 6:49 p.m.

Cool, das wars! Danke! :-)

Jetzt zuppelt es zwar noch ein bischen, aber das sind die üblichen Pixelmaße (mal mit und mal ohne Border und solche Sachen) die kennt man ja schon.

Kai Aug. 26, 2005, 10:10 p.m.

hmm.. also im IE funktioniert das aber noch nicht.. weder das klicken auf den titel noch auf das kleine werkzeugicon.. und firefox will mich den geaenderten titel nich abspeichern lassen..

hugo Aug. 26, 2005, 10:18 p.m.

Speichern geht auch nicht - das ist nur ein statischer Abzug des ganzen Zeugs, das ist nicht die ganze Software - da fehlt der Server hinten der das dann speichert. Ich hab das zwar weitestgehend "entkernt", aber sicherlich dabei einige Bugs drin, denn das "speichern" geht auch bei mir mit FF in dem Dummy nicht.

Im echten System gehts aber, und das alleine ist da wichtig. IE kommt erst dran wenn ich mal wieder arbeite - und das dauert noch über zwei Wochen. Solange ich Urlaub habe werde ich mir den IE garantiert nicht mal aus der Ferne angucken :-)