Guten Abend & Hallo!

Ich bin hier im Forum an anderer Stelle auf das Thema „Onion Skinned Drop Shadows with JavaScript“ gestoßen. Dabei geht es um die Thematik, in html Schlagschatten zu erzeugen.

Diese Technik funktioniert in einer einfachen Testdatei sehr gut.
Doch beim Einfügen in meine html-Datei sieht man von einem Schlagschatten leider gar nichts

Ich trau mich nicht, den ganzen Quellcode zu posten, da ich überhaupt nicht weiss in welchem Teil davon der Fehler steckt..

Aber hier sind die einzelnen Links: html, das dazugehörende css, das für den Dropshadow zuständige css und die behaviour.js(original übernommen von Ben Nolan).

Ich weiss, es schaut nach sehr viel aus. Ist es aber gar nicht.
Drum bitte, erbarmt Euch und schaut drüber, ich sitz hier schon seit gestern Mittag an dem %&"§!

Hi!

Zitat von herrgarnele

Diese Technik funktioniert in einer einfachen Testdatei sehr gut.
Doch beim Einfügen in meine html-Datei sieht man von einem Schlagschatten leider gar nichts

Kannst du mal zum Vergleich die funktionierende Testdatei hochladen?

Guten Morgen Michael!

Ich habe die Testdatei hier hochgeladen: Link.

Da funktioniert es einwandfrei.
Ich muss irgendeine Anweisung in meinem general.css haben, die den Schlagschatten zerschiesst

//EDIT: Es ist schon seltsam. Selbst wenn ich in meiner Site (4tuts.html) im body alles ausser des mit einem Schlagschatten anzuzeigenden divs rauslösche, im body also nur noch steht:

Code :

1	<div id="popup" class="dropshadow" style="display:block;">&nbsp;</div>

Selbst dann zeigt es mir keinen Schatten an.

Mahlzeit

Wie es scheint, liegt es an der Positionierung (position:absolute & top:80px), sowie der margin-left-Deklaration für das DIV #popup.

Von daher solltest du diese Angaben auf ein übergeordnetes DIV übertragen:

Code :

1 2 3 4 5

#position { position:absolute; top:80px; margin-left:12px; }

Code :

1 2 3

<div id="position">      <div id="popup" class="dropshadow" style="width:300px;height:500px;background:#ff0000;">&nbsp;</div> </div>

Mahlzeit auch Dir Michael (wow hab ich heut spät Mittag gegessen)!

Danke erstmal für Deine Antwort!
Wenn ich in meine Arbeits-Datei ein Positionierungs-div 'aussenrumwrappe', funktioniert es fast! Der Schlagschatten wird angezeigt. Nur leider wird oben die ersten 65px kein Schlagschatten angezeigt (siehe angehängte Grafik).

Beim Testen in verschiedenen Bbrowsern ist mir aufgefallen dass der Schlagschatten ja nur im FF angezeigt wird
Weder IE7, IE6, IE5.5 noch IE5.1 zeigen den dropshadow an!!

Zitat von herrgarnele

Wenn ich in meine Arbeits-Datei ein Positionierungs-div 'aussenrumwrappe', funktioniert es fast! Der Schlagschatten wird angezeigt. Nur leider wird oben die ersten 65px kein Schlagschatten angezeigt (siehe angehängte Grafik).

Kannst du die aktuelle Version hochladen?

Zitat von herrgarnele

Beim Testen in verschiedenen Bbrowsern ist mir aufgefallen dass der Schlagschatten ja nur im FF angezeigt wird
Weder IE7, IE6, IE5.5 noch IE5.1 zeigen den dropshadow an!!

Hast du schon mal darüber nachgedacht, die Dropshadows ohne Javascript zu realisieren -> http://alistapart.com/articles/onionskin/?

Der Vorteil: Wenn JS im Browser deaktiviert ist, wird der Schatten weiterhin dargestellt.

Kannst du die aktuelle Version hochladen?

Ups sorry, das Workfile liegt hier.

Hast du schon mal darüber nachgedacht, die Dropshadows ohne Javascript zu realisieren

Das ist ein schwieriges Thema. Dieser Layer, der den Schlagschatten bekommen soll, wird in der finalen Version ohnehin per Javascript eingeblendet
Ich weiss, nicht gerade der tollste Weg, aber das ist leider die Vorgabe. Und da hab ich mir gedacht- ohne JS ist von dem Layer ohnehin nichts zu sehen, da kann ich gleich ein wenig html-Code einsparen und den Schatten via JS einbinden..

Meinst Du denn, dass die fehlende Unterstützung seitens des IE von dem Script verursacht wird?

Ich vermute halt, dass es an dem Script liegt, deshalb die Frage.

Ja, Du hast Recht. Ich habe das Skript in einer 'blanken' Umgebung getestet.
FF macht's, IE nicht. Hm, in diesem Fall komm ich wohl nicht um die lustige Verschachtelung drumherum.
Wow, mein Quellcode hat dann aber mal nen harten Anflug von Divitis!

In meinem Workfile bringe ich den Shadow mit dem CSS von Alistapart nicht dazu, sich zu zeigen..
Ich denke das liegt an diesen '»'-Anweisungen (die kenn ich leider auch nicht)..

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.wrap1, .wrap2, .wrap3 { display:inline-table; /* \*/display:block;/**/ } .wrap1 { float:left; background:url(shadow.gif) right » bottom no-repeat; } .wrap2 { background:url(corner_bl.gif) left » bottom no-repeat; } .wrap3 { padding:0 4px 4px 0; background:url(corner_tr.gif) right » top no-repeat; }

Mach ich's mit dem 'Alten' CSS, dann habe ich wieder die Lücke oben..

Das "»"-Zeichen signalisiert auf der ALA-Seite lediglich den Zeilenumbruch innerhalb der background-Wertangaben - nimm es einfach raus, und alles wird gut.

Oh je, danke für den Tipp

Dennoch bleibt oben die unschöne Lücke von 65px stehen (Screen siehe oben).

Ich hab jetzt mit geleertem Browsercache http://www.2klang.net/_temp/4tuts.html aufgerufen, um mir den Screenshot "live" anzuschauen, und seh derzeit überhaupt keinen Schlagschatten, dafür treffe ich aber in der shadow_test.css noch immer das besagte Zeichen an.

Verd... bitte entschuldige, ich arbeite ja meistens nur lokal.
Daher denk ich gerne mal nicht dran, die Änderungen direkt hochzuladen

Frag mich jetzt bitte nicht "Wieso - Weshalb - Warum", aber der Knackpunkt für die Lücke sind deine gesetzten Höhenangaben für das DIV popup und das darin eingebettete txtblock.

Mit diesen Werten schliesst sich in allen mir zur Verfügung stehenden Browser die Lücke:

Code :

1 2 3 4 5 6 7 8 9 10 11

#popup { ... height:500px; ... }   #popup #txtblock { ... height:455px; ... }

Guten Morgen!

Frag mich jetzt bitte nicht "Wieso - Weshalb - Warum"

Würd ich nie tun
Aber ich hab mich selbst dafür heute morgen - mit frischem Kopf - gefragt.
Und wenn ich die Höhenangaben für #popup und #txtblock wie von Dir angeregt verkleinere, dann ist der Schatten geschlossen. Allerdings nimmt die Höhe des 'Popups' dann ja auch ab.
Also hab ich mir mal die verwendete Hintergrundgrafik shadow.gif angeschaut und - surprise surprise - die hat 500px Höhe! Nachdem ich diese auf 560px hochgezogen habe, gibts die Lücke auch nicht mehr!