Wie skaliert ringvemedia.com eigentlich das Hintergrundbild? Ein drweb-Leser fragt und wir haben uns die Seite genauer angeschaut.
Formatfüllende Hintergrundbilder und moderne Browser sind natürliche Feinde. Nur selten gelingt die perfekte Positionierung der Bilder und wenn, kommen gängige Methoden nicht ohne Flash oder JavaScript aus. Mit den guten alten Tabellen aus vergangenen HTML-Zeiten gelingt jedoch die verblüffend einfache Illusion des perfekten Hintergrundbildes.
Wie es sich für echte Illusionen gehört, ist der Effekt beeindruckend und der Trick banal. Allen Anfang bildet ein günstig dimensioniertes Hintergrundbild, das später dynamisch um einige Prozent hochskaliert wird. In Hinsicht auf aktuelle Auflösungen habe ich ein schönes Stadtmotiv mit der Größe von 1024×768 Pixeln gewählt.
Unser Testbild im Browser
Das Hintergrundbild
Für den Effekt des dynamischen Hintergrundbildes wird das gewählte Motiv als ganz normales Bild eingefügt und von einer Tabelle und zwei Div-Elementen umrahmt. Die sonst als “böse” verschriebene Tabelle macht – nicht ganz im Sinne der Erfinder – den Effekt erst möglich.
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>eigenlt
<td>
<img alt="background" src="files/bg.jpg" />
</td>
</tr>
</table>
</div>
</div>
Die Konstruktion an sich wirkt sehr obskur, ermöglicht aber, dank der besonderen Eigenschaften der Tabellen in HTML, die besten Voraussetzungen für die spätere Positionierung. Die eigentliche Hexenküche verbirgt sich im CSS. Zunächst werden alle Elemente mit Ausnahme des Hintergrundbildes auf maximale Höhe und Breite gebracht. Ebenfalls muss der Überlauf der Elemente verborgen werden, da sonst unschöne weiße Bereiche zu sehen sind und Scrollbalken eingeblendet werden.
html,body,#bg,#bg table,#bg td,#content {
width:100%;
height:100%;
overflow:hidden;
}
Einmal die Konstanten hergestellt, muss nur noch das Bild auf die richtige Größe und Position gebracht werden. Dazu benötigen wir einen gewissen Rahmen außerhalb des sichtbaren Bereiches, in den das Bild bei nicht exakter Proportion des Browserfensters mit der Grafik hinein laufen kann. Dies wird durch doppelte Ausmaße des zweiten Div-Elements mit einer negativen Verschiebung nach links oben erreicht.
#bg div {
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%;
}
Im letzen Schritt der großen Formatierung wird nun endlich das Hintergrundbild positioniert und skaliert. Der konstruierte Rahmen beträgt einheitlich 50% und das Bild muss nur gänzlich in die Mitte gebracht werden. Hier schlägt die Stunde der völlig zu Recht nur in notwendigen Maßen zu verwendenden Tabelle. So wird das Bild vertikal und über den Umweg der Textformatierung auch horizontal zentriert. Leider ist die Interpretation der Kniffs über die Textformatierung je nach Browser unterschiedlich. Um die maximale Kompatibilität zu erreichen, wird zusätzlich das Hintergrundbild noch mit automatischem Außenabstand zentriert. Als Block-Element nimmt das Bild automatisch die vollständige Breite ein und kann als schönes Hintergrundbild brillieren.
#bg td {
vertical-align:middle;
text-align:center;
}
#bg img {
min-height:50%;
min-width:50%;
margin:0 auto;
display:block;
}
Kurz und Knapp: Das Bild wird immer auf die vollständige Breite des Browserfensters skaliert. Es wird automatisch zentriert und kann bei falschen Proportionen in einen umlaufenden Rahmen ausweichen.
Der Inhalt über dem Bild
Das Bild ist perfekt, aber immer noch ein normales Bild und nicht im Hintergrund. In einem weiteren Div-Element wird der Inhalt der Webseite absolut links oben positioniert. Anschließend muss nur noch der Seiteninhalt mit dem z-index vor das Hintergrundbild geholt werden.
#content {
position:absolute;
top:0;
left:0;
z-index:70;
overflow:auto;
}
Fertig! Das nicht ganz gewöhnliche Hintergrundbild ist voll XHTML 1.0 Strict und CSS level 2.1 valide. Mit Ausnahme von minimalen Abweichungen im Bereich von einigen Pixeln stellt jeder aktuelle Browser die selbstskalierende Grafik korrekt dar. Ein komplettes Beispiel der Anwendung gibt es mit einer abendlichen Impression von New York im ZIP-Archiv. ™
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Also ich finde Stefans Version klasse, auch ohne die IE6-Unterstützung. Wenn man IE6 verwendet, bekommt man halt kein Hintergrundbild. Ganz einfach.
Zur IE6-Debatte : http://www.browserforthebetter.com/
@Stefan: Deine Lösung für den IE6 ist ein guter Kompromiss. Sehr schön.
@Frank: Die IE6-Diskussion ist doch schon lange durchgekaut. Es gibt zu viele Menschen, die nicht mal wissen (wollen) was ein Browser ist und auch keine Ahnung (oder Angst) haben wie man was installiert. Darüber kann man sich nicht hinwegsetzen.
Ich stimme zu, dass man IE6 nicht völlig ignorieren darf. Aber bei rein kosmetischen, nicht essentiellen Unterschieden ist bei mir der Punkt, wo ich nicht gewillt bin, überproportional viel Zeit in die Suche nach einer Lösung zu stecken. Solange die Seite in IE6 benutzbar ist und nicht kaputt aussieht, bin ich zufrieden. ^_^
@Frank: Mir fällt gerade die Ironie auf, dass Microsoft eine Seite namens “Browser for the better” betreibt, bei der man nur eine schwarze Fläche vor sich hat, wenn man nicht das Microsoft-Plugin Silverlight installiert hat. Auf eine bessere Zukunft!
Also manchmal fragt man sich bei gewissen Code-Polizisten schon. Habt ihr den Artikel überhaupt gelesen, bevor ihr geifernd zur Tastatur gegriffen hab?
“Wie skaliert ringvemedia.com eigentlich das Hintergrundbild? Ein drweb-Leser fragt und wir haben uns die Seite genauer angeschaut.”
Die ersten zwei Sätze sagen alles: Ein Leser fragt und der der Autor liefert die Antwort.
@Wolfgang: Ich sehe das anders, man kann schon sanften Druck ausüben und den Design-Support für IE6 langsam auslaufen lassen. Semantisch korrekte Seiten werden dann immer noch lesbar und hierarchisch geordnet dargestellt…
Hallo
Also – ich find den Beitrag völlig O.K. Man muß es ja nicht machen.
@TruckTurner
Genau meine Meinung.
Was mich als “Anfänger” aber mal interessieren würde:
Alle selbsternannten “Supercracks” hier. Postet doch mal eure “Seiten & Projekte” Will gerne mal sehen (und lernen) wie fehlerlos, und “optisch geil” diese sind. Was nützt denn bitte die Note1 Seite wenn sie keinen “Ar***” interessiert.
Schönen Tach
Aros
Mir geht das ganze CSS-Besserwissergetue ganz schön auf die Nerven!
Tabellen sind ja so böse….. Da werden Standards hochgehalten an die sich niemand halten kann. Denn auch CSS-Layouts sind meistens nur mit Hacks (steht das irgendwo im Standard?) möglich. Von den Fehlern in den Browsern ganz zu schweigen.
Ist es wirklich gut für bald jeden Browser sein eigenes CSS zu erstellen nur damit das Layout ein CSS-Layout ist? So stelle ich mir keinen Standards vor.
Und wer macht denn überhaupt die Standards Zum Teil die Firmen, die sich dann mit ihren Browsern nicht an die Standards halten. Bei der Standardisierung wird zwischen den Firmen geschachert wie auf einem Basar. Das ist keine unabhängige Gruppe von Experten die das Beste macht.
Und von wegen CSS ist schneller, einfacher zu pflegen, barrierearm…..
Das hängt nicht von der Technik ab, sondern nur wie es umgesetzt ist.
Webseiten werden für Menschen gemacht, nicht für Standards! Und der normale Besucher interessiert sich nicht über die Technik, solange die Seite anständig funktioniert.
Das mit den Standards/CSS-Layouts artet schon langsam als Religion aus.
@Aros
Was für Nachweise willst du denn? Das es ohne Tabellen geht wurde schon bewiesen, und die Kritiker, die skalierende Hintergründe generell für unnötig halten, haben eben nicht die selben Vorstellungen von “optisch geil” wie du und werden ich also auch nicht überzeugen können.
@Frank
Das man sich an Standards halten kann, wurde von Stefan ja schon bewiesen. Keine Tabelle, selbes Ergebnis. Wozu also die Tabelle. Hier existiert kein Problem.
Und das Ein-eigenes-Layout-Für-Jeden-Browser-Horrorszenario ist ja wohl auch mehr ein “Ein Layout für alle Brower plus eine Handvoll-Anpassungen für ältere IEs (falls man sie unterstützen will/muss)”. Oh my God. Da wünscht man sich die gute alte Zeit von IE5 und Netscape 4 zurück, was?
@Adreas
“…Keine Tabelle, selbes Ergebnis. Wozu also die Tabelle. Hier existiert kein Problem…”
Ich sehe da auch kein Problem – auch mit Tabelle. Hauptsache es funktioniert. Wenn es mit Tabelle funktioniert würde ich keine Zeit mehr investieren es auch in CSS hinzubekommen nur damit es dem Standard entspricht.
“…eine Handvoll-Anpassungen für ältere IEs (falls man sie unterstützen will/muss)…”
Ältere IEs nicht unterstützen? Eines der Hauptargumente bei CSS-Layouts / Standards ist Barrierefreiheit.
Es nutzen aber (leider) noch viele User IE5.5 (war letzt bei einem der hatte den), IE6 etc. und können / wollen nicht wechseln.
Eine CSS-Seite in einem alten Browser ist praktisch nicht nutzbar. (Hängt natürlich vom Einzelfall ab). Da jedoch noch viele Leute solche Browser verwenden, werden damit wohl mehr Barrieren (und mit einer mangelnden Unterstützung sowieso) auf als abgebaut.
Unter einem richtigen Standard verstehe ich ein Standard der von unparteiischen Experten festgelegt wird (nicht wie beim W3C von Interessensgruppen (die sich selbst nicht an die Standards halten)).
“Tabellen sind ja so böse….. Da werden Standards hochgehalten an die sich niemand halten kann.”
Es erfordert halt ein wenig mehr Wissen, um diese Standards “hochzuhalten”. Standardisierung und CSS-based Layout haben Web 2.0 erst möglich gemacht. Also nicht lamentieren sondern einfach dran halten oder halt bie Google auf den hinteren Plätzen landen – zurecht !!
Dass die Orientierung an Standards und CSS langfristig Erfolg hat, zeigt doch ganz deutlich der Internet Explorer 8 – mit der Einführung dieses Browsers unterstützen nun alle großen Browserhersteller CSS 2.1 nahezu komplett – CSS 3-Support auf allen 3 “Plattformen” ist dann nur noch eine Frage der Zeit und die jahrelange Mehrarbeit von professionellen Webdesignern zahlt sich endlich aus.
Wenn Kunden noch mit IE6 surfen, gut : Allerdings bekommen sie von mir dann nur eine semantisch korrekte, aber eingeschränkte Version der Seite , entsprechend ihrer Technologie, zu Gesicht. Meine Beobachtung bei Google Analytics: Die Besucherzahlen bleiben gleich bzw. steigen sogar, der IE6-Anteil bricht drastisch ein.
“Standardisierung und CSS-based Layout haben Web 2.0 erst möglich gemacht.”
Was hat Web 2.0 mit CSS zu tun?
Web 2.0 ist ein Schlagwort, das für eine Reihe interaktiver und kollaborativer Elemente des Internets, speziell des WWW steht und damit in Anlehnung an die Versionsnummern von Softwareprodukten eine Abgrenzung von früheren Nutzungsarten postuliert. (Wikipedia)
Das hat eher was mit XML-Standards (für Dateiaustausch) etc. zu tun.
“Allerdings bekommen sie von mir dann nur eine semantisch korrekte, aber eingeschränkte Version der Seite , entsprechend ihrer Technologie, zu Gesicht.”
Und wenn das der Auftraggeber ist? Und selbst wenn nicht, erklärst Du ihm dann, dass er auf Kunden verzichten muss weil Du den Standard einhalten willst?
Ob das Google-Ranking besser ist weiß ich nicht. Nur hält sich selbst Google nicht daran. Schaut euch mal den Quellcode von google.de an. Da sind sogar noch Font-Tags drin. Tabellen natürlich auch. Und warum? Weil die wollen, dass die Seite auch auf alten Browsern funktioniert.
Ich bin ja nicht gegen Standards, im Gegenteil. Nur darf man jemand nicht gleich verteufeln weil er Tabellen einsetzt, wie in dem Artikel.
“Was hat Web 2.0 mit CSS zu tun?”
Sehr viel, es geht zum einen um Techniken wie AJAX etc., aber eben auch sehr viel um Interface-Design, daß sehr viel zur Abgrenzung des Web 2.0 zum Web 1.0 beiträgt – und damit sind wir wieder bei Standards und CSS.
“Und wenn das der Auftraggeber ist? Und selbst wenn nicht, erklärst Du ihm dann, dass er auf Kunden verzichten muss weil Du den Standard einhalten willst?”
Ja genau, seit etwa 10 Projekten mache ich genau das. Bisher hat noch kein Auftraggeber Unverständnis für diese Art Vorgehensweise gezeigt, zumal die erstellte Website damit zukunftssicher und schlank programmiert werden kann. Und nein, er muss auf keine Kunden verzichten, die bekommen eine korrekt gelayoutete Version (eben in einem vereinfachten Layout) zu sehen, außerdem müssen sie evtl. auf die ein oder andere Komfortfunktion wie Lightboxing oder CSS-Tooltips verzichten – oder eben umsteigen. Kernfunktionalitäten der Website wie Kontaktformulare etc. bleiben ja 100% funktionsfähig.
Google braucht sich ja nicht selbst zu ranken, von daher
…
“Nur darf man jemand nicht gleich verteufeln weil er Tabellen einsetzt, wie in dem Artikel.”
Wenn jemand dies an so exponierter Stelle tut, muss das Widerspruch eines jeden professionellen Webdesigners erregen – auch in anderne Programmiersprachen gibt es z.b. Entwurfsmuster , die man nicht einhalten muss, die aber in einem größeren Kontext gesehen Sinn machen…
Ich möchte darauf hinweisen, dass es nicht immer nur nach den Webdesignern geht. Oftmals wünschen sich eben Kunden, meistens reine Grafikdesigner, die keine Ahnung von der Umsetzung in eine HTML-Seite haben, so experimentelle Designs, dass man gar keine andere Wahl hat, als solche Workarounds und Hacks zu verwenden. Ich habe nämlich heute wieder so ein Beispiel auf dem Tisch liegen. Und in den Zeiten, wo noch mehr als die Hälfte der Benutzer mit dem IE unterwegs ist, sind solche Lösungen eben nötig. Dennoch bevorzuge ich natürlich tabellenlose Lösungen, allein schon wegen den Screenreadern und der Geschwindigkeit.
Wer Websites in Tabellen baut, schreibt auch Briefe in Excel. Solche Leute kann man einfach nicht ernst nehmen und sind nichts weiter als Frickler.
Wer behauptet, Webdesign ist nicht schwer, kennt auch nur Frickelsoftware wie Dreamweaver oder Golive. Niemand schreibt ernsthaft Tabellenlayouts von Hand.
Und wenn sich die Amateure unter euch so über die echauffieren, die ernsthafte, gute Arbeit abliefern und damit ihr Geld verdienen, werden sicherlich auch selber ihr Dach decken, das Auto reparieren oder sich die nächste Grippeimpfung selber verpassen, denn alle die, die sich dessen bewusst sind, dass ein Beruf mit Aneignen von aktuellem Wissen verbunden ist, sind ja nur „Cracks“ und „aufgeblasene Wichtigtuer“. #facepalm – Ganz einfach …
Interessante Diskussion, wenn ich auch behaupten will, dass diese Streitigkeiten mit anhaltender Dauer doch sehr ermuedend sind. Die Herrschaften haben wohl durch die Bank weg, egal ob Profi oder Anfaenger, etwas zu viel freie Zeit, die sie nicht besser wussten zu verschwenden als dass man sich an einem offensichtlich, an Anfaenger gerichtetes Beispiel, aufzuhaengen weiss.
Einen Anfaenger und so interpretiere ich die Ausrichtung der primaere Zielgruppe dieses Artikels, wird es herzlich wenig interessieren ob da jetzt eine Tabelle herangezogen wird um entsprechenden Effekt zu realisieren oder ob man es ueber ein Div-Layout, wie es doch in so vielen Anfaengerforen verschrieen ist, zur Umsetzung kommt. Ferner moechte ich Sie allesamt bitten, sich auf Ihre Anfaenge zu besinnen und ein wenig zu Reflektieren, ja sogar auf die heutige Zeit betrachtend, koennen sie dann guten Gewissens sagen, dass sie in semantischer Hinsicht noch nie, den ein oder anderen Fauxpas begangen haetten? Nein, sicher haben sie das nicht, denn man wird mit Faehig- und Fertigkeiten geboren, die sich andere ueber einen nicht unerheblichen Zeitraum, muehsam anlernen muessen.
Bitte reflektieren Sie doch, bevor Sie sich dazu genoetigt sehen solcherlei Diskussionen anzustreben, die letztendlich nie zu einem zufriedenstellenden Ergebnis fuer alle Lager kommen.
Meine Empfehlung zu solchen Fachdiskussionen, wenn man sie denn wieder mal fuehren moechte, waere es, dass man sich beim sinnieren ueber Webstandarts nur an Plaetzen aufhaelt, bei denen nur ausgewiesene Experten vertreten sind. Erst dann macht eine solche Diskussion wirklich Sinn und man findet sich im Kreise von Menschen, denen die Thematik genau so am Herzen liegt, wie einem selber. Die Webkrauts und Konsorten werden Ihnen sicherlich allen etwas sagen und wenn man einen Herren Jesse, durch solche Fachsimpeleien wieder zu mehr Aktivitaet verleiten koennte, haette es sogar etwas Produktives.
Ansonsten moege man doch auch immer einen gewissen Subtext mit erfassen, der hier eindeutig mitschwingt und nicht immer nur das sehen was man eben sieht.
Herzlichst: ein designierter Dino
Also auch in Hinblick darauf, dass ich jetzt gesteinigt werde, aber das skalierbare Hintergrundbild ist doch relativ einfach auch ohne wildestes CSS mit negativen Margins, ohne Tabellen und ohne jquery zu erreichen.
Das Bild kommt in einen eigenen Div, der absolut positioniert in den Hintergrund geschoben wird. Darüber wird ein neuer Div gelegt, in den der eigentliche Seiteninhalt kommt.
Der Einfachheit halber habe ich ein quadratisches Bild genommen, also 1:1-Verhältnis. Im Quelltext wird für das Bild keinerlei Größenangabe gemacht.
Vor dem schließenden Body-Tag kommt noch eine Javascript-Funktion, die checkt, ob die Anzeige breiter als hoch ist. In diesem Fall wird nur die Breite des Bildes mit 100% gesetzt. Im anderen Fall wird nur die Höhe des Bildes angegeben. Das Script muss auch bei Resize ausgeführt werden.
Anmerkung zum Beispiel: Der Hintergrund ist mit einem transparenten PNG gesetzt. Mit ist klar, dass das ohne weiteres Script im IE6 nicht funktioniert. UNd: Etwaige weiße Balken oder Werbeeinblendungen oben kommen von der Werbung bei Lycos, sorry, hab gerade keinen anderen Webserver hier.
Schaut mal hier:
http://mitglied.lycos.de/torstenhettler/bg/
Getestet im IE8,7,6 und FF3.5
Nun auch getestet unter Safari (Win) und Opera (9.64,Win)
> “Nochmal: In eine Tabelle gehören Daten, basta! Dafür ist eine Tabelle konstruiert und dafür MUSS sie auch benutzt werden. Nicht für sinnlose Designexperimente.”
Nur mal so am Rande… und eine Frage so ganz nebenbei
Für was sind denn Listenelemente gedacht? usw… Wofür werden sie heute verwendet?
Mir geht diese ständige Nörgelei auch tierisch auf den Zeiger, von wegen Professionalität und Standards. In der wirklichen (Berufs)praxis sieht das das nämlich alles schon wieder anders aus. Selbstverständlich bin ich auch der Meinung, man SOLLTE sich weitestgehend an Standards halten, aber manchmal erfordert ein Problem eine allumfassende Lösung (man beachte speziell den Bezug zu deaktiviertem JavaScript: In den meisten Unternehmen ist es nun mal deaktiviert, die Zahl von Privatanwendern ist mittlerweile dagegen verschwindend gering).
Und auch an die, die strikt auf nur DATEN in einer Tabelle bestehen, was sind DATEN?
Auch ich werde sicher nicht in die Lage geraten, das Beispiel des Autors zu verwenden, dennoch finde ich den Ansatz gut! Über 9 Jahre Erfahrung haben (leider) gezeigt, dass nicht immer alles was als Standard Kategorosiert wird auch effizient oder gut (besser) ist. Das genannte Beispiel zeigt nun auch nicht gerade eine komplexe Oberfläche mit Tabellen gestaltet – also immer schön locker durch die Hose atmen!
_sorry für den langen text_
ps.: http://jendryschik.de/wsdev/einfuehrung/auszeichnung/tabellen
Köstlich – die sich über den Artikel aufregen, sind einfach nur Fachidioten.
Fachidioten, deshalb weil sie schon vor Selbstherrlichkeit nicht mehr richtig lesen können, und wer nicht mehr richtig lesen kann, der kann erst recht nicht mehr richtig zuhören.
Der Fachidiot liest – Tabelle – dann setzt sofort der fachidiotische Automatismus ein, der eigentliche Informationsgehalt wird ausgeblendet und es wird kompromisslos gelehrmeistert – Tabellen dürfen nicht, dürfen niemals, unter gar keinen Umständen, usw. usw. ja sogar auf schärfste angeprangert.
Der Artikel gibt die Tabelle nicht als Anregung , sonder beantwortet nur die Frage eines Lesers nach dem wie es gemacht wurde.
Wie so verstößt eine Antwort auf eine Frage „Wie ist das gemacht worden“ , gegen den Standard von W3C? Denn es war keine Frage:“Wie löse ich ein Problem“.
Die Lösung kommt auch nicht vom Autor selber, sonder er hat nur das wiedergegeben was in der “http://ringvemedia.com/g/a.css” steht.
Der Fachidiot leidet meistens unter einem Profilierungszwang.
Es muss natürlich unterschieden werden zwischen Fachidioten und Fachleuten. Zum Glück gibt es mehr Fachleute als Fachidioten.
Jürgen
PS: Eine nicht W3C konforme, aber funktionierende Webseite, ist nicht undicht, rostet nicht, ist nicht gesundheitsgefährdend (außer für Fachidioten), ist nicht strafbar, zerstört nichts, hat halt nur den Nachteil, das nicht jeder User sie erreicht oder nicht zeitgemäß ist . Gründe warum – gibt es viele.
Wer lesen kann ist klar im Forteil. (lesen = Sinn verstehen)
Frei nach Adenauer: Man mutt de Lüü so nämme wie sie sinn, denn et jeff känn angerte (Man muss die Leute so nehmen wie sie sind, denn es gibt keine anderen).
Mal zum Thema: Die im Artikel vorgestellte Lösung hat ein Problem mit Opera 9.6x (die gesamte Seite scrollt weg, samt Hintergrundbild) und mit Mobile Safari von iPhone OS 2.2.1 und 3.0 (Scrolling sowie Bild, das sich nicht auf den Canvas erstreckt).
Hallo und auch nochmal zum Thema:
Zu Stefans Lösung (Post 16) fällt mir ein kleiner Haken auf: Die negativen Margins bzw. ihre Auswirkungen, wie sie bei GOTOCHINA bestehen, fallen weg. (FF 3.5)
Könnte da evtl. Heikos Bespiel (Post 18) weiterhelfen? Es scheint dem Tutorial nach letztlich auch gänzlich ohne JS auszukommen, allerdings kann ich das Scrollverhalten des Hintergrundbildes gerade nicht ganz nachvollziehen…
Um mich noch kurz zu begründen: Ich finde den Umstand, dass ein Bereich des Hintergrundbildes weitestgehend an der gleichen Position bleibt recht nützlich, um so Inhalt dem Bild grob zuzuordnen. Dies geschieht auf GOTOCHINA wenn die Navileiste auch bei starker Skalierung noch im dunkleren Bildbereich bleibt, oder es zumindest “versucht”.
Vielen Dank jedenfalls an den Autor sowie Stefan und Heiko für ihre Beiträge!
PS: @ Harry Schmieder (Post 36)
Ich kann es mir leider nicht verkneifen, aber ich hoffe, das es produktiv für Sie ist:
http://de.wikipedia.org/wiki/Form_follows_function#Fehlinterpretation
Beste Grüße,
Manuel
Hallo,
finde die Lösung von Stefan auch super! Danke! Noch besser wär’s aber wenn das ganze mittig ausgerichtet wäre mit einem “negativen Rand”, das ist bei der Tabellen Lösung ganz schön gelöst…
Also ich habe mir das “Gekeife” hier wirklich angetan…
Bitte denkt bei Webdesignern auch an die Webdesigner die in Agenturen arbeiten und durch die Verwendung von nicht wirklich semantisch korrekten einen Kunden ein Stück weit einen Wunsch erfüllen können, so die Zufreidenheit steigern und die Arbeitsplätze die der Kunde sichert für seine Kollegen ein Stück weit sichert. Es will mir ja wohl niemand erzählen, dass er einen Kundenwunsch der so lächerlich banal ist und gleichzeitig auch sogar gut ausehen kann (was nicht bei jedem Wunsch daruf hinausläuft) nicht erfüllt?!
Ich finde eine Lösung mit JS deutlich(!) unangenehmer. Was bringt einem die Ersparnis der Tabellen wenn ein Teil der Betrachter ohne JS dann doch nicht das sieht wie man es sich gedacht hat. Das CHINA Beispiel spricht da doch Bände. Evtl. ist man auch neidisch auf die Resonanz der Seite ansich. Denn sowas unnötiges wie ein Hintrgrundbild in ner Tabelle kann doch dafür sorgen, dass ettliche Menschen über eine Seite reden und ich kann mir den Betreiber sehr gut vorstellen, und das Lächeln das Ihm diese kostenlose Werbung ins Gesicht zaubert. Wir sind immenoch Webdesigner. Einige denken in Kompromissen und machen Webseiten für das eigene Ego und cas w3c, andere jedoch machen es für die Betracher. Und wenn bei dem Beispiel jemand nicht das Design im Vordergrund sieht und die Relation zu dem kleinen Opfer der Tabelle die am Ende nur einen selbst stört der ist kein webDESIGNER sondern Programmierer und das ist ja auch OK. Aber irgendwann kommt ein Webdesigner daher und will es genau so haben weil es super zum Konzept passt und sich dadurch 20 Schulterpolter im Monat mehr verkaufen. Also Zustimmung an die #27 und Gruß
@ Klawischnigg (#25, #30)
(PS: der Link hinter meinem Namen gehört mir nicht, aber der Quellcode gefällt mir
)
Hallo, Deine Meinung ist von allen hier dargebotenem schwachgeistigen Auswürfen noch die akzeptabelste. Selbst in den 90ern hat man Tabellen zum Layouten benutzt, da gab es die meissten Akteure hier noch gar nicht
) und interessiert hat es damals auch keinen, ob da ne Tabelle im Hg werkelt oder nicht. CSS war damals für die meissten Frischlinge hier ein Fremdwort. Lass sie kämpfen… für Tabellen mit Daten 
) Die Browserhersteller sind nicht an Standards interessiert, also muss man gerade als Layouter Hacks anwenden – damit das Endprodukt in ALLEN BROWSERN gleich aussieht. Die Verwendung von javascript und Flash ist im Grunde NICHTS ANDERES, aber macht nen professionelleren Eindruck 
)) Amazon, ebay und co existieren nur so erfolgreich, weil sie voller Hacks stecken. Aber davon wollen die Möchtegernprofis hier nichts wissen… und ich ärgere mich nun, dass ich hier meine gute Zeit verschwendet hab…
Liebe Grüße vom Niederrhein Klawischnigg
Habe mich beim durchlesen aller Kommentare sehr amüsiert.
Ich gehöre noch zu jenen welche mit einem Texteditor (proton) in php, javascript und html ganze Webseiten erstellen.
Ich bezweifle ernsthaft das die mehrzahl der Kommentarschreiber dies ohne Bücher oder Internetsuche nach Kodeschnipsel fertig bringen.
Eine bessere Lösung als den vorgestellten Code hat lediglich “Stefan” vorgestellt – meine Hochachtung, wirklich gut.
Ideen sind dazu da verbessert zu werden. Wem die Grundlagen der Idee nicht gefallen der soll diese ersetzen. Oder die Idee für sich verwerfen. Unqualifizierte Kritik kann man als Kleingeistig oder auch typisch Deutsch betrachten.
mfg, rainer
Vielen Dank für dieses nette Tutorial.
Einige haben hier vielleicht Ansichten… “Hauptsache funktioniert” ist nun wirklich kein Grundsatz, nach dem man programmieren oder gestalten sollte…. Und bei Sätzen wie “Selbst in den 90ern hat man Tabellen zum Layouten benutzt” kann man nur mit dem Kopf schütteln…
Super diskussion. sehr schön… mir als designer, der manchmal den css- und frontend-göttern auf die finger hauen darf und manchmal es auch selbst schreibt bleibt nur zu sagen – danke – ihr tollen hechte hier alle.
ihr tut mir echt leid, dass ihr euch mit dem gefrickel rumärgern müsst und ich habe immer verständnis für jemand, der mir erklären kann, warum er das bei ENTWICKLERN und FRONTENDLERN so allseits beliebte “Nein..” oder “Geht nicht..” hinwirft. Dagegen kämpfen wir Designer nämlich seit 10 Jahren an…. gerne würde ich mal einen Entwickler treffen, der da dynamischer, flexibler ja sogar kreativer ist. Unter 50 kenne ich einen… und der sitzt in Kölle.
Ja wir Designern sind es meistens, die für irgendeinen so bekackten Werbefuzzidoofarschkunden in oft nächtelangen Runden, irgendein beknacktes Superdesign abliefern müssen.
Ich würde auch gerne immer in Notepad und mit Filezilla anfangen und dann die Tupfen in Photoshop reinsetzen – und so arbeite ich auch privat oder als Freelancer für kleine Projekte – aber wenn der scheissgrosse, schreissreiche oder dazu noch scheissdoofe Kunde halt so ein SchiSchi Design will und wir es ihm auch nicht ausreden können, weil wir alle geil auf das ManniManni sind … und ihr Entwickler nach 10 Tagen Design, dann 6 Monate Projekt und einen sicheren Arbeitsplatz habt…. dann … dann… ja jetzt holt er ganz tief LUFT… dann erwarte ich von Euch Korinthenkackern auch mal das ihr über Euren Schatten springt und zur Not ne Scheiss-Table in eure Div-Gebirge reinhaut – da wir 2011 immer noch keine Lösung für den einen oder anderen Gestaltungswunsch haben (AUSSER FUCKING FLASH!).
ALSO REISST EUCH ZUSAMMEN IHR WEBBIES und pisst mir die Tabelle in den Schnee und dann kann ich in Ruhe meine 20 Photoshops fertig pinseln, die der Kunde nämlich erst mal abnehmen muss, bevor ihr Schlaumeier ans Hacken gehen könnt.
ALLES KLAR! Ich weiss wovon ich spreche! es lebe das was aber auch nur eine kurzform von > ist.
Und wenn jetzt jemand Barrierefreiheit schreibt – dann kann er sich schon mal selbst ins Klo stecken… Barriefreiheit ist ein eigenes Projekt und da dürft ihr auch gerne beim Kunden auf dem Schoss sitzen.
NICHTS FÜR UNGUT – ich meins auch nicht wirklich ernst
wat kein html hier erlaubt??!? das sollte man aber auch ranschreiben herr doktor!
! es lebe das DIV was aber auch nur eine kurzform von table> ></table ist.
ach vergesst einfach den vorletzten absatz
Was mir gerade auffällt ist, dass der neue Safari(5.1) auf dem Mac nicht richtig skaliert. wenn man das Browserfenster schmal macht, entstehen oben und unten Leerräume. Das Bild skaliert also nicht in der Höhe.
Danke für die Ausführungen, wenn sie auch schon etwas älter sind…
Meine Frage zum Thema: Wie oben beschrieben, fließen bei dieser Art der Skalierung an allen 4 Rändern (je nach Skalierung in Höhe und Breite) Bildteile über, d.h. fallen im Bildausschnitt weg. Gibt es eine Möglichkeit, es so einzurichten, dass der linke und obere Bildrand immer fix bleibt (die Bildränder des Ursprungsbildes also immer zu sehen sind und links und oben fest anliegen) und nur der rechte und untere Bildrand beim Skalieren beschnitten wird?
Herzlichen Dank für Hilfe!