Hi,

ich arbeite an einer einfachen Seite um meine Musik mal ins Internet zu kriegen. Ich mache mir die Arbeit selbst und habe nicht vor die Musik in allen möglichen Portalen zu veröffentlichen, die Musik soll auf meinem Server primär sein. Dann habe ich auch sämtliche Daten wie Downloadanzahl etc. auf einen Blick und es gibt nicht so ein Chaos. Kann man sicher drüber streiten ob das eine gute Idee ist, aber warum eigentlich nicht.

Ich habe einen Drachen, welchen ich selbst mal gezeichnet, eingescannt und mehrfach je nach Einsatzzweck modifiziert habe. Der taucht eigentlich überall bei mir auf, hat sich irgendwie als eine Art Markenzeichen entwickelt. Da der auch auf jeder Rückseite meiner CDs drauf ist und eh mein Logo quasi ist, wäre es nicht unpassend, wenn der zentriert in der Mitte der Webseite stünde. Rechts vom Drachen soll man dann die Alben ganz einfach wählen können, links vom Drachen dann die Titel des selektierten Albums. Die Titel kann man dann direkt hören oder auch selektieren um sie später zusammen mit anderen selektierten runterzuladen. Traffic-Flatrate ist dabei wohl wichtig.... Um JavaScript oder alternativ Flash komme ich daher nicht drumherum. Wobei ich gerade kein Flash habe und daher JavaScript vorziehe. So viel zur Struktur an sich...

...und nun zu dem Problem: Wenn der Drache auch halbwegs sauber aussehen soll, muss er zentriert komplett gezeigt werden. Der Drache ist quasi ein Hintergrundbild, wobei es ein anderes Hintergrundbild noch gibt: Ein simples Muster unter dem Drachen, sozusagen der wirkliche Hintergrund. Das heißt dass ich via CSS den Drachen in die Mitte setze mit height : 100%; und ihn zentriere. Als Extragrafik nehme ich noch das Muster und setze es via z-index unter den Drachen. Soweit zur Theorie.
Link
Der Drache sitzt nicht in der Mitte, was mache ich falsch ? Der Code ist wie gewohnt immer über Browser einsehbar, der Beitrag hier wird sonst zu lang. Die Frage ist, ob man den Drachen überhaupt schön darstellen kann, da eben sämtliche Mittel, die ich in GIMP habe, um ihn mit dem Hintergrund schön zu verschmelzen, hier fehlen.

Versuch Nummer zwei läuft komplett über JavaScript ab. Es gibt recht viele jQuery-Plugins, welche eben das Bild passend skalieren. Ich zeige Euch hier nur eins davon, die restlichen produzieren alle den gleichen Fehler. Ich zeige Euch hier Fullscreenr, ein Plugin mit schönen Ergebnissen an sich: Link Sieht so gut aus. Bei meinem Bild schneidet er jedoch den Kopf weg sozusagen. Link Generell passt vieles nicht so gut da rein, beide Scrollbars sind zumindest bei mir aktiv. Alles andere als ein gewohntes Hintergrundbild daher. Ich habe die Auflösung 1680x1050. Das Bild da die Auflösung 1280x1024. Wenn ich das Firefox-Fenster verkleinere, wird nichts mehr weggeschnitten - ein Zeichen dafür, dass wenigstens ansatzweise was funktioniert. Erst ab einer gewissen Grenze tritt das Problem wohl auf, je größer das Fenster desto schlechter. Auch das Bild auf 1680x1050 Pixel zu skalieren brachte da keinen Erfolg, immer wurde der Kopf weggeschnitten. Der Fuß in gewisser Weise auch, er ist auch nur durch Scrollbar bei mir zu erreichen, was natürlich auch nicht das Ziel ist.
Da das Fehlermuster bei sämtlichen anderen JavaScript-Hintergrundskalierern auftritt, wird es wohl am Bild liegen - oder sogar an meinem 16:10 Seitenverhältnis ? Vielleicht überstrapaziere ich die jQuery-Plugins auch nur und sie können genau den Fall den ich bräuchte eben einfach nicht. Das versuche ich schon die ganze Zeit herauszufinden, aber viel mehr als "Oh toll wie das funktioniert" fand ich bisher nirgends.

Welche Lösung fällt Euch noch ein ? Habt Ihr Ideen, was bei den beiden Versuchen schiefging ?

Ein weiteres Problem ist natürlich dass ich auf Kompatiblität sehr großen Wert lege, was bei JavaScript und Flash beides nicht wirklich gegeben ist (wenn JavaScript deaktiviert ist, ist die ganze Seite Schrott). Um die Seite jedoch einfach zu gestalten wäre viel JavaScript-Einsatz wohl doch am besten, denn die Struktur der Seite wäre total leicht zu bedienen.
Kompatibilität verbinde ich immer damit, ob eine Seite gut ist und das hängt nicht nur von der Kompatibilität ab: Momentan sind es PNG-Dateien, für den Drachen bei der CSS-Lösung wohl sinnvoll, ansonsten ist PNG zu groß. Wie kann man die Dateien gut komprimieren ohne dass es auf großer Anzeigefläche eine miese Qualität gibt ? Ahso und nicht dass jemand jetzt einen Schock kriegt: Die PNGs sind nur zu Testzwecken da. Dass PNG zu groß ist und das auf Dauer einfach schlecht gelöst ist, ist gar keine Frage. Ich wollte bloß nicht mit verpixelten JPGs rumprobieren, ehe ich da eine schönere Lösung gefunden habe, da ich den Anblick mit maximierten Firefox einfach nicht ertrage immer wieder.

Gruß,
Nils

_________________
Meine Musik: spiker-music.net

Ich habe leider nicht ganz verstanden, wie dein gewünschtes Ergebnis aussehen soll.

Deshalb hab ich einfach mal dranrumgefummelt. Das Bild mit dem Drachen (übrigens sehr schick) habe ich etwas runterskaliert.
Was das saubere skalieren anbetrifft, würde ich diese Aufgabe niemals einem Browser überlassen.

Habe allerdings nicht ausprobiert Content in der Seite zu platzieren. Soll heissen, da müsstest du dann noch mal die z-indizes bzw position Eigenschaften im css prüfen/anpassen.

Klick mich.

_________________
Es werde Licht.
glEnable(GL_LIGHTING);
Und es ward Licht.

Zitat aus einem Java Buch: "C makes it easy to shoot yourself in the foot; C++ makes it harder, but when you do it blows your whole leg off"

on error goto next

Viel zu kompliziert.
ohne einen einzigen z-index oder ein position

Stichwort: background-position

greetings

_________________
If you find any deadlinks, please send me a notification – Wenn du tote Links findest, sende mir eine Benachrichtigung.
current projects: ManiacLab; aioxmpp
zombofant network • my photostream
„Writing code is like writing poetry“ - source unknown

„Give a man a fish, and you feed him for a day. Teach a man to fish and you feed him for a lifetime. “ ~ A Chinese Proverb

Ich glaube, er will den Drachen überall gleichgroß in der Mitte haben... Merkste, wenn du bei seinen Beispielen mal rein und raus zoomst...

_________________
Denn wer nur schweigt, weil er Konflikte scheut, der macht Sachen, die er hinterher bereut.
Und das ist verkehrt, denn es ist nicht so schwer, jeden Tag zu tun als ob's der letzte wär’.
Und du schaust mich an und fragst ob ich das kann.
Und ich denk, ich werd' mich ändern irgendwann.
_________________Farin Urlaub - Bewegungslos

Ah, das hatte ich auch überlesen: Du wirst um png nicht herumkommen. Das ist das bestkomprimierte Format mit Alphatransparenz. Außerdem sind 340kB heute nicht mehr so viel. Für mobile Nutzer kannst du per CSS immer noch ein anderes/garkein Hintergrundbild laden.

greetings

_________________
If you find any deadlinks, please send me a notification – Wenn du tote Links findest, sende mir eine Benachrichtigung.
current projects: ManiacLab; aioxmpp
zombofant network • my photostream
„Writing code is like writing poetry“ - source unknown

„Give a man a fish, and you feed him for a day. Teach a man to fish and you feed him for a lifetime. “ ~ A Chinese Proverb

Der Drache soll überall gleich groß sein, da er im Design so wichtig ist, dass er nicht unbedingt fehlen sollte. Das Hauptproblem ist die Skalierung eben, da je nach Fenstergröße einfach das Design zerissen wird und die Seite überall anders aussähe. Man könnte auch den Drachen extra skalieren via JavaScript und auf den Hintergrund setzen. Das ist aber dann auch nicht schön, dann könnte man nämlich gleich beide Hintergründe in eine Datei packen und hätte das gleiche Ergebnis vermutlich. Der Punkt ist einfach, dass der Drache bei genügend verkleinerten Fenstern dann abgeschnitten wird, daher die Idee mit dem Skalieren. Man kann halt nicht sagen "Sein Problem, wenn er sein Fenster so klein hat." Denn jetzt ein min-height mit 1024px reinzusetzen geht schon nicht, der Drache könnte hier größer dargestellt werden, während er bei anderen zu groß wäre.

_________________
Meine Musik: spiker-music.net

Kannst du nicht das Hintergrundbild per php generieren? Dann gibt es einfach immer das perfekt vorskalierte Bild...

_________________
Denn wer nur schweigt, weil er Konflikte scheut, der macht Sachen, die er hinterher bereut.
Und das ist verkehrt, denn es ist nicht so schwer, jeden Tag zu tun als ob's der letzte wär’.
Und du schaust mich an und fragst ob ich das kann.
Und ich denk, ich werd' mich ändern irgendwann.
_________________Farin Urlaub - Bewegungslos

Wäre denke ich unnötige Last für den Server, denn ohne JavaScript kriege ich nicht die passende Bildgröße raus. Dann ist es effektiver das direkt beim Anwender via JavaScript skalieren zu lassen.

_________________
Meine Musik: spiker-music.net

CSS3 hat da was: background-size

Üblicher ist es allerdings, die breite des Contents zu beschränken (width: …px).

greetings

_________________
If you find any deadlinks, please send me a notification – Wenn du tote Links findest, sende mir eine Benachrichtigung.
current projects: ManiacLab; aioxmpp
zombofant network • my photostream
„Writing code is like writing poetry“ - source unknown

„Give a man a fish, and you feed him for a day. Teach a man to fish and you feed him for a lifetime. “ ~ A Chinese Proverb

CSS3 funktioniert im IE nicht nehme ich mal an, jedenfalls klappt background-size nicht. Ich kann mir eigentlich nur vorstellen, dass man via JavaScript den Kram runterskaliert an innerheight bzw. innerwidth angepasst, wobei bei mir ersteres sinnvoller ist, da das Bild höher als breiter ist. Das Seitenverhältnis muss stimmen und die Höhe 100% ausfüllen, daher ist die Breite relativ im Seitenverhältnis zur Höhe. Die Frage ist eben, warum die jQuery-Plugins nicht funktionieren bei mir. Ist das im ersten Beitrag gezeigte JS-Beispiel funktionsfähig bei Euch funktionsfähig ? Es muss bei verkleinern des Fensters auch das Bild skalieren und es muss auch bei maximierten Fenster korrekt dargestellt werden, also ohne dass was weggeschnitten ist.

_________________
Meine Musik: spiker-music.net

Nein, es verhält sich wie der “cover” modus von CSS3. Also es wird der ganze Hintegrund ausgefüllt, was dazu führen kann, dass bei ungünstigem Seitenverhältnis dinge fehlen.

Die gennante Property wird laut dem Link ab IE9 unterstützt.

greetings

_________________
If you find any deadlinks, please send me a notification – Wenn du tote Links findest, sende mir eine Benachrichtigung.
current projects: ManiacLab; aioxmpp
zombofant network • my photostream
„Writing code is like writing poetry“ - source unknown

„Give a man a fish, and you feed him for a day. Teach a man to fish and you feed him for a lifetime. “ ~ A Chinese Proverb

Habe einige Stunden rumprobiert. Link
Das ganze kommt ohne JavaScript aus, benötigt auch kein CSS3. Warum auch immer das funktioniert, es funktioniert...oder anders herum: Warum sollte es nicht funktionieren, aber das fragt man sich ja immer.... Ist sozusagen eine Mischung aus allen Lösungsansätzen außer eben dem mit JavaScript. Ist auch angenehm wenn so grundlegende Dinge wie das Hintergrundbild ohne JavaScript oder Ähnliches korrekt dargestellt werden.

Werde jetzt mal den Drachen so anpassen dass das noch besser aussieht, diese Halbtransparenz wirkt finde ich noch nicht so ideal, aber das sind jetzt nur noch Design-Fummeleien.

Vielen Dank für Eure Hilfe!

_________________
Meine Musik: spiker-music.net