Hallo erstmal,

ich habe noch nicht so viel Erfahrung mit CSS und XHTML, fange grad erst an und bin auf ein Problem gestoßen.

So, nun zum Problem:

Ich habe ein PNG-24 Bild, das in der Mitte Transparent ist und zur Transparenz hin einen Weichen Übergang. Dahinter ist Text, der gescrollt werden soll.
Der Text und darin enthaltene Bilder sollen beim srollen so "smooth" in dem Übergang verschwinden.

Bisher hatte ich nur schwarzen Text mit schwarzen Übergang, da war der Text einfach vor dem Bild, und es sah so aus als ob der Text verschwinden würde. Nun jedoch verschwinden Bilder natürlich immer da "schwarf", wo die div-Box zuende ist.
Also habe ich davor dieses Bild mit Transparenz eingefügt, aber jetzt kommt man nicht mehr an den scrollbalken, der jetzt ja hinter dem Bild liegt.
Gibt es mit CSS eine Möglichkeit, das man zwar das obere Bild sieht aber auf den Inhalt dahinter zugreifen kann?
Sonst muss ich oben ein Bildchen stückeln und und unten ein Bildchen stückeln, vielleicht gehts ja auch eleganter .

Vielen Dank schonmal für eure Ideen!

PS.: Ja, ich weiß auch, dass der blöde blöde MS IE schöne tolle transparente PNGs nicht unterstützt, aber erstmal gehts ums Prinzip und wenn im Sommer der IE 7 kommt kann ich's ja so machen.

Da viele User des IE so gern updaten, wie eine Kuh Lust zum Seilspringen hat, wirst du auf die tollen transparenten PNGs wohl noch ein wenig länger verzichten müssen.

Gruß Vaeth

Ein Kommentar, aber keine Hilfe Vaeth ^^

Du wirst ums Stückeln nicht herumkommen, es sei denn du nimmst das png als Hintergrundbild, bei dem die "smoothen" Ränder den gleichen oder einen ähnlichen Farbton wie die Schriftfarbe haben.
Dann ist der Übergang auch weicher.

Ansonsten eben oben und unten ein img zufügen.

Alternative wäre ein Flash-filmchen, das nur aussieht wie gewöhnliches HTML.
Ist aber wenig zugänglich und hat meist enorme Ladezeiten.
Ein Beispiel online wäre auch hilfreich

grüsse andir

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Hm.. bin zwar auch kein grosser CSS-Koenner, aber vielleicht funktioniert es ja wenn du das Bild in einen div oder ein span gibst, und das mit z-index in den Vordergrund, ueber den Text legst. Die Groesse des spans oder divs muesste dann nur die exakte Groesse deines Bildes haben, so dass die Scrollleiste rechts neben dem Bild ist.


- killy

Ich habe es nach killys Vorschlag gemacht und hoffe, dass bei allen Browsern die Scrollleisten genormte 17 Pixel breit sind.

Ja, ich weiß, dass man mit dem exessiven Einsatz von Transparenz noch ein bisschen warten muss, aber es ist so schön...

Kann man irgendwie einbauen, dass der IE bestimmte Elemente (in diesem Fall das Bild, das vor dem Text liegt), nicht anzeigt? Und stadessen ein anderes anzeigt, das Firefox und Co nicht anzeigen?
Oder muss ich da so 'ne Weiche einbauen die auf eine komplett andere Seite weißt? Wenn dann müsst ich mir raussuchen, wie das geht oder jemand ist so freundlich mir den Platz im Web zu zeigen, an dem die beste Lösung steht .

Das transparende Bild hat jetzt auch den vielleicht ganz netten Effekt, dass der Text nicht einfach so markiert werden kann...

Ach ja, jemand wollte sehen, wofür ich das brauche, also werde ich mal kurze Zeit den Entwurf veröffentlichen. Wenn es sich jemand ansieht könnte er auch gerne seinen Dampf und Verbesserungsvorschläge ablassen. Abgesehen davon, dass die Größe der Bilder im Moment noch zu groß ist. Ich werde dann später die Sachen mit JPEGs stückeln, die keine Transparenzen haben um Ladezeiten zu sparen.
Danke schonmal für Eure Meinung.

Gruß AnyKey

hm.. wenn du keinen browsercheck machen willst und nur beim IE die Graphik nicht anzeigen lassen willst, probiers halt mit "<!-- if [IE]>",
wo du dann das style wieder umdefinierst (background:[transparent|none])

Zum Nachlesen:
http://www.quirksmode.org/css/condcom.html

- killy