MrLight
Grünschnabel
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:
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...
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:
Code:
<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...
Zuletzt bearbeitet:
