Flexibles Tabellenlayout mit Alpha-PNGs, Zellenhöhe in Opera/IE ?

[sman]

Hallo,

ich setzte eine neue Seite mit Tabellenlayout auf. Meine erste Frage ist Alternativdenken: Geht das auch mit CSS? Und die zweite mir wichtigere Frage bezieht sich auf ein Darstellungsproblem, dass ich mit dem aktuellen Layout in Opera und IE habe, nicht jedoch im Firefox.

URL zur Testseite

http://www.mschroen.de/neu/test1.htm
Das Problem wird nocheinmal mit Kommentaren im HTML-Code erläutert.
Die Seite ist XHTML1.0 Strict valide.​

Rechtfertigung Tabellenlayout

Bei meinem aktuellen Projekt musste ich nach Jahren wieder auf Tabellenlayout umsteigen, weil ich keine Idee habe, wie das in CSS umsetze. Das Problem ist, dass viele CSS-Layouts auf divs setzen, die sich übereinander überlappen, mit je unterschiedlichen Hintergrundbildern, sodass dadurch Ecken und Kanten erzeugt werden können. Sobald ich jedoch Transparent PNGs verwende, dürfen sich Hintergrundbilder nicht überlappen, die divs müssen also klar nebeneinander/übereinander getrennt sein. Und da im Gegensatz zu sonst üblichen Seiten mit fester breite des Contents, brauche ich bei flexibler Breite mehr Hintergundbilder, wobei sich das mittelste immer wiederholt.​

Frage 1

Vielleicht hat jemand eine Idee wie man das doch relativ "einfach" mit purem CSS realisieren kann?​

Das eigentliche Problem

Für mich funktioniert dieses Layout soweit erstmal super, allerdings nur im Firefox. Das dargestellte Papier soll schattige Ränder besitzen. Dazu gibt es 5 Spalten in der Layouttabelle und 5 Zeilen, wobei der eigentliche Inhalt mit rowspan=3 und colspan=3 die Mitte bildet und in Höhe und Breite mitwächst.
Die Ecken werden durch Hintergrundbilder in den jeweils 3 Eckzellen (z.B. Ecke rechts oben: Zeile 1 Spalten 1, 2 und Zeile 2 Spalte 1) dargestellt. Diese Zellen sollen feste Breite und Höhe haben. Demzufolge machen die mittigen Randzellen (Zeile 1 Spalte 3, Zeile 3 Spalte 1 und 5, Zeile 5 Spalte 3) die ganze Sache flexible und haben flexible Breite bzw. Höhe. Und hier liegt der Hund begraben: Opera und IE halten sich nicht an die Höhenangaben der vertikalen Randzellen.​

Frage 2:

Warum zeigt Firefox alles richtig an, bei Opera und IE jedoch füllen die mittigen flexiblen Zellen nicht die gesamte Höhe aus. Sie werden stattdessen beliebig gestaucht. Die umliegenden Zellen eigentlich fester Höhe bekommen ebenfalls beliebige Höhe. Dadurch verschwindet in den Browsern der schattige Rand an den Seiten rechts und links.​

Hoffe auf etwas Hilfe
Martin

 

[Maik]

Hi,

CSS Transparent Frame nutzt ebenso transparente PNGs, und kommt ohne eine Tabellenkonstruktion aus - der Trick sind entsprechende margin- und padding-Werte, damit sich die Hintergrundbilder nicht überlagern.

mfg Maik

 

[sman]

Vielen Dank für den wirklich sehr heißen Tipp!
Es hatte ein weilchen gedauert bis ich verstanden habe, wie das funktioniert und in mein Layout implementiert habe. Ich brachte außerdem 23 Divs für all das, das ich eine Ecke nicht durch ein einziges Bild darstelle, sonder durch 4 Bilder: 3 schmale alpha-channeled Rand-Bilder als PNG und ein großes als JPG ohne Transparenz. Das erspart eine ganze Menge an KB als wenn ich ein großes PNG benutzen würde. Jetzt funktioniert es auch unter OPera und IE8 !!

Allerdings frage ich mich langsam, ob ich die Zahl der Hintergundbilder nicht reduzieren kann, da das ganz schöne viele http-Requests werden. Ich habe ein bisschen mit mehreren Hintergundbildern in einem gespielt, wobei die background-position das richtige Bild zurecht schiebt. Allerdings kann ich das nicht so recht auf diesen Fall anwenden, da die Divs alle größer sind als das eigentliche Bild, das trotzdem nicht wiederholt werden darf. Und wie bekomme ich eigentlich einen offset nach außen bei Hintergrundbildern mit background-position right oder bottom? Sowas wie 100%+20px suche ich da.

Wie könnte man das realisieren?

Nachtrag: URL des Div-layouts: http://www.mschroen.de/neu/test2.htm