css,bilder

[planet_fox]

hallo forum,

ích habe mal ein ganz stupides problem. ich möchte auf einer seite einen banner in 1024pixel haben. ok kein ding abe rproblem ist wenn jemand eine niedrigere auflössung hat wird der banner abgeschintten der text ist flexibel. beim firefox gehts banner 100% auflössung.jedoch macht der ie8 ein riesen bild daraus. habt ih ne idee für das problem

 

[rini90]

hi,

du könntest passend für jede größe ein eigenes Layout anlegen. D.h. das er selbsständig ausliest, welche Auflösung der User hat und dementsprechend einen Banner mit dem passenden layout nimmt. Oder nur eine Unterscheidung nach ie und firefox machen.

 

[planet_fox]

Klar ich bau jetzt dann layout für safari, ie 6.0, ie 7, ie 8 zu aufwendig.

 

[M. Zink]

Sorry das ich erst jetzt antworte aber ich hab das Thema vorher nicht gesehen.

Eine Möglichkeit das zu realisieren wäre über Javascript. Das heißt im Body-Tag legst Du ein onLoad() Event an und da packst Du eine Funktion "resizebanner" an. In der Funktion fragst Du die Bildschirmauflösung und den Browser des Users ab, errechnest einen optimalen Abstand zum Rand und wendest dann die Styleparameter auf dein Banner an. Am einfachsten indem Du dem Banner bzw. dem IMG-Tag eine ID gibst und diese dann ansprichst. Und damit das Banner auch nicht erst mal in mega groß angezeigt wird gibst Du ihm das Styleelement visibility: hidden; damit das Banner erst mal nicht zu sehen ist und gleichzeitig erst mal die Größe 10px höhe und 10px breite. Die entgültige Größe ergibt sich ja aus deiner JS Funktion und dort kannst Du dann nachdem das Bild auf die optimale Größe resized wurde visibility: visible; machen damit es auch angezeigt wird.

Alternativ kannst Du das Banner direkt in verschiedenen Größen anlegen und dann in der Resize Funktion garnicht das Bild vergrößern oder verkleinern sondern einfach in Abhängigkeit der Auflösung das passende Bild laden. Also quasie if(screen.x > 800) image = "bannergroesser800.jpg";
if(screen.x < 800 && screen.x > 600) image = "banner600bis800.jpg";
usw. und manipulierst von deinem Image Tag einfach die SRC.

Falls Du nicht klar kommst schreib mit ne PN damit ich dran denke hier rein zu schauen hab auch fertige Code Fragmente falls nötig. Aber selbst erarbeiten macht ja meistens mehr laune bzw. hilft auch zu verstehen was da eigentlich abläuft.