✔ Probleme mit Dropshadow

[herrgarnele]

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 %&"§! :suspekt:

 

[Maik]

Hi!

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?

 

[herrgarnele]

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:

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

Selbst dann zeigt es mir keinen Schatten an.

 

[Maik]

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:

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

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

 

[herrgarnele]

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!!

 

[Maik]

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?

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.

 

[herrgarnele]

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?

 

[Maik]

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

 

[herrgarnele]

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)..

.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..

 

[Maik]

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