Dubiose Probleme mit transparentem div
heut
- design/layout
Hallo!
Ich hab ein ganz komisches Problem mit nem transparenten div Element.
Ich möchte als Bilderauswahl nen kleinen Filmstreifen auf ne Seite setzen, wobei das ausgewählte Bild immer klar dargestellt werden soll und alle anderen mit einer Art Milchglas davor. Das wollte ich einfach über jedes Bild nochmal ein div Element legen und je nach Auswahl die Transparanz der Elemente vergeben.
Im Firefox klappt das ohne Probleme, aber dann hab ich mir das ganze mal im IE 7 angeschaut. Da will es nicht so recht.
Wenn folgendes ohne jegliche andere Inhalte in ne Datei speichern, dann funktioniert es wunderbar.
<img src="images/platzhalter1.gif">
<div style="position: absolute; background-color: red; width:200px; height: 200px; margin-top: 50px; margin-left: -50px; filter: alpha(opacity=50);"></div>
Wenn ich exakt das gleiche in den Content der HP Setze, dann wird der layer zwar wohl transparent / milchig, aber das Bild scheint nicht im geringsten durch.
Ich hatte am Anfang den Verdacht, dass sich irgendwo ein Fehler eingeschlichen hatte, aber der HTML Validator zeigt keinen.
Kann mir jemand helfen?
Manuel
Hallo Manuel,
Im Firefox klappt das ohne Probleme, aber dann hab ich mir das ganze mal im IE 7 angeschaut. Da will es nicht so recht.
Wenn folgendes ohne jegliche andere Inhalte in ne Datei speichern, dann funktioniert es wunderbar.
<div style="... alpha(opacity=50);"></div>
in welchem der beiden Browser funktioniert das? Doch nur im IE?
Wenn ich exakt das gleiche in den Content der HP Setze, dann wird der layer zwar wohl transparent / milchig, aber das Bild scheint nicht im geringsten durch.
Der Layer wird transparent, aber das Bild scheint nicht durch? Aha!?
Gibt es das Beispiel online? Und dann kontrolliere bitte noch mit welchem Browser du welches Verhalten bekommst.
Grüße,
Jochen
Hallo!
Ok, war wohl in der Eile etwas zu schlampig :-)
Im FF geht das filter klar nicht. Ich hatte das ganze am Anfang im FF entwickelt, wobei alles mit js geschehen soll und da hat alles funktioniert. Eigentlich war ich auch davon ausgegangen, dass meine setOpacity Fkt da keine Probleme macht.
Im IE7 tut das ganze aber nicht. Das Beispiel ist momentan unter http://www.ochsen-uhlbach.de/chronik.php. Inzwischen so abgeändert, dass das Bild in einem div als Hintergrund verankert ist, weil ich nicht wusste ob's am img liegt.
Sieht grausam aus aber ist grad nur zu Testzwecken so.
Manuel
Aso... user: 123 passwort: 123456
Nur gegen Suchmaschinen im Moment
Hi,
Das Beispiel ist momentan unter http://www.ochsen-uhlbach.de/chronik.php.
die 404-Einträge, die Du in Deinem Server-Logfile findest, stammen von mir.
Cheatah
Ok, Link auch falsch... sorry, schraub nicht alleine dran rum...
http://ochsen-uhlbach.de/newhp/chronik.php
Hi,
Ok, Link auch falsch... sorry, schraub nicht alleine dran rum...
http://ochsen-uhlbach.de/newhp/chronik.php
die Darstellung zwischen Gecko und Trident ist dermaßen unterschiedlich, dass mir nicht klar ist, welche Darstellung jetzt eigentlich gewünscht ist. Kannst Du dies bitte mit einer Grafik vermitteln?
Cheatah
Hallo!
Was man grad auf der Seite sieht ist einfach nur der IE Test. Alles andere ist auskommentiert im Moment.
Das Problem ist folgendes:
Wenn ich eine komplett leere Datei nehmen, ein Bild reinsetze und ein Layer mit der Alphafilter für den IE transparent mache, dann scheint das Bild bzw. die Inhalte vom Bild durch.
Wenn ich exakt das gleiche als Content auf de, angegebenen Link reinsetze, dann scheinen nur noch die Umrisse von der Grafik durch, nicht aber das was auf der Grafik drauf ist. Ich hab dazu mal noch weiße Linien in die Grafik gesetzt. Dort wo die Elemente überlappen sind diese aber nicht mehr zu sehen.
Hoffe wurde jetzt klarer?
Manuel
Hi,
Was man grad auf der Seite sieht ist einfach nur der IE Test. Alles andere ist auskommentiert im Moment.
genau deswegen bitte ich um eine Grafik, auf der ich das gewünschte Ergebnis erkennen kann. Mir ist nicht klar, was sich nun davon unterscheidet; die von Dir beschriebenen Effekte finde ich nicht.
Cheatah
Hallo!
Ok, ich hab ein PDF mit 2 Screenshots bzw. Ausschnitten davon. http://ochsen-uhlbach.de/newhp/problem.pdf
Es gibt auf dem Server noch die Datei http://ochsen-uhlbach.de/newhp/transparent.php. Daraus kommt der 1. Screenshot und so soll es auch aussehen. Die Grafik wird von einem div überlagert, aber scheint durch. In der chronik Datei scheinen nur die Umrisse der Grafik durch als dunkle Fläche und so soll es nicht sein.
Manuel
Hallo heut
… Das wollte ich einfach über jedes Bild nochmal ein div Element legen und je nach Auswahl die Transparanz der Elemente vergeben.
Ist das „Milchglas” davor wirklich nötig?
Ein teiltransparentes Bild sieht genauso aus wie eins, dass durch ein teiltransparentes Element verdeckt wird (zumindest, wenn der Hintergrund hinter dem Bild die selbe Farbe wie das „Milchglas” hat).
Kann mir jemand helfen?
Vielleicht hilft dir dies: Durchsichtige Elemente (Transparenz/Opacity)
Auf Wiederlesen
Detlef
Hallo Detlef,
super, danke! Das ist die Lösung!!
Klar reicht es auch das Bild in der Transparenz zu verändern damit es milchig wirkt!
Vielen dank!!!
Manuel