nicht angemeldet
Hallo,
Ich arbeite gerade an meiner Homepage und möchte es auch schaffen, dass die ganze Sache auch auf PDAs gut aussieht. Mit CSS geht dass ja im Prinzip auch gut und die meisten Sachen laufen, aber ein Problem habe ich doch. Auf meiner Seite habe ich ein recht großes Banner, welches breiter ist als der Bildschirm mancher PDAs hoch (in Pixeln). Für PDAs möchte ich ein kleineres einbinden (oder die Formatierung nur mit Textformatierung machen, dass weiß ich noch nicht sicher). Nur habe ich keine Ahnung, wie ich das tun soll.
Die Lösung, welche ich zuerst probiert hatte, war das Banner in ein <div> einzubauen und dieses dann über das Stylesheet mit display:hidden zu verbergen, wenn die Seite auf einem PDA betrachtet würde. Die Lösung hat verschiedene Nachteile, beispielsweise ist dann der Text des Banners zweimal auf der Seite (als alt des Bildes und nochmal als normaler Text) und das Banner wird eventuell auch geladen, obwohl es keiner sieht.
Der zweite Ansatz war, einen <div> zu definieren, der dann in der Stylesheet-Datei die größe des Banners erhielt und das Banner als Hintergrund. Als Fallback steht im <div> selbst dann der Text des Banners nochmal. Die Lösung wäre prima, wenn nur dieser doofe Text nicht da stünde. Mit visibility:hidden und display:none verschwindet auch immer gleich der Hintergrund, ebenfalls mit opacity:0. Mit der Textfarbe als rgba(0, 0, 0, 0), also Text auf Transparent, funktionierte es bei Safari prima. Aber auch nur dort, Firefox zeigt den Text trotzdem an. Mit negativen Werten für margin-top und top verschwindet auch immer ein Teil des Banners, negative Werte für padding-top werden nicht akzeptiert, zu hohe Werte für padding-bottom sorgen dafür, dass das Banner wiederholt wird und der Text trotzdem stehen bleibt.
Die Textfarbe auf Farbe des Banners ist schlecht, weil das Banner einen Verlauf hat. Ich habe versucht, die Textfarbe auf den Wert des Banners an einer Stelle zu kriegen und dann den Text mit padding zu dieser Stelle zu verschieben, aber dadurch wurde das Banner zu breit, was sich auch mit max-width und overflow:hidden nicht beheben ließ.
Hat einer von euch noch eine Idee, entweder wie man den Text verbergen kann oder einen komplett anderen Ansatz? Ich würde nur ungern mehr als die CSS-Datei verändern müssen und auch das Banner gerne behalten.
Mit freundlichen Grüßen
Cochrane
Güter auf die Bahn!