Banner nicht auf PDAs einbinden

[Cochrane]

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

[Ashura]

Hallo Cochrane.

Hat einer von euch noch eine Idee, entweder wie man den Text verbergen kann oder einen komplett anderen Ansatz?

HTML:

<img id="bannerbild" src="banner.gif" width="" height="" alt="" />  
<p id="bannertext">Bannertext</p>  

CSS für normale Browser:

  
#bannerbild{}  
#bannertext{display:none;}  

CSS für PDAs:

  
#bannerbild{display:none;}  
#bannertext{}  

Simpel, finde ich...

Ich würde nur ungern mehr als die CSS-Datei verändern müssen und auch das Banner gerne behalten.

So schlimm ist das nun auch nicht. ;)

Gruß, Ashura

[Cochrane]

Hallo,

HTML:

<img id="bannerbild" src="banner.gif" width="" height="" alt="" />

<p id="bannertext">Bannertext</p>

>   
> CSS für normale Browser:  
> ~~~css
  

> #bannerbild{}  
> #bannertext{display:none;}  
> 

CSS für PDAs:

#bannerbild{display:none;}
#bannertext{}

  
Würde dann ein Webbrowser auf einem PDA nicht trotzdem noch das Bild laden? Im Prinzip könnte mir das ja egal sein, schließlich sind es nicht meine Online-Gebühren, aber ich würde es trotzdem besser finden, wenn das anders nicht so wäre. Aber trotzdem vielen Dank für die Idee, ich werde dass jetzt erst mal so machen!  
  
Mit freundlichen Grüßen  
  
Cochrane

-- 
Güter auf die Bahn!

[Ashura]

Hallo Cochrane.

Würde dann ein Webbrowser auf einem PDA nicht trotzdem noch das Bild laden?

Nunja, im Source steht natürlich nach wie vor das <img /> Element.

Aber das Bild _sollte_ dann nicht mehr geladen werden, da das CSS ja schon zuvor die Darstellung unterbindet.

Sicher bin ich mir aber leider nicht...

Gruß, Ashura

[Lachgas]

Hallo Ashura!

Sicher bin ich mir aber leider nicht...

Kannst du aber sein.

(Solange der PDA das spez. CSS versteht.)

℆, ℒacℎgas

[Cochrane]

Hallo,

Kann es aber sein, dass der PDA das trotzdem lädt (gegeben er versteht das CSS), weil er die CSS-Datei nicht schnell genug geladen hat? Na ja, auch egal, bei mir funktioniert es jetzt prima.

Mit freundlichen Grüßen

Cochrane