Adrian Bechtold 16. Juni 2009

Hintergrundbilder eindrucksvoll mit CSS skalieren

Kein Beitragsbild

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. ™

Adrian Bechtold

arbeitet als Kommunikationsberater für IT-Unternehmen und bloggt gerne über Webtechnologien.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

90 Kommentare

  1. Ich habe es viel einfacher umgesetzt. Einfach:

    in der CSS:

    body {
    background-size: cover;
    background: url(image.jpg);

    }

    Background kann natürlich auch in der HTML Seite im Tag platziert werden.

  2. Eure Papies kennen sich sicher mit Aldus Huxley aus ;-)
    Und trotzdem haben selbst die negativen Reaktionen auf diesen Artikel etwas Gutes!

    Vielen Dank für den Artikel an Dr Web und den Autor!
    Lasst Euch nicht vom Zeitgeist aus der Ruhe bringen.

    Alle aktuellen Browser, PC, MAC, iPad und iPhone:

    HTML Datei (index.htm)
    ————————————————————————

    Hallo Welt

    CSS Datei (hallowelt.css)
    ————————————————————————

    BODY {
    font-family : arial;
    }

    #bg {
    position:absolute;
    width:100%;
    height:100%;
    left: 0%;
    }

    #bg img {
    min-height:100%;
    min-width:100%;
    margin:0 auto;
    display:block;
    }

    a {
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }

    Beste Grüße
    Hiro

  3. 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…

  4. Vielen Dank für dieses nette Tutorial.

  5. 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

  6. @ 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 ;)

  7. 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ß

  8. 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…

  9. 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

  10. 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).

  11. 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).

  12. > „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_

  13. Nun auch getestet unter Safari (Win) und Opera (9.64,Win)

  14. 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

  15. 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

  16. 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 …

  17. 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.

  18. „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…

  19. „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.

  20. „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.

  21. @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)).

  22. @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?

  23. 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 (http://www.w3.org/Consortium/Member/List)? 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.

  24. 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

  25. @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…

  26. 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.

  27. @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! ;-)

  28. 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. ^_^

  29. @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.

  30. Also ich finde Stefans Version klasse, auch ohne die IE6-Unterstützung. Wenn man IE6 verwendet, bekommt man halt kein Hintergrundbild. Ganz einfach.

  31. Tricks und Umwege bei der Website-Erstellung gibt es doch schon immer. Man möchte eben eine bestimmten Effekt oder hat eine Idee/Vorstellung die man umsetzen möchte. Der Weg ist nicht immer gerade, aber es gibt eine Lösung – und später mal gibt es auch den passenden Standard oder die neue elegante Lösung. Seit nicht so verbissen. ;)

  32. @Wolfgang

    Danke für den Hinweis, ich hatte es ja wie gesagt nicht wirklich getestet. Mit dem „Min-Height Fast Hack“ Link: http://www.dustindiaz.com/min-height-fast-hack/ geht es nun auch im IE6, allerdings wird das Bild hier verzerrt. (Na ja selbst Schuld wer den IE6 noch nutzt. :))

    Hier das entscheidende CSS-Snippet:

    #bg img {
    min-height:100%;
    height:auto !important;
    height:100%;
    min-width:100%;
    width:auto !important;
    width:100%;
    margin:0 auto;
    display:block;
    }

    Zum Test Link: http://contejo.com/test/index2.html

    Grüße

    Stefan

  33. Die Lösung von Stefan ist in der Tat sehr elegant, doch leider läuft sie nicht im IE6.

  34. Worum geht es denn hier eigentlich noch, um den Sinn von Webstandards, um die Möglichkeiten ein Hintergrundbild per CSS zu skalieren oder um die Frage darf man heute noch schreiben, dass man dazu eine Tabelle „misbrauchen“ könnte, ohne dafür gleich „gelyncht“ zu werden?

    Für alle die sich noch für das eigentliche Thema interessieren und wie man das Ganze möglicherweise auch ohne Tabellen lösen kann, empfehle ich den Ansatz von Stefan. (Ich fürchte das geht hier im o.g. Zwist noch unter.) Soweit ich es getestet habe, funktioniert dieser doch wunderbar. Ganz im Gegenteil zu den vielen anderen Vorschlägen, die sonst noch gepostet wurden und entweder das Bild verzerren oder bei denen das Bild mitunter zu kurz ist.

    Vielen Dank also an Stefan und natürlich den Autor für Eure Beiträge. Ich zumindest habe heute etwas gelernt.

    Gute nacht

  35. Bei 4,290 Artikel müssen eben auch mal triviale Themen behandelt werden. Besser etwas verspätet als nie. Aber deshalb muss man sich doch wirklich nicht beschweren oder?

  36. Hallo,

    köstlich diese Experten-Streitereien, normalerweise blättere ich weiter, aber heute habe ich mal genüsslich darin gebadet.

    Ich bin kein Profi und ganz gerne der Zeit einige Jahre hinterher, erspart mir viel Stress und Irrwege. Im Beruf habe ich jahrzehntelang mit Hunderstel Millimeter gekämpft und dann finde ich (seit 2002 im Internet) in Homepageforen und -seiten die W3C-Erbenzähler.

    Zum Beispiel marquee von Microsoft, jahrelang verteufelt als „nicht valide“ und versucht mit ellenlagen Javascript zu umgehen, nun soll es wohl mit CSS3 in ähnlicher Weise kommen. Warum nicht gleich?

    Und warum kann das W3C nicht beim Hintergrund einfach eine Option dazu machen?

    Mein Vorschlag wäre: backgroundsize: 100% proportional;

    Dateigrösse 200 KB? – einmal geladen, es gibt ja den Browsercache.

    Lange Berechnungszeit? – einmal in guter Qualität berechnet und zwischengespeichert bis die Fenstergrösse wechselt.

    Die Welt könnte so einfach sein – das W3C und die PCs/Browser dienen den Menschen, sprich Seitenerstellern, und nicht umgekehrt.

    daniel5959 :)

  37. @Gast: Was haben meine Aussagen denn bitte damit zu tun, welche Software ich einsetze? Ich habe iWeb nur aus Zeitgründen eingesetzt, um den Aufwand so gering wie möglich zu halten. Sonst hätte ich das Plugin für mich behalten müssen. Daraus auf andere Projekte zu schließen ist ziemlich vermessen.

    Zum Thema: Was DIV-Element sind und wozu sie genutzt werden sind zwei paar Schuhe. Gleiches Problem besteht ja auch bei den Tabellen. Fakt ist, dass DIVs meist zu Layoutzwecken verschachtelt werden und nicht um semantisch zusammenhängende Inhalte zu gruppieren. Das es da Überschneidung gibt, ist klar, tut aber nichts zur Sache.

    @Rene: Ich sagte nicht, dass Webstandards generell irrelevant sind, sondern für die meisten Besucher. Sicher sind sie indirekt von den Standards und den Vorteilen betroffen und profitieren davon, aber es interessiert sie nicht. Ihnen ist egal, ob das gleiche Layout nun per Tabellen oder CSS realisiert wurde. Ich wollte eigentlich nur sagen, dass Standards nicht alles sind, zumindest solange ein großer Teil der Surfer mit alten Browsern unterwegs ist. Wichtiger ist, dass ein Großteil der Besucher das zu sehen bekommt, was er sehen soll. Ob so skalierende Bilder nun toll sind oder nicht ist eine andere Frage und bewertet letztendlich alleine der Besucher. Wir machen die Seiten ja für die Besucher und nicht nur um Standards zu erfüllen.

  38. Aufgeblasene Kommentare hier… Schade um den Speicherplatz.

  39. @Wolfgang: Zu Web-Standards: Zu glauben, sie wären irrelvant, ist ein großer Fehler. Die Tatsache, dass es Standards gibt und sich die meisten Web-Designer und -Entwickler mehr oder weniger eng an sie halten ist einer der Gründe für das Aufblühen des Webs in den letzten 15 Jahren.

    Weiterhin: http://www.reneschmidt.de/welchen-zweck-erfuellen-standards/

  40. „Hier das Original von Stu Nicholls.
    http://www.cssplay.co.uk/layou [www.cssplay.co.uk]
    Die Seite ist ohne Flash und Javascript und validiert als XHTML 1.0 Strict.
    So geht das.“

    Schönes Experiment und Stu Nicols in allen Ehren, aber so geht das garantiert nicht – hat nix mit professionellem Webdesign zu tun….

  41. „Also muss ich an den Inhalt ran, um das Design zu ändern. Eine echte Trennung wäre es, wenn jeder Sinnabschnitt separat behandelt werden kann und nicht durch diverse verschachtelte Divs schon einer Design-Idee zugeordnet wird. Eine Seite im HTML-Quellcode auf 3 Spalten vorzubereiten ist keine Trennung von Design und Inhalt. CSS 2 ist da einfach zu beschränkt. Erst wenn man Spalten rein im CSS definiert und dort Sinnabschnitte diesen zuweist, kann man von Trennung sprechen.“

    @Wolfgang
    Bleib bei deiner Software, von HTML und CSS hast du leider absolut keine Ahnung… und verschon‘ uns hier mit deinen aufgeblähten Sprüchen und Halbwissen, das finde ich echt mal zum Ko…
    DIV-Container, die ein SINNElement bezeichnen sind INHALTSAUSZEICHNUNGEN und kein DESIGN … aber wozu rede ich hier…

  42. danke @andy

    Brat mir einen n Storch ;-) der Hase ist aber breit gezerrt.

  43. Hier das Original von Stu Nicholls.
    http://www.cssplay.co.uk/layouts/background.html
    Die Seite ist ohne Flash und Javascript und validiert als XHTML 1.0 Strict.
    So geht das.

  44. Hallo,

    ich bin eher für die Einhaltung von Standards. Und ich muss sagen, bei Dr. Web gibts seit Jahren immer mal wieder nen Artikel der das Ganze in Frage stellt. Dr. Web brauchte wirklich lange, um sich in Richtung Usability und Barrierefreiheit zu wenden. Das ist das Ziel der Standards. Ich denke manchmal darf man, wenn man die Regeln gut genug kennt, diese auch mal brechen.

    Ich würde lieber anfangen zu akzeptieren, dass auch die Möglichkeiten im Web endlich sind. Jedenfalls in Bezug auf das perfekte Design. Man sieht es anschaulich an den Websites der Grafikdesigner die dann alles auf den cm abgemessen haben, dafür gibts keine Punkte im Bereich der Usabilty. Doch sicher gibt es Menschen, die weiter tüfteln, wie der Autor des Artikels. Was ist daran so verkehrt?

    Wer mit der Anleitung was anfangen kann, der freue sich einfach darüber, wer nicht läßt es einfach. Doch bitte immer schön sachlich bleiben. Danke!

  45. „Form follows function“ –> Louis Sullivan, amerikanischer Architekt…

    Da ist viel wahres dran!

    Man MUSS ja NICHT UNBEDINGT ein riesiges Re-size Hintergrundbild in die Homepage integrieren. Schon garnicht, wenn es über Tabellen funktioniert (mit Java ginge es bestimmt auch, ist aber dieselbe Ka… – sorry. Dann lieber mit validem css-code.
    Bliebe immer noch das Problem der Qualität des Bildes bei Fullsize oder Minisize.

    Für mich ist diese Idee nicht ausgegoren genug, dass ich es je so anwenden würde.

    Und ich möchte mit meiner css- und html-Schreibweise nicht zurück in die Steinzeit geworfen werden für etwas, was man nicht unbedingt braucht.

    Für mich kommt es nicht in Frage, jemals nochmal Tabellen einzusetzen. Bisher konnte ich alles was mit Tabellen funktioniert, auch mit css erstellen.
    Dabei wird es auch bleiben.

  46. @Oliver: Das Bild ist an sich schon nicht sonderlich scharf. Ich finde auch auf 24″ erfüllt es seine Wirkung und in modernen Browsern wird es auch nicht pixelig, sondern nur noch unschärfer. Das ist bei so einem Smog-Bild meiner Ansicht nach kein Problem. Sicher Eindrucksvoller wäre es, wenn die Daten aus einer Bildpyramide passend zu Größe geladen werden würden, aber soweit sind wir ja leider noch lange nicht.

    @Gast: Trennung von Design und Inhalt ist nur ein theoretisches Ideal, in der Praxis ist der Inhalt meist mit dem Layout verheiratet. Nehmen wir doch mal drweb.de. Die Kommentare sind konkret der mittleren Spalte zugeordnet. Sie rein per CSS in die Seitenleiste zwischen das Suchfeld und die Werbebanner zu schieben wird sicher sehr schwierig, wenn nicht gar unmöglich. Also muss ich an den Inhalt ran, um das Design zu ändern. Eine echte Trennung wäre es, wenn jeder Sinnabschnitt separat behandelt werden kann und nicht durch diverse verschachtelte Divs schon einer Design-Idee zugeordnet wird. Eine Seite im HTML-Quellcode auf 3 Spalten vorzubereiten ist keine Trennung von Design und Inhalt. CSS 2 ist da einfach zu beschränkt. Erst wenn man Spalten rein im CSS definiert und dort Sinnabschnitte diesen zuweist, kann man von Trennung sprechen.

  47. Hi Leute!

    1.Die Webstandards machen uns das Leben leichter, weil die Seiten überall ;) funktionieren.

    2.Tabellen sind für Daten da nicht fürs Layout. Oder benutzt hier jemand einen Hammer zum Schrauben?

    3.Ein Hintergrundbild sollte man nicht überbewerten, es ist Nebensache, deshalb der Begriff *Hintergrundbild*.

    Grüße

  48. @Oliver

    Also ich find’s bei 1920×1200 noch ganz passabel (beziehe mich auf die Version von Stefan ohne Tabelle, aber das dürfte keinen Unterschied machen). Klar, es ist nicht superscharf, aber für ein Hintergrundbild völlig im Rahmen.

  49. @Klawischnigg:
    Da gibt es auch nichts zu diskutieren. Wer den Sinn von Tabellen nicht verstanden hat, sollte sich nach einem anderem Hobby, auf jeden Fall aber nach einem anderem Beruf umsehen.

  50. Ein netter VErsuch, aber mit Tabellen arbeite ich seit dem 16. Jahrhrundert nicht mehr.

  51. @Oliver

    Genau. „In eine Tabelle gehören Daten, basta!“ – Dafür daß Du da acht Jahre lang dafür gekämpft hast ist Deine „Argumentation“ noch etwas unbeholfen. Aber wahrscheinlich hast Du einen Teil der Zeit ja auch damit verplempert, normative Regeln für alle aufzustellen, welche Designexperimente nach Ansicht des grossen Oliver sinnlos sind und welche nicht…

  52. „Webstandards sind nicht alles und sind auch für die meisten Seitenbesucher total irrelevant. Fakt ist doch, dass man derzeit kaum komplexere Seiten ohne Hacks umsetzen kann, egal ob man die Hacks nun in CSS auslagert oder noch etwas im HTML-Code mitspielen lässt.“

    Fakt ist, daß man durchaus Inhalt und Design auch in einem Spaltenlayout trennen kann. Die Zuweisung von Inhalt mittels HTML zu einem gelayouteten Designcontainer hebt diese Trennung nicht auf.

    „Sicher kann man die Spalten per umsortieren, aber auch nur in gewissen Grenzen und mit dem Problem, dass die Reihenfolge am Bildschirm evtl. nichts mit dem Content zu tun hat.“

    Ja eben !! Das ist ja das schöne, daß man Design und Inhalt trennen kann :)

    Bitte erstmal MVC richtig verstehen und dann solche unprofessionellen Kommentare ablassen…

  53. @Wolfgang
    Dann schaue es Dir mal auf nem 22″, 24″ oder 30″ Monitor an – bei einer 1600er Breite sieht es schon schwammig aus. Auf „normalen“ Auflösung mag es ok aussehen, aber „eindrucksvoll skalieren“ ist für mich was anderes.

    @Klawischnigg
    Eine nicht sinnvolle Lösung einzusetzen, weil man damit ja schneller fertig ist, ist nicht mein Stil und wohl auch nicht der der meisten anderen hier, wenn ich die Kommentare richtig deute. Wenn ich so arbeiten wollte, würde ich meine Dienste für 10 Euro bei ebay anbieten. Das hat dann aber nichts mehr mit professioneller Arbeit zu tun.

    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.

    Und Deine Tabelle ist nicht leer, wenn Du den Quelltext noch mal anschaust. Ein Screenreader wird versuchen sie zu deuten und allein schon aus der Gefahr heraus würde ich jedem dringend von diesem Tipp hier abraten. In Lynx sieht das Beispiel mit Tabellen nicht gut aus, weil es den alt Text des Bildes direkt an den Text in der Tabelle hängt. Das könnte man zwar beheben, aber das div Beispiel zeigt er sofort richtig an, weil es semantisch besser ist.

  54. Merkt ihr Nörgler eigentlich noch irgendetwas?!?!

    Geht doch bitte mal auf die vom Autoren genannte Website und lasst Euch den visuellen Reiz auf dem Augapfel zergehen. Wem dabei keiner abgeht, dem kann eh nicht geholfen werden – und klickt dann bitte einfach weiter.

    Der Clou an dieser Sache ist, dass sich der Effekt jetzt gänzlich ohne JS-Gefrickel und ohne Flash realisieren lässt, was bislang eben nicht möglich war.
    @wishu: Auch ich hätte gerne ein paar Quellenangaben aus den 90ern – müssen nicht gleich ‚zig‘ sein – wo dies bereits ohne Tabelleneinsatz beschrieben ist.

    Dass der Fokus hierbei nicht auf Leichtgewicht und stringente Barrierefreiheit liegt, sollte eigentlich jedem sofort klar sein. Für Websites von Fotografen, Architekten, Designern usw. ist dieser Effekt einfach nur genial.

    Vielen Dank an den Autor für die interessanten Einblicke!

  55. > 2.) Wir kämpfen eben so lange gegen die Skalierung von Bildern, weil es in den meisten Browsern und Auflösungen zum Kotzen aussieht.

    Also wenn ich mir ringvemedia in verschiedenen aktuelleren Browsern anschaue, sieht es überall ganz gut aus. Es hängt sicher stark vom Motiv ab, wie es dann letztendlich wirkt.

  56. @Oliver

    Das mag sein, daß hier Profis lesen, bleibt die Frage, warum sie nur lesen und nicht selbst Kommentare schreiben. Abgesehen davon, daß die Probleme von Screenreadern mit Tabellen nur ein hartnäckig sich haltendes Gerücht sind (schon gar mit einer leeren Tabelle, die wird von einem Screenreader einfach überlesen, auch von denen, die nicht nur einfach alle zur Tabelle gehörenden Elemente strippen) zeigt Sendungsbewusstsein, wie es hier teilweise zur Schau gestellt wird, mitnicht von Professionalität. Während nämlich diese „Profis“ noch tagelang darüber diskutieren und schulmeistern, wie böse Tabellen sind und wie gross der Bogen sein muss, den man als „Profi“ um diese machen muss, mehr noch, einen Krieg dagegen führen, so wie Du acht Jahre dagegen kämpfen (sic!) arbeiten andere, weniger sendungsbehaftete „Nichtprofis“ schon an der Seite des nächsten Kunden…

  57. Oh mann, was soll das denn bitte sein?

    1.) Wir kämpfen jetzt seit 8 Jahren gegen Tabellen als Layoutmittel und dann soll man es benutzen, um ein Bild zu skalieren – nebenbei bemerkt noch völlig sinnfrei?

    2.) Wir kämpfen eben so lange gegen die Skalierung von Bildern, weil es in den meisten Browsern und Auflösungen zum Kotzen aussieht.

    Also was hat uns dieser Artikel jetzt gesagt? Richtig, NIX!

    @Klawischnigg:
    Hier lesen überwiegend Profis, die davon leben, gute Arbeit zu machen. Ich kann meinem KFZ Mechaniker auch erklären, dass so lange die Reifen fest sind, er keinen Drehmomentschlüssel braucht und er wird ihn trotzdem benutzen, weil er ebenfalls darauf angewiesen ist, gute Arbeit zu machen. Der Schaden kommt dann, wenn man z. B. mit einem Screenreader vor der Seite sitzt und dieser (natürlich vergebens) versucht da irgendeinen Sinn aus den Daten in der Tabelle zu ziehen.

  58. @Leonid

    Ich finde dieses Sendungsbewusstseinbehaftete Getue einfach lächerlich. Zitat: „Eine Tabelle darf man nicht (nicht „etwas fraglich“. gar nicht. niemals und nie!) für sowas benutzen.“ – wo steht das? In der Bibel des selbsternannten Webdesigner-Wächterrats oder gar im Strafgesetzbuch?

    Natürlich heiligt hier der Zweck das Mittel. Es geht um so etwas Ungefährliches und Unwichtiges wie Webdesign, nicht um die Sicherheit eines Flugzeugs oder die Reliability einer Kernreaktorkühlung. Wem also schaden zwei lächerliche Tabellen auf einer Seite mit skalierbarem Hintergrund??? (den ich persönlich auch für völlig überflüssig halte, aber das ist ja nicht das Thema. Geschmackspolizei gibts zum Glück genauso keine wie einen Webdesigner-Wächterrat…)

  59. @Stefan:

    http://contejo.com/test/index2.html funktioniert in FF3, IE8, Chrome und Opera 9.6 einwandfrei, das sieht ziemlich gut aus. Werde weiter testen. ^^

  60. Ja,
    man kann ein Auto auch per kurzschließen starten.
    Ob es ratsam ist?

    Mein Blick schweift immernoch auf den Kalender. :D
    Leider nicht der 1. April.

    Evt. kann es jemand für seine priv. „Hoomhepeeetsch“ gebrauchen.

  61. hmm ich muss leider auch sagen das die qualität von dr. web extrem nachgelassen hat.

    Klar funktioniert die Methode aber ob sie das „Richtige“ ist wage ich zu bezweifeln.

  62. Finde es lustig, wer sich hier alles so wichtig macht…

    Die Herren #1, #2, #4, #5 usw. sollten besser ihre Zeit damit verwenden, ihre Seiten valide zu coden anstatt hier gekünstelte Emöprung über das Tabellenlayout zu heucheln.

    Den Balken im eigenen Auge übersehen, vor der eigenen Türe kehren und so weiter und so fort…

  63. Beispiele, die ohne Tabellen-Gedöns auskommen wären u.a.:

    http://css-tricks.com/how-to-resizeable-background-image/

    oder auch mit dem jQuery_Plugin Supersized machbar:

    http://www.buildinternet.com/project/supersized/

  64. Webstandards sind nicht alles und sind auch für die meisten Seitenbesucher total irrelevant. Fakt ist doch, dass man derzeit kaum komplexere Seiten ohne Hacks umsetzen kann, egal ob man die Hacks nun in CSS auslagert oder noch etwas im HTML-Code mitspielen lässt. Der Traum von der Trennung von Inhalt und Design ist eben nur ein Traum und hat nichts mit der Praxis zu tun. Denn schon bei einem Spaltenlayout ist so eine Trennung derzeit nicht möglich, da im HTML-Code immer noch Inhalt einer Spalte zugeordnet wird. Sicher kann man die Spalten per umsortieren, aber auch nur in gewissen Grenzen und mit dem Problem, dass die Reihenfolge am Bildschirm evtl. nichts mit dem Content zu tun hat.

    Ich hoffe ja, dass keiner der Kritiker hier mit einem Grid-System arbeitet. Denn das ist letztendlich ein Tabellenlayout mit anderen Tags und müllt den HTML-Code genau so zu wie Tabellen.

  65. @Andreas

    Ich hatte den Kommentar nochmal ergänzt. Schau mal weiter oben nach meinem ersten Kommentar. Ansonsten hier nochmal beide Versionen in der Gegenüberstellung:

    Leonids-Vorschlag
    LINK: http://contejo.com/test/index.html

    Die Alternative ohne Tabelle
    Link: http://contejo.com/test/index2.html

    sowie das entsprechend angepasste CSS:

    #bg {
    position:absolute;
    width:100%;
    height:100%;
    }
    #bg img {
    min-height:100%;
    min-width:100%;
    margin:0 auto;
    display:block;
    }

    Grüße

    Stefan

  66. „Eine Tabelle darf man nicht (nicht „etwas fraglich“. gar nicht. niemals und nie!) für sowas benutzen.“

    D.h. Tabellen darf man nicht fürs Layouten der Seite benutzen. Tabelle ist dazu da, um tabellarische Daten darzustellen. Das ist hier nicht der Fall.

    http://www.w3.org/TR/html4/struct/tables.html#h-11.1

    Ich schmeiße nichts durcheinander.

  67. @Stefan: Entweder bin ich blind, doof oder ich verpasse etwas. Ich sehe deinen Kommentar, auf den Leonid antwortet nicht, auch keinen Link auf Beispiele.

  68. @Karl: Ich will die Tabellenlösung ja nicht benutzen, ich will die standardkonforme Lösung. Laut einigen Kommentatoren gibt es ja viele Möglichkeiten, das mit reinem CSS zu machen, das würde mich auch interessieren.

  69. @Leonid

    Es geht um konstruktive und nicht destruktive Kritik. Ich habe doch deutlich gemacht, dass ich dieses Tutorial nicht vorbehaltlos positiv sehe. Aber denkt mal bitte daran, dass immernoch der Ton die Musik macht.

    Für die 200 KB fürs Image gibt es möglicher Weise eine Lösung via PNG. Bitte über lass es jedem selbst, ob er die Lösung für geeignet hält oder nicht. Außerdem schmeist Du einiges durcheinander, wenn Du von Webstandards und Tabellen sprichst. Tabellen dürfen selbstverständlich benutzt werden, wenn die entsprechenden (XHTML)-Regeln eingehalten werden. Es fragt sich nur ob Tabellen als Layouthilfsmittel (noch) zeitgemäß und im Sinne des semantischen Webs sinnvoll sind. Eine „man darf dies oder jenes nicht“-Argumentation ist in meinen Augen einfach blödsinnig.

    Bitte Schau Dir meine Beispiele an es gibt dort eine Version ohne Tabelle, die zumindest im Firefox läuft. Andere Browser habe ich auf die Schnelle nicht testen können.

    Den Ahnungslosen kommentiere ich leiber nicht…

  70. @Andreas: Der Zweck heiligt die Mittel nicht. Sicher, man kann vieles machen, wenn man mühsam ausgearbeitete und implementierte Standards über Bord wirft. Aber wenn jeder das machen würde wäre das schlecht für alle. Daran denken: Das Internet (nicht nur das Web) ist erst durch Standards zu dem geworden, was es heute ist – ein freies Netz, deren Technologie meist ohne Patente und finanzielle Kosten genutzt werden kann.

    Wer solche Hacks benutzt, hat das Prinzip von HTML und CSS nicht wirklich verstanden.

    Wenn man solche Aktionen schon starten muss, nimmt man Javascript und skaliert damit. Diejenigen, die Javascript abgeschaltet haben, können auch mit einem anderen oder einem unskalierten Bild leben und ist jedenfalls besser, als sich als Web Designer der Lächerlichkeit preiszugeben.

    Ich bin mir aber sicher, Adrian hat es gut gemeint und der Diskurs hier ist ja auch sehr informativ.

  71. Okay, ich beiße mal an. Postet bitte mal Links zu diesen ganzen massenweisen Tutorials, wie man das ohne Tabelle macht, das Bild sich bei Resize dynamisch an die Browsergröße anpasst und es in allen Browsern funktioniert. Finde die nämlich nicht.

  72. @Stefan

    „Besserwisser und offenbar Frustrierte“? Ahnungsloser..

    Das Bild wiegt stolze 200 KB. Das geht einfach nicht.
    Wenn man’s zu sehr komprimiert, sieht es im Vollbild auf dem 22+ Zoll Bildschirm schrecklich aus.

    Bilder im Browser zu skalieren (auch noch in diesem Ausmaß) ist ebenfalls der falsche Weg.

    Eine Tabelle darf man nicht (nicht „etwas fraglich“. gar nicht. niemals und nie!) für sowas benutzen. Sie dient nicht diesem Zweck und man möge sich an die Webstandards halten.

    „aber das Ganze stellt ja auch nur das Prinzip dar“. Schreibt man Tutorials nicht etwa dafür, dass man damit was anfangen kann? Und wenn man sowieso eine andere Technik benutzt, dann ist der Beitrag überflüssig.

    Es ist kein Meckern. Was nicht nach Standards gemacht wird, sollte nicht unterstützt werden. Solche Techniken darf man nicht öffentlich vorschlagen. Ich danke dem Autor für seine Mühe, aber der Beitrag ist einfach nicht zeitgemäß.

    @Christian Die Seite ist elend langsam (clientseitig). Schlechtes Beispiel.

  73. Also das ist wirklich traurig. Es gibt zig Tutorials, wie man das ohne Tabelle etc machen kann. Hat Dr. Web so wenig zu schreiben, dass man nun schon Beiträge aus den 90ern wieder vorkramt?

  74. Jetzt mal langsam. Selbst die (viel beachtete) GOTOCHINA-Website http://ringvemedia.com/introduction kommt nicht ohne Table aus, um den derzeit sehr angesagten skalierenden Fullsize-Background zu erreichen.

  75. Hallo,

    leider verkommt Dr. Web immer mehr zum Meckerblock für Besserwisser und offenbar Frustrierte. Wie wäre es denn zur Abwechslung mal mit etwas konstruktiver Kritik von der alle etwas haben. Oder verfasst selbst mal einen Beitrag, einen Aufruf gab es ja hierzu kürzlich…

    Allerdings finde auch ich die Tabelle in der Vorlage etwas fraglich, aber das Ganze stellt ja auch nur das Prinzip dar. Jeder meiner vorabkommentierenden Schlaumeier sollte das doch eigentlich wissen.

    Das Prinzip des skalierenden Hintergrundesbildes an sich finde ich im übrigen nicht uninteressant, da die Bildschirauflösungen ja doch erheblich auseinander gehen und es schon mal vorkommt, dass ich das Bild nicht kacheln kann oder will. Von mir also vielen Dank für diesen Beitrag…

    Grüße

    Stefan

    @Leonid
    Hast Du Deinen Vorschlag mal getestet, denn wie man hier (http://contejo.com/test/index.html) sehen kann funktioniert er nämlich nicht. Versuch mal das Browserfenster überproportional schmal zu machen. Das Bild ist dann nicht mehr formatfüllend. Setzt man die Höhe auch auf 100% wird das Bild verzerrt.

    Eine Alternative ohne Tabelle könnte so aussehen

    #bg {
    position:absolute;
    width:100%;
    height:100%;
    }
    #bg img {
    min-height:100%;
    min-width:100%;
    margin:0 auto;
    display:block;
    }
    Link: http://contejo.com/test/index2.html

  76. Kann mich meinen Vorrednern nur anschließen.

  77. Ich muss hier meinen Kollegen aus dem Kommentarfeld leider Recht geben. Die qualität der Artikel hat hier wirklich stark nachgelassen. Entweder liegen die richtig guten alle im „Plus“ Bereich, zu dem ich keinen Zugang habe, oder man versucht hier wirklich den anderen Blogs wie z.B. daswebdesignblog.de den Weg frei zu machen.

    Denkt mal drüber nach ob da nicht irgendwas in die falschen Wege läuft…

  78. Eigentlich ein Beitrag, den ich eher in den Computerzeitungen meines Vaters erwarten würde, gleich neben dem Trick wie ich mit einer Formular-Select-Box und Javascript ein tolles Dropdown-Menü zaubern kann.

    Ganz *toll* finde ich es auch vom Autor, noch zu erwähnen, dass der ganze Schmuh, den er da verzapft hat, „XHTML 1.0 Strict und CSS level 2.1 valide“ ist. Das ist genauso unpassend als wenn in der Zeitung von einem Ladendieb berichtet wird, der bei seiner Verhaftung Anstand und Knigge beachtet hat und höflichst „Danke“ und „Bitte“ sagt.

  79. The future is in the past!

    Ich glaube das ist der bisher niederschmetternste Beitrag für den modernen Webdesigner seit langem hier. Tabellen als Layout-Lösung? Ne, vor 6-7 Jahren (oder früher) vielleicht – wie in Kommentar 1 schon gesagt.

  80. Ich frage mich, wer das braucht und den Weg geht, auf die Seite die Tabelle und die Divs zu packen, obwohl sie keine Bedeutung haben, außer für’s Aussehen zu sorgen.

    Das einfache „position:absolute; width: 100%;“ für das Bild würde das gleiche Tun..

    Sorry, aber dieser Beitrag verspätet sich um 6-7 Jahre..

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück