Hintergrundbilder eindrucksvoll mit CSS skalieren

Kein Beitragsbild

Adrian Bechtold

arbeitet als Kommunikationsberater für IT-Unternehmen und bloggt gerne über Webtechnologien.

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%;
}

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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.

Hinterlasse einen Kommentar

90 Kommentare auf "Hintergrundbilder eindrucksvoll mit CSS skalieren"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Wilhelm Ahrendt
Gast

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.

Hiro Protago
Gast

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

trackback

[…] du sowas hier. das ist aber sehr […]

trackback

[…] Konstrukt habe ich hierher: Hintergrundbilder eindrucksvoll mit CSS skalieren | Dr. Web Magazin Mit skalierend ist gemeint, dass das Bild automatisch seitenf

Turrican
Gast

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…

Gruppenhaus
Gast

Vielen Dank für dieses nette Tutorial.

rainer
Gast

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

Tom
Gast
@ 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… Read more »
neuz8
Gast
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… Read more »
Patrick
Gast

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…

trackback

[…] How To: Resizeable Background Image | CSS-Tricks SCALE BACKGROUND (aus diesem Artikel: Hintergrundbilder eindrucksvoll mit CSS skalieren | CSS, Hintergrundmuster | Dr. Web Magazin) stu nicholls | CSS PLaY | 100% wide/high ‘background’ image emulation Gru

Manuel
Gast
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… Read more »
Götz
Gast

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

jürgen
Gast
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… Read more »
Marky
Gast
> “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… Read more »
Dizzydevil
Gast

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

Dizzydevil
Gast
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… Read more »
Alexander
Gast
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… Read more »
datenkind
Gast
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,… Read more »
Christoph
Gast

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.

Gast
Gast
“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… Read more »
Frank
Gast
“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… Read more »
Gast
Gast
“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… Read more »
Frank
Gast
@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… Read more »
Andreas
Gast
@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… Read more »
Frank
Gast
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… Read more »
Aros
Gast

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

Frank
Gast

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

anderer wolfgang
Gast

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.

Andreas
Gast

@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! 😉

Andreas
Gast

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

Wolfgang
Gast

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

Frank Gerards
Gast
Andreas
Gast

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

Dickel
Gast

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

Stefan
Gast

@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

Wolfgang
Gast

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

Muadib
Gast
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… Read more »
Bastian
Gast

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?

daniel5959
Gast
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?… Read more »
tekl
Gast
@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:… Read more »
DerLeser
Gast

Aufgeblasene Kommentare hier… Schade um den Speicherplatz.

Rene Schmidt
Gast

@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/

Gast
Gast

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

Gast
Gast
“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,… Read more »
Heike Werneburg
Gast

danke @andy

Brat mir einen n Storch 😉 der Hase ist aber breit gezerrt.

andy
Gast

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.

Torsten
Gast

Jo, wunderbar unproportional skaliert. Dieses Beispiel dürfte noch aus einer Zeit stammen, als alle Bildschirme ein Seitenverhältnis von 4:3 hatten und es außerdem noch keine hochformatigen Anzeigegeräte gab (Smartphones, Tablet PCs etc.).

Dieter Petereit
Dr. Web

Steht sogar dran. Der Beitrag wird Ende der Woche 4 Jahre alt.

wpDiscuz