Hallo Forum!

Nach langem Programmieren, Probieren, und Studieren verzweifle ich langsam.

Ziel ist es einen wirklich schönen und weichen Schatten um eine Box zu machen. Ja, ich weiss, es gibt im Netz einige interessante Beispiele, welche alle für sich schön aussehen, aber diese stellen mich nicht wirklich zufrieden. Viele Arbeiten mit abdeckenden Hintergrundbildern und produzieren größere Datenmengen. Andere dagegen strecken und verzerren ein Pseudoschatten, was das Zeug hergibt, und liefern auch kein wirklich schönes Ergebnis. So dachte ich mir, das geht auch besser, schlanker und schöner. Gesagt und getan.

Hier ein Beispiel:



Dieses arbeitet mit kleinen JPG Grafiken, und Tabellen, so dass es nach einigen kleinen Tricks sauber funktionierte.

OK, es sind Tabellen, was nicht sehr schön ist, und der Schatten wird aus JPG's zusammengebaut, was einen andersfarbigen Hintergrund schwierig und einen mit Bild unmöglich macht. Also entschied ich mich einen zweiten versuch zu bauen. Diesmal mit divs und PNG's

Zu dem PNG Problem und ie bin ich noch nicht vorgedrungen. Das mache ich zum Schluss. Im Moment quält mich ein anderes Problem. Um dieses zu verdeutlichen, hier eine vereinfachte Darstellung des Schattenaufbaus:



Sorgen macht mir die "my_box_left_middle" (und auch "my_box_right_middle"). Diese hat 100% höhe und wird mithilfe von clip oben und unten beschnitten, um die Boxen my_box_left_up und my_box_left_down nicht zu überdecken. Sonst würden sich bei PNG die Schatten addieren. Klappt in allen Browsern ganz gut, nur im ie nicht! Der ie ignoriert einfach diese Angabe der Höhe. Natürlich, wenn ich umfassende Box my_box und my_box_left auch auf 100% festlege, funktioniert es, doch das ist nicht das Ziel, was ich haben will. Die Box soll nur die notwendige Höhe annehmen, und die Breite dynamisch zum Fenster haben.

Um das Problem begreifbar zu machen habe ich eine vereinfachte Version mal in's Netz gestellt, welche man --> HIER <-- sehen kann. Ich habe dabei den Schatten unten wie auch ggf oben erst mal weggelassen, um es verständlicher und einfacher zu halten. Wie gesagt, das Beispiel funktioniert nicht im IE (BIS ie6, 7 kann ich nicht testen..), also die Gegenprobe im Firefox bitte ...

In meiner Verzweiflung habe ich auch eine Version wieder mit Tabellen probiert, aber auch hier das selbe Problem. Die mittlere Box will einfach nicht. Auch --> HIER <-- ein Beispiel. Diesmal nicht vereinfacht, weil mir eine Lösung ohne Tabellen lieber währe. Dieses Beispiel ist nur im Firefox und Netscape korrekt dargestellt (für Safari habe ich noch einen --> Hack <--.), aber mit ie keine Chance ...

Problem:

Wie bringe ich ie bei innerhalb einer variablen Box (Container) die Volle Höhe (100%) für ein Obejkt (z.B.: <div>) anzunehmen?

Wenn jemand eine Idee oder eine Lösung hat, dann bitte hier. Ich kämpfe mit dem Problem schon seit gut einer Woche, und bekomme es einfach nicht hin. Eine Browserweiche im CSS ist mir im Moment noch nicht wichtig. ich brauche zur Verständnis erst mal nur eine reine ie Lösung für dieses Problem.

Zum Schluss, wenn es gilt die Lösung einzubauen (ich hoffe es gibt eine) kann ich im CSS mit weichen arbeiten, und auch gleichzeitig das kleine PNG Problem lösen...

Mr Light

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

Hast du dir schon mal angeschaut, was mit deinen Schatten (oder den bunten Boxen) passiert, wenn der Inhalt länger als die 100% wird?

Was du willst, erreichst du mit verschachtelten Elementen.
Deine Orgie von leeren Elementen finde ich wenig sinnvoll.

Hallo fricca

A) Wenn der Text Länger wird, Du meinst dass der Schatten dann nicht bis zum Ende geht? Ja, habe ich gesehn. Das ist es was ich meinte dass es noch nicht perfect ist. (Ob es das überhaupt sein wird, sei noch dahingestellt...) Doch einmal F5, und es stimmt wieder. Zumindest bei mir.

B) Ob das wirklich mit verschachtelten Ellementen zu erreichen ist, ist das woran ich verzweifle, ich bekomme es einfach nicht hin. Ich schreibe die Seite schon zum 20sten mal. Mal mit Tabellen, mal mit Divs, mal so, mal so. In allen Browsern klapt es Prima, nur im IE bekomme ich es nicht hin. Ich habe versucht die Problematik auf ein Minimum zu reduzieren, damit ich es leichter verständlich im Forum posten kann.

C) Was die "... Orgie von leeren Elementen ..." anbetrifft, so ist es das einzige was ich kenne, um etwas im HTML Code zu haben, was ich Formatieren kann. Da gab es noch dieses bevore und after, aber diese scheinen nicht im ie unterstützt zu werden. (Hatte ich gelesen...) Für einen Tip, Link, wie ich rein aus CSS objekte (zB: Meine Schatten) in die Seite bringe währe ich Dankbar....

Trozdem bin ich neugierig, was da eigentlich passiert ist. Denn genaugenommen, müßten die Schatten bis ganz nach unten gehn..

Mr Light

Es geht so nicht im IE. Den Grund hast du selbst genannt.

Wenn du in einem flexiblen Layout rechts und links einen Schatten willst, dann verschachtele zwei Elemente, und gib jedem einen vertikal gekacheltes Hintergrundbild. Die "Ecken" lassen sich normalerweise immer an Elemente vergeben, die sowieso im Code vorhanden sind.
Ich sehe in deinem Ansatz den Versuch, Tabellenzellen mit div-Elementen nachzubauen. Dieses Zellendenken aufzugeben ist am Anfang das schwierigste.
Der beste Anfang ist es, zunächst den Inhalt mit semantisch sinnvollem Markup auszuzeichnen. Dann erst überleg dir, welche der vorhandenen Elemente welche Teile deines Layouts aufnehmen können. Wenn du dann feststellst, dass die vorhandenen Elemente nicht ausreichen, dann erst füge (vereinzelt) weitere Elemente hinzu. Fast immer sind dabei Verschachtelungen sinnvoll (nicht Nebeneinandersetzen von leeren divs).

Hallo fricca!

Danke für den Tipp! Das mit den verschachteln von 2 Elementen, hatte ich auch schon gehabt.

Code (Schematisch):
mit dem entsprechenden CSS, wo der Schatten mit repeat-y zum wiederholen gebracht wird. Problem ist jedoch, dass dieser Schatten oben 20px versetzt anfangen muss, und unten 20px früher aufhören muss als der Content, da da die beiden Kästen kommen, wo der Schatten seine Rundung anfängt. Siehe oben der Rosa und Browne Kasten. clippen kann ich nicht, denn dann clipe ich auch meinen Kasten my_content. Und wenn ich die Position absolute mache und den Content herus nehme, dann ignoriert der ie wie bekanntlich die Höhe ...

Zu dem tabelarischem Denken, gebe ich Dir recht. Nur im Moment finde ich keinen anderen Lösungsansatz. Deshalb poste ich ja auch hier ...

Mr Light

Die Ecken machen mir genaugenommen die Kopfschmerzen, denn wegen dem Hintergrund, arbeite ich mit PNG's diese kann man nicht einfach übereinander legen, denn dann adieren sich die Schatten, und werden dunkler. Genau das möchte ich ja vermeiden.

Mr Light

Der Hintergrund deines Layouts ist einfarbig. Ich sehe keine Notwendigkeit für alphatransparente PNGs.
Nimm die Hintergrundfarbe in die Schattenbilder mit rein und gut is.

Da ist ein Hintergrundbild. Fängt oben links an.

Die version ohne Hinergrundbild, hatte ich schon vor 3 Monaten im Petto! Schau Dir das erste Bild im ersten Post an.

Mr Light

Was soll ich in dem ersten Bild sehen können? Sicher nicht deinen Code.

Es tut mir leid, ich kann dir ohne Codegrundlage und konkretes Layout nicht weiterhelfen.
Was du zuerst brauchst, habe ich dir bereits genannt. Erst wenn du das hast, dann kann man darüber reden, welche Elemente welche Teile des Layouts aufnehmen können.

Denkansatz:
Wenn du zwei verschachtelte Elemente hast und das äußere Element ein oberes padding hat, dann fängt das Hintergrundbild des inneren Elements erst nach dem padding an.