Zwischenbox mit variabler Zwischen-Höhe

[MrLight]

Hallo Forum!

Aufgabenstellung:

Es soll innerhalb eines Browserfensters eine Fläche <content> erstellt werden. Diese soll von den Broserfensterseiten Links, Rechts & Oben jeweils (zB: ) 20 px Abstand haben. Die Höhe soll aber dynamisch vom Inhalt generiert werden.

Weiter soll diese Box einen weichen Schatten auf den umliegenden Hintergrund werfen, welcher durch PNG's erstellt wird. Damit die Form des Schattens möglichst realistisch wirkt, soll dieser aus verschiedenen Teilen zusammengesetzt werden.

Aus den Bereichen Left, Down, Right, LeftDown und RightDown. Weil die Box in Ihrer Größe sich ändern kann, müssen die Bereiche Left, Down und Right in jeweils drei weitere Bereiche aufgeteilt werden. Beispiel für Left:

<div id="my_box">
	<div id="my_box_left">
		<div id="my_box_left_up">LU</div>
		<div id="my_box_left_middle">LM</div>
		<div id="my_box_left_down">LD</div>
	</div>
	...
</div>

Dabei sollen die Boxen: "my_box_left_up" und "my_box_left_down" eine feste Größe von 20px x 20px haben. Die Box "my_box_left_up" soll oben und die Box "my_box_left_down" unten in der Box "my_box_left" liegen. Der Zwischenraum zwischen den Boxen soll komplett von "my_box_left_middle" aufgefüllt werden.

Dabei soll die Höhe von "my_box_left", und damit auch von "my_box_left_middle" von der dynamischen Höhe von "my_box_middle" abhängen.

Um die Problematik etwas verständlicher zu gestallten, habe ich eine Skitze hier:



Weiter soll das Ergebniss mindestens in den folgenden drei Browsern funktionieren:

IE6
Safari 2.0
Firefox 2.0

Bisher ist mir ein Workaround gelungen, welcher leider nicht möglich ist mit PNG's, und daher nicht zu verwenden ist, wenn man den Hintergrund verschiedenfarbig oder mit Bild erstellen will. Hier ein Bild:



Dieses ist mit Hilfe von Tabellen und Diversen Triks erstellt worden.

Nach langem hin und her, Google und viel Lesen, habe ich eine Lösung hinbekommen, welche im Firefox und Netscape funktioniert, und eine andere für Safari. Nur mit dem iE schlage ich mich noch rum. Der will entweder alle kästen in 100% oder in fester Größe, und dannwenn der inhalt wächst werden die kästen mit der ursprünglichen Größe von 20 x 20 automatisch größer, und max-height will er nicht akzeptieren.

--> Hier <-- ist das Beispiel zu sehen. Es ist nicht ganz fertig, doch zur Kenntlichmachung des problematischen Berreichs (Links und Rechts...), habe ich die etsprechenden Berreiche mit Farbigem Rahmen gekennzeichnet.

Mir ist es Egal, ob mit Tabellen, oder mit CSS, oder wie auch immer das Problem gelöst wird (nur bitte kein JS..), nur wenn jemand mit soetwas schon mal Erfahrung hat, und eine Lösung parat hat, währe ich sehr, sehr Dankbar!

Gespannt auf Euere Posts,

Mr Light
pS:Sollte eine Lösung zu finden sein, bin ich gerne bereit diese sauber zusammenzuschreiben und zu illustrieren, um daraus ein Tutorial zu basteln...

 

[Gumbo]

Als Inspiration: Roger Johansson: Transparent custom corners and borders.

 

[MrLight]

Danke, für die schnelle Antwort, ist ein anderer Lösungsansatz. Doch genau das wollte ich vermeiden, eine relativ große Grafik zu nehmen, um das zu "simulieren". Zumal fahre ich eine etwas größere Auflösung hier 4800 x 1200 und da wird die Grafik etwas zerflückt.

Auserdem hatte ich mal gelesen, dass man CSS aus zwei gründen eingeführt hat,

1. Inhalt und Gestalltung voneinander zu trennen.
2. Die Datenmänge so zu minimieren.

wird denn nicht genau durch so eine Lösung dem Punkt 2 wiedersprochen? Verstehe mich nicht falsch, Danke für deinen Tip, und wenn ich es nicht hinbekomme. muss ich mir irgendsoeinen Workaround auch nehmen. Trozdem ist es ärgerlich.

Also wenn einer eine Lösung hat, dann bitte hier.. Dabei sollte man nicht unbedingt das Augenmerk auf den Schatteneffekt werfen, sondern nur auf die drei Boxen..

Mr Light

 

[MrLight]

Ich habe in der Zwischenzeit das Model zwecks verständniss mal vereinfacht, und in's netz gestellt. --> HIER <-- kann man es sich ansehen.

Es geht nur um die 100% Höhe innerhalb einer variablen Box, und auch nur im IE. Die Lösung hier funktioniert in Firefox, Netscape und Safari problemlos ...

Also, wenn jemand einen Tip hat, währe ich Dankbar.

Mr Light

 

[MrLight]

ES GEHT! // Wieso eigentlich?

Hallo Forum!

Wie ich es euerer Resonanz entnehme, dachte sich wahrscheinlich jeder, nicht schon wieder einer. Es ist an 1000 Stellen schon beschrieben, sogar Microsoft sagt es, dass im IE prozentangaben nur dann funktionieren, wenn alle Elternteile exact vorher definiert sind, und dann beziehzen sich die angaben immer an den Angaben des Elternteils.

Es geht doch!

GucksDu --> HIER <-- (ie6)

Die Schatten links und rechts, nehmen nur die Höhe an, vom Text, welcher sich in der Mitte befindet, und NICHT die volle Höhe! Einen kleinen schönheitsfehler hat das ganze noch. sobald man das Fenster resized, nehmen die Schatten die eigentlich erwarteten Höhen von ECHTEN 100% an. Doch wenn man dann die Seite Reloaded (F5) ist dieser Zaubereffekt wieder da!

Kann mir jemand sagen wieso?

Wenn ich anstelle der PNG Bilder jedoch normale Hintergrundfarbe nehme, ist der Effekt wieder weg. GucksDu --> HIER <-- (ie6)

Würde gerne wissen, was Ihr von diesem Effekt hält, und ob es jemand im IE7 (oder IE5/5.5) für mich testen kann.

Wenn jemand Eine Idee hat, warum das so ist, währe ich auch dankbar für ein paar Zeilen!

Mr Light