So laufen im allgemeinen Diskussionen zum Thema "Layouttabellen oder CSS-gestylte Boxen" ab. Es wird einfach nicht akzeptiert, wenn sich gerade jemand, der sich sehr intensiv mit allem Pro und Contra beschäftigt hat, nach reichlicher Überlegung an einer bestimmten Stelle für die Tabelle entscheidet.

Was mich an solchen Aussagen stört, sind die mangelnden Alternativen. Tabellen haben nun mal ein paar Eigenschaften, die mit CSS-gestylten Boxen nicht browserübergreifend zuverlässig nachgebildet werden können.

Aber die Standardistas haben ja schon eine Lösung parat: display:table & Co. machen es möglich, eine Tabelle mit einer div-css-Konstruktion nachzubauen. Endlich kann man ohne Missbrauch einer Tabelle ein Layout basteln, das wie eine Tabelle aussieht, und die Welt ist in Ordnung.

Ist sie das wirklich? Mal abgesehen davon, wann wir diese div-css-Tabellen allen verbreiteten Browsern anvertrauen können …

Ich habe mich mal ein wenig kundig gemacht und folgendes auf selfhtml zum Thema display:table & Co. gefunden:

Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache übernehmen, mit deren Hilfe die XML-Daten angezeigt werden. In CSS hat man die display-Eigenschaft zu diesem Zweck auserkoren.

Wer also display:table & Co. verwendet, missbraucht genauso wie bei einer richtigen html-Tabelle eine Tabelle zu Layout-Zwecken, nur eben eine XML-kompatible Tabelle.

Auch display:table, display:table-row & Co. sind keinesfalls zu Layout-Zwecken erschaffen worden, sondern zur XML-kompatiblen Darstellung von tabellarischen Daten.

Die Syntax wird genauso aufgebaut wie bei einer html-Tabelle, nur eben mit DIVs und entsprechenden Klassen, somit ist die Anzeige nicht im (X)html definiert, sondern im Stylesheet.

Das entspricht zwar der Forderung nach Trennung von Inhalt und Layout, aber im Grunde werden auch hier (X)html-Elemente in Verbindung mit css-Eigenschaften für einen Zweck missbraucht, für den sie ursprünglich nicht gedacht waren, nämlich für Layout-Zwecke.

Also, wenn ich schon eine Tabelle für bestimmte Layout-Anforderungen “missbrauche”, dann doch lieber eine Tabelle, die auch von Browsern dargestellt wird, die diese css-Eigenschaften nicht interpretieren.

Und mit solchen Browsern werden wir wohl noch die nächsten 3-5 Jahre leben müssen, denn auch folgendes habe ich auf der oben verlinkten Seite (selfhtml), ein paar Zeilen weiter, gefunden:

Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer jedoch auch in der Version 7 noch nicht.

Das Thema display:table & Co. zieht sich ja schon seit geraumer Zeit durch die WebdesignBlogs. Das Thema “Layouttabellen” war für lange Zeit aus dem Focus verschwunden und ist eigentlich erst mit der Diskussion dieser css-Eigenschaften wieder ins Rampenlicht geraten.

Vielen Standardistas scheint aber nicht klar zu sein, dass mit display:table & Co eben auch eine Tabelle missbraucht wird, wenn diese Eigenschaften zu Layout-Zwecken eingesetzt werden.

Genaugenommen habe ich das auch nur “geahnt”, bis ich das Thema mal gegoogelt und auf selfhtml eine richtig gute Erklärung gefunden habe.

Vorher war mir völlig unklar, warum man etwas funktionierendes (html-Tabelle) durch ein div-css-Konstrukt ersetzen will. Die XML-Kompatibilität ist jedoch eine einleuchtende Erklärung.

Gleichzeitig habe ich aber auch verstanden, dass es sich bei diesem div-css-Konstrukt genauso um eine Tabelle handelt wie bei einer richtigen html-Tabelle, also ursprünglich nicht zum Layouten gedacht.

Ein wichtiges Ziel des W3C war es damals, Microsoft und den IE in die Schranken zu weisen. Es kann ja nicht sein, dass ein Marktführer bestimmt, was Standard wird und was nicht. Und so kam es, dass sich das eigentlich sinnvolle Boxmodell des IE nicht durchsetzen konnte, weil das W3C sein (weniger sinnvolles) Boxmodell zusammen mit den anderen Browserherstellern durchgepeitscht hat.

Nach dem Motto "Der klügere gibt nach" verwendet der IE ab Version 6 im standardkompatiblen Modus (bei korrektem Doctype) das uns heute allen bekannte Boxmodell, das wohl in der Zukunft als "content-box" eines von mehreren Boxmodellen sein wird.

Nun geisterten bereits vor einiger Zeit Meldungen durch Klein-Bloggersdorf, dass mit CSS3 ein alternatives Boxmodell namens "border-box" eingeführt werden soll. Der aufmerksame Leser mit (X)html- und CSS-Kenntnissen hat sofort bemerkt, dass es sich hier um das Boxmodell des IE handelt, das im Machtkampf zwischen Microsoft und W3C zu Zeiten der Browserkriege im Zuge der Vernunft von Microsoft fallen gelassen wurde.

Jetzt musste sich das W3C natürlich den Vorwurf gefallen lassen, dass es sein unvernünftiges Boxmodell damals aus Prinzip durchgepeitscht hat, und nun still und leise das besiegte, aber sinnvolle IE-Boxmodell, wenn auch nur als Alternative, wieder einführen will.

Das geht natürlich so nicht, also wird in CSS3 wahrscheinlich zum ganz grossen Schlag ausgeholt und gleich 4 Boxmodelle etabliert, von denen eines zufällig und logischerweise dem alten IE-Boxmodell entspricht.

Die 4 Boxmodelle in CSS3

 Angedacht sind folgende 4 Boxmodelle:

content-box

hierbei handelt es sich um dasBoxmodell, das wir alle kennen: width bezieht sich auf den Inhalt, padding, border und margin kommen noch dazu und bestimmen die Geamtbreite, die die Box einnimmt:

1 x width + 2 x padding + 2 x border + 2 x margin

padding-box

width schliesst padding mit ein, Gesamtbreite der Box:

1 x width + 2 x border + 2 x margin

border-box

Das alte IE-Boxmodell, width schliesst padding und border mit ein, Gesamtbreite der Box:

1 x width + 2 x margin

margin-box

width schliesst padding, border und margin mit ein, Gesamtbreite der Box:

1 x width

Eingebunden werden diese CSS-Eigenschaften mit

{… box-sizing:border-box; …}

Was wird kommen?

Nun, niemand weiss nichts so genaues. Border-Box ist wohl gesetzt, inwieweit auch die anderen Boxmodelle zum Standard erhoben werden steht wohl noch in den Sternen. Und es wird wohl ein paar weitere Jahre dauern, bis wir diese Boxmodelle allen verbreiteten Browsern anvertrauen können.

Eines sehe ich jedoch ganz klar kommen:

Wenn ich an die verschiedenen Bugs in den verschiedenen Browsern schon bei EINEM Boxmodell denke (und das bei weitem nicht nur im IE), wird mir beim Gedanken an eine Zukunft mit 4 verschiedenen Boxmodellen schon ganz schlecht.

Browser A hat ein Problem mit padding-box, Browser B versagt bei border-box, Browser XYZ …

Deshalb habe ich mir einen eigenen Umgang mit den Boxmodellen angewöhnt. Jeder Bereich (header, locator, sidebar, footer usw.) hat ein äusseres und ein inneres div.

Das äussere div bekommt per CSS lediglich Angaben zu width, float und clear. Kein padding, kein margin, kein border und auch sonst nix. Diese äussere Box bleibt also unsichtbar und nimmt aber in allen Browsern den gleichen Platz ein.

Die innere Box bekommt KEINE Angaben zu width und float, somit dehnt sie sich immer zu 100% innerhalb der äusseren Box aus. Diese innere Box wird nun per CSS gestaltet und kann mittels margin innerhalb der äusseren Box zurechtgerückt werden.

Nur so ist das Layout weitgehend browser- und zukunftssicher. Aber dazu habe ich ja schon vor langer, langer Zeit etwas gerschrieben:

CSS Boxmodell Chaos – die Lösung »

Um den Anschein zu wahren, wurde dieser erhöhte Zinssatz auch Altkunden angeboten, für sogenanntes "frisches Geld". Dazu wurde die Höhe des bereits bei der DiBa angelegten Tagesgeldes zu einem bestimmten Zeitpunkt festgestellt, nur für Beträge darüber hinaus gab es den erhöhten Zinssatz.

Damit wurden genau die treuesten Kunden bestraft, die wie wir ihr gesamtes frei verfügbares Geld bei der DiBa angelgt hatten und somit kein neues Geld zuführen konnten.

Damals habe ich die Konsequenzen gezogen und sofort unser gesamtes Tagesgeld bei der DiBa abgezogen und ein Tagesgeldkonto bei der Norisbank eröffnet. Die Norisbank hatte zu dieser Zeit gerade seriöse Anwandlungen und versprach ihren Kunden, die " Bank ohne *, ** und *** " zu werden. Keine Neukunden- oder Frischgeld-Aktionen, ein einfaches und übersichtliches Angebot mit attraktiven Konditionen für alle.

Leider hat das kein Vierteljahr angehalten. Die Norisbank macht jetzt genau das, weshalb wir die DiBa verlassen hatten: Neukunden- und Frischgeld-Aktionen zu Lasten der Altkunden. Dabei werden die Konditionen für Frischgeld von Altkunden peinlichst so gestaltet, dass man das Geld nicht abziehen und neu anlegen kann. Gleichzeitig ist das Angebot auf 50.000 EUR beschränkt.

Damit ist nun folgende absurde Situation eingetreten: Ein Altkunde, der mehrere hunderttausend EUR bei der Norisbank zu liegen hat, bekommt weniger Zins als ein Neukunde, der ein paar tausend EUR bei der Norisbank neu anlegt.

Ich habe nun ganz einfach keinen Bock mehr, bei vielen unterschiedlichen Banken Tagesgeldkonten zu führen und ständig aufzupassen, wo ich als Altkunde verprellt werde und wo es gerade das beste Neukunden- oder Frischgeld-Angebot gibt, wo noch ein Kontostand von irgendwann gespeichert ist, der die Frischgeld-Aktion für mich ungültig macht, ob ich eventuell zu viel Geld angelegt habe und so weiter und so fort.

Banken, die mit solchem Unfug locken, sind für mich ab sofort tabu. Mehr als Tagesgeld wird nicht angelegt, damit ich sofort reagieren kann, wenn die Bank ihr Fähnchen plötzlich in einem anderen Wind wehen lässt.

Leider bleiben nun kaum noch Banken übrig, bei denen ich unsere bescheidenen Ersparnisse anlegen kann, da sich diese Unsitten bereits auf breiter Front durchgesetzt haben.

Ich hoffe, dass viele andere genauso denken wie ich und genauso konsequent solchen Unfug abstrafen, deshalb nun ein Link zu einer Bank, die sich zur Zeit noch diesem Trend entzieht und ein sauberes, seriöses Angebot ohne Haken und Ösen macht:

www.mercedes-benz-bank.de »

Zu dieser Bank werden wir vorerst einmal unser Tagesgeld transferieren, in der Hoffnung, dass wir hier nicht in wenigen Wochen eine ähnliche Überraschung erleben und irgendwann unser Geld im Sparstrumpf oder unter dem Kopfkissen deponieren müssen.

Diese Diskussionen entgleisen nicht selten, die einen setzen auf geduldige Aufklärung, die anderen "rezensieren" Internetseiten, bei denen Webstandards nicht eingehalten werden und gehen dabei nicht gerade zimperlich zu Werke.

Wie kann man nun Webdesigner und Webagenturen dazu bewegen, auch unter der Oberfläche ordentliche Arbeit abzuliefern?

Ob hier besserwisserische Belehrungen mit teilweise beleidigendem Vokabular zu einer Besserung führen wage ich zu bezweifeln. Mit den Webstandards ist das nämlich so eine Sache. Eine erst kürzlich veröffentlichte Studie hat nämlich festgestellt, dass lediglich ca. 4% aller Internetseiten den Validitätstest im W3C-Validator bestehen.

Da kommen die Browserhersteller nicht mehr raus. Die Fehlertoleranz der Browser hat diese Entwicklung aber erst möglich gemacht. Es galt bei den Browserherstellern vor Jahren wohl als Tugend, möglichst auch noch den fehlerhaftesten (X)html-Code so zu interpretieren, wie es der Autor wohl wollte. Das hatte auf breiter Front einen schlampigen Umgang mit (X)html seitens der Webdesigner zur Folge.

Heute könnte es sich ein Browserhersteller gar nicht mehr leisten, einen Browser herauszubringen, der bei fehlerhaftem (X)html den Dienst quittiert und eine weisse Seite oder eine Fehlermeldung anzeigt. Einen solchen Browser würde wohl niemand nutzen, da man ja damit nur ca. 4% aller Internetseiten zu sehen bekäme.

Trotzdem könnten die Browserhersteller etwas tun. Sie könnten an prominenter Stelle auf der Oberfäche des Browsers gut sichtbar und einladend einen Button integrieren, mit dem jedermann die aktuelle Seite mit dem Validator des W3C validieren kann. Dann könnte jeder, den es interessiert, auch und vor allem die Auftraggeber und Betreiber der Seite, diese auf Einhaltung der anerkannten Webstandards prüfen.

Das würde zumindest die Webdesigner und -agenturen, die Webdesign gewerblich und professionell anbieten, gehörig unter Druck setzen. Die Auftraggeber könnten zumindest einen Teilaspekt einer ordentlichen, professionell gestalteten Internetseite überprüfen.

Dass valider Code noch lange kein sauberer, moderner und "guter" Code ist weiss ich auch. Aber man kann wohl davon ausgehen, dass die Webdesigner, die auf valides (X)html achten, in der Regel auch in anderen Bereichen Qualität abliefern. Und genau die würden davon profitieren, wenn jeder Browser einen solchen "Validierungsbutton" gut sichtbar auf der Bedienoberfläche hätte.

Darauf hin deutet jedenfalls, dass der bekannte Logo-Designer und Autor des Blogs Design Tagebuch, Achim Schaffrinna, bereits den ersten Entwurf eines Wahlkampf-Logos veröffentlicht hat:

Der Wahlkampf soll unter dem Motto "Yo isch kann" zu dem Erfolg führen, der Andrea Ypsilanti mit dem Motto "Ich würde gern" versagt geblieben ist.

Herr Müntefering war sich nicht zu blöd zu sagen, die Entscheidung von Frau Ypsilanti, bei den nun wohl doch anstehenden Neuwahlen nicht als Spitzenkandidat der hessischen SPD anzutreten, verdiene "Respekt". Habe ich da eigentlich richtig gehört?

Sehr geehrter Herr Müntefering, Respekt hätte Frau Ypsilanti verdient, wenn Sie Anfang des Jahres respektiert hätte, dass die CDU mit Herrn Koch an der Spitze zwar knapp, aber eben doch mehr Stimmen bekommen hat als sie.

Respekt hätte sie vielleicht noch verdient, wenn Sie nach ihrem ersten gescheiterten Versuch, unter Tolerierung der SED, Verzeihung, der Linken, eine Minderheitsregierung auf die Beine zu stellen, den Rückzug angetreten hätte.

Statt dessen bezeichnet sie es heute als Fehler, mit einer klaren Koalitionsaussage in den Wahlkampf gegangen zu sein. Nämlich mit der Aussage "Nicht mit den Linken", egal in welcher Form, ob als Koalition oder unter Tolerierung.

Sehr geehrte Frau Ypsilanti, können Sie sich vielleicht vorstellen, dass es für viele Mitglieder Ihrer Partei und auch für viele Ihrer Wähler wichtig ist zu wissen, ob sie mit Ihrer Stimme eventuell die Linken in die Regierung wählen? Und zwar möglichst vor Abgabe der Stimme?

Allerdings verstehe ich auch die vier Quertreiber nicht so ganz. Es liegt doch in der Natur einer Demokratie, dass Mehrheiten beschliessen und die Minderheiten das dann akzeptieren müssen, auch innerhalb einer Partei, bis zu einer gewissen Grenze. Wenn diese Grenze soweit überschritten ist, dass mir mein Gewissen die Parteidisziplin verbietet, wenn also die Mehrheit der Partei etwas beschliesst, was ich mit meinem Gewissen absolut nicht vereinbaren kann, dann bleibt als Konsequenz doch eigentlich nur der Austritt aus dieser Partei. Aber das müssen die vier mit sich selbst ausmachen.

In die Neuwahlen wird die hessische SPD nun ohne Koalitionsaussage gehen. Das könnte dann tatsächlich zur Folge haben, was ich schon in einem früheren Artikel geschrieben habe:

Es reicht nicht für schwarz-gelb, es reicht auch nicht für rot-rot, und so bestimmen die Grünen, ob Hessen bürgerlich-konservativ oder rot regiert wird …

… wir haben Ihren Kontostand zum 31.08.2008 festgestellt. Für jeden neuen Euro, der über dieses Guthaben hinausgeht, bekommen Sie bis Ende 2008 5% Zinsen …

Ja haben die denn noch alle beisammen? Bekommt jetzt jeder Neukunde mehr Zinsen als wir, die wir seit vielen Jahren unser gesamtes Erspartes bei der ING-DiBa zu liegen haben? Stammkunden 3,5%, Neukunden 5%? Ich habe sofort reagiert!

Meine Antwort (per email) lautete ungefähr so:

… Leider haben wir schon unser gesamtes Erspartes bei Ihnen als Tages- bzw. Festgeld angelegt.  Somit können wir Ihnen leider kein nennenswertes Frischgeld zuführen. Unsere Antwort auf Ihre Aktion wird sein, dass wir unser gesamtes Tagesgeld bei Ihnen abziehen und für 4,5% ohne Haken und Ösen bei der Norisbank als Tagesgeld anlegen. Dann können wir dieses Geld bei Ihrer nächsten Frischgeld-Aktion kurzfistig wieder bei Ihnen parken.

Nach ca. 3 Tagen erhielten wir eine Antwort per email, dass die "Beschwerde" an die zuständige Fachabteilung weitergeleitet wurde. Nach mehr als einer Woche kam dann ein Brief mit der lapidaren Bitte um Verständnis, dass sich auch die ING-DiBa um Neukunden bemühen muss. Zu diesem Zeitpunkt war der Kontostand unseres Tagesgeld-Kontos bereits auf Null.

Liebe ING-DiBa, wir haben selbstverständlich volles Verständnis dafür, dass Sie mit den vergleichsweise niedrigen Tagesgeldzinsen Ihrer Altkunden die überdurchschnittlich hohen Tagesgeldzinsen für Neukunden (oder für frisches Geld) und Ihre Frontfigur Dirk Nowitzki finanzieren. Sie brauchen ja Neukunden und frisches Geld.

Wir gehen jedoch davon aus, dass auch Sie Verständnis dafür haben, dass wir bei künftigen Frischgeld-Aktionen auf der Gewinnerseite stehen möchten und deshalb unser gesamtes Tagesgeld zu einer anderen Bank transferieren, um es zu gegebener Zeit, im Rahmen einer weiteren Neukunden- und Frischgeldaktion Ihrerseits, bei Ihnen als "frisches Geld" kurzfristig wieder zu parken.

Ihr werdet sicher bemerkt haben, dass mein Blog werbefrei ist. Die folgenden Links sind keine Werbung, sondern eine Empfehlung.

Die Norisbank hat sich über die Jahre einen sehr unseriösen Ruf erarbeitet, als Erfinder von Easy Credit und durch aggressive Werbung per Post und Telefon. Das hat sicher mit den wechselnden Eigentumsverhältnissen zu tun, jeder neue Investor wollte möglichst schnell Kasse machen.

Seit 2007 gehört die Norisbank zur Deutschen Bank. Das Angebot der Norisbank hat sich seitdem grundlegend zum positiven gewandelt. Keine teure Fronfigur, keine Neukunden- oder Frischgeldaktionen und ein übersichtliches, attraktives Angebot.

Ein kostenloses Girokonto ohne Bedingungen und Tagesgeldzinsen von derzeit 4,5% für alle haben uns überzeugt. Bei einem Gespräch in der Filiale wurde uns glaubwürdig erklärt, dass die Norisbank eine Bank ohne *, ** und *** sein will.

Genau so wollen wir es haben.

Edit Dezember 2008

Leider ist die Norisbank auf dem Weg zurück zu der Bank als die ich sie kannte: Unseriös und zunehmend undurchsichtige Angebote. Die Zinsen für mein Geld wurden drastisch gekürzt, dafür bekommen jetzt auch hier Neukunden mehr Zinsen. Ich sponsore praktisch mit den niedrigen Zinsen für mein Geld das Neukundengeschäft der Norisbank.

Vergessen ist das Versprechen, in Zukunft die Bank ohne *, ** und *** zu sein.

Auch hier werde ich die Konsequenzen ziehen, mein gesamtes Geld abziehen und einer Bank anvertrauen, die auf solche Mätzchen verzichtet. Gott sei Dank habe ich bei der Norisbank nur Tagesgeld angelegt.

Allerdings stellt sich nun die Frage, welcher Bank man überhaupt noch vertrauen kann …

Es wird einfach aneinander vorbei diskutiert.

Deshalb habe ich mich entschlossen, diese Begriffe mal auf meinem eigenen Blog zu klären, damit meine Kommentare nicht länger werden als die Beiträge der Autoren. Jetzt kann ich einfach hierher verlinken .

• Layout mit fixer Breite
• Liquides oder fluides Layout
• Elastisches Layout (Zoomlayout)
• Was ist eigentlich flexibles Layout ?
• Was bringt die Zukunft?

Layout mit fixer Breite

Bei einem Layout mit fixer Breite wird width für alle Elemente (Boxen, Bilder usw.) in px formatiert. Bei Textvergrösserung verändern sich die horizontalen Abmessungen der Seite nicht, die Seite wächst nur nach unten, durch die grössere Schrift und die damit verbundenen Zeilenumbrüche im Fliesstext.

Ist der Viewport kleiner als die horizontale Breite der Seite, entsteht ein horizontaler Scrollbalken. Der Viewport ist das Browserfenster abzüglich Scrollbalken, Kopf- und Fussbereich des Browsers und evtl. Sidebars (z. B. Bookmarks oder Favoriten).

Hier gibt es keine Missverständnisse, das ist so ziemlich jedem klar.

Beispiel: dieses Blog

Übrigens: genaugenommen lassen sich richtig fixe Layouts in der derzeitigen Browserlandschaft gar nicht umsetzen, weil alle Browser ausser dem IE auch in px definierte Schriften vergrössern. Was wir als fixes Layout bezeichnen, ist eigentlich nur ein horizontal fixes Layout, vertikal ist es flexibel.

Bei einem richtig fixen Layout müssten wir nicht nur width in px auszeichnen, sondern auch height und die Schriftgrösse. Dann würden aber (ausser im IE) die Inhalte nach unten aus den Boxen herauswachsen, sobald man die Schrift vergrössert. Die Inhalte würden sich überlagern oder verschwinden, je nach dem, wie der overflow definiert ist.

Wir machen also alle eigentlich nur mehr oder weniger flexible Layouts, entweder nur vertikal flexibel oder vertikal und horizontal flexibel . Das ist natürlich ein wenig provokant, theoretisch und verquer gedacht, aber ich habe schon irgendwie bewusst als Zwischenüberschrift "Layout mit fixer Breite" gewählt statt einfach nur "fixes Layout". 

nach oben

Liquides oder fluides Layout

Liquides (auch fluid genanntes) Layout bezieht sich auf das Verhalten von Flüssigkeiten (liquid) und Gasen (fluid).

Flüssigkeiten und Gase breiten sich in ihrem Behälter aus, auf die Internetseite bezogen heisst das, dass sich die Seite horizontal dem zur Verfügung stehenden Viewport anpasst, und zwar automatisch, ohne dass der Nutzer etwas dazu tun muss.

Erreicht wird das, indem width für die Grundelemente einer Seite, die für die horizontalen Abmessungen der Seite zuständig sind, in % ausgezeichnet werden. Bilder usw. werden in der Regel weiterhin in px ausgezeichnet oder gar nicht.

Um zu vermeiden, dass die Seite unter extremen Bedingungen schlimm aussieht oder schlecht benutzbar oder lesbar ist, wird einem liquiden Layout oft mittels der CSS-Eigenschaften minwidth und maxwidth eine Mindestbreite und eine maximale Breite in px zugewiesen.

Horizontale Scrollbalken entstehen erst, wenn minwidth unterschritten wird oder ein Wort oder ein Element zu gross für den Viewport ist.

Dabei muss man jedoch in Kauf nehmen, dass ältere Browser minwidth und maxwidth nicht interpretieren.

Beispiel: meiert.com

nach oben

Elastisches Layout (Zoomlayout)

Lange bevor der Opera den Seitenzoom eingeführt hat, den inzwischen nahezu alle modernen Browser anbieten, haben findige Webdesigner eine Möglichkeit gefunden, die horizontale Ausdehnung einer Internetseite an die Schriftgrösse anzulehnen. Den ach so modernen Seitenzoom gab es also schon lange vor dem Opera, allerdings wurde er nicht durch den Browser erzeugt, sondern durch den Webdesigner mittels CSS.

Die horizontale Ausdehnung aller Elemente einer Internetseite wird in em ausgezeichnet, incl. der Bilder und aller anderen Objekte. Das erzeugt einen Seitenzoom bei Vergrösserung der Schrift, unabhängig davon, ob der Browser einen Seitenzoom hat oder nicht. Alle Boxen, Container, Bilder und anderen Elemente wachsen mit der Schriftgrösse.

Das nennt man elastisches Layout, weil sich die Seite verhält wie ein Luftballon, den man aufbläst. Mit dem grösser werdenden Luftballon wird auch alles, was da drauf gedruckt ist, grösser: Schriften, Bilder, Logos usw. Die Haut eines Luftballons ist elastisch.

Bei einer solchen Seite ist es egal, ob man den Textzoom oder den Seitenzoom benutzt, sie verhält sich immer gleich, immer wie im Seitenzoom. Deshalb werden diese Layouts auch Zoomlayout genannt.

Seitenzoom für alte Browser, sozusagen … Beispiel: zdf.de

nach oben

Was ist eigentlich flexibles Layout?

Hier scheiden sich die Geister. Wann ist eine Website flexibel? Genau hier entstehen die Missverständnisse in den vielen Diskussionen.

Fix steht für ein Layout mit fester, in px ausgezeichneter Breite.

Flexibel heisst zunächst einmal "nicht fix", dazu gehören ganz klar liquide / fluide Layouts. Die meisten zählen aber auch die elastischen Layouts zu den flexiblen Layouts. Flexibel als Oberbegriff für alles, was nicht fix ist.

Man kann das aber auch anders sehen.

Bei Seitenzoom verhält sich nämlich eine elastische Seite genauso wie eine Seite mit fixer Breite.

Bei Schriftvergrösserung verhält sich eine elastische Seite wie eine Seite mit fixer Breite bei Seitenzoom. Das Layout bleibt erhalten, die Seite wächst insgesamt, mit all ihren Elementen.

Das ist, zugegeben, sehr verwirrend. Wozu gehört denn nun das elastische Layout, ist es ein flexibles Layout oder ein auf die Spitze getriebenes fixes Layout, das auch bei Schriftvergrösserung erhalten bleibt, nur eben grösser wird?

Den Begriff "flexibles Layout" als Oberbegriff für liquide und elastische Layouts und alle möglichen Mischformen dieser beiden zu verwenden, ist meiner Meinung nach falsch und stiftet nur Verwirrung. Flexibel sind meiner Meinung nach nur liquide Layouts, da sich diese ohne Zutun des Nutzers flexibel an den Viewport anpassen.

Ich sehe 3 grundsätzliche Designvarianten::

• Layout mit fester Breite (fixes Layout)
• liquid / fluides Layout (flexibles Layout)
• elastisches Layout (Zoomlayout)

Natürlich gibt es auch gemischte Layouts. Ein elastisches Layout kann durchaus fixe Elemente beinhalten, in einem liquiden Layout kann man elastische Elemente anordnen usw.

Grundsätzlich sollten aber diese 3 Layout-Varianten klar sein, bevor man in einem Forum oder Blog mitreden will.

Den Begriff "flexibles Layout" sollte man vermeiden, da auf Grund der weit verbreiteten unklaren Verwendung dieses Begriffes Missverständnisse  vorprogrammiert sind.

nach oben

Was bringt die Zukunft?

Da in der Zukunft wohl alle Browser sowohl Textzoom als auch Seitenzoom anbieten werden, wird das elastische Layout als Stilmittel wohl überflüssig werden. Das erledigen dann die Browser mittels Seitenzoom.

Ein elastisches Layout nimmt dem Nutzer die Freiheit zu entscheiden, ob er nur die Schrift oder die ganze Seite vergrössern will, es wird immer die ganze Seite vergrössert. Ein Nutzer mit einem schmalen Viewport wird nur die Schrift vergrössern wollen, um horizontale Scrollbalken zu vermeiden. Bei einem elastischen Layout geht das aber nicht.

Liquides Layout wird auch weiterhin ein Stilmittel des Webdesign bleiben. Mit minwidth und maxwidth wird man das dann auch zunehmend gut steuern können, irgendwann wird der IE6 die gleiche Bedeutung haben wie heute der NN4.

Generell könnte ich mir vorstellen, dass das Verhalten von Internetseiten in der Zukunft immer weniger vom Webdesigner beeinflussbar sein wird.

Schon heute wird die Vorgabe einer fixen Breite von den Browsern mittels Seitenzoom ausser Kraft gesetzt. Welcher Webdesigner hätte denn vor ein paar Jahren schon gedacht, dass die Browser aus seinem fixen Layout ganz einfach mittels Seitenzoom ein elastisches machen???

Vielleicht wird ja in nicht allzu ferner Zukunft auch ein elastisches Layout durch die Browser ignoriert werden. Es wird dann 2 Buttons geben, gleichberechtigt und friedlich nebeneinander auf der Oberfläche, Textzoom und Seitenzoom. Wo man draufdrückt, das passiert, egal, was im CSS steht.

Dann entscheidet endlich der Nutzer, wie sich die Seite verhält, ob nur der Text grösser wird oder die ganze Seite, unabhängig davon, was der Webdesigner vorgibt. Wir Webdesigner bestimmen dann nur noch, wie die Seite beim Aufruf unter den Standardeinstellungen aussieht, fixe Breite oder bildschirmfüllend / liquid.

Dann wird es nur noch fest oder flüssig geben, fix oder liquid, und wenn jemand von flexibel spricht wird dann eindeutig sein, was er gemeint hat.

Hat man noch vor einigen Jahren von der 2/3 Gesellschaft gesprochen, so sind es nun 7/8, denen es gut geht. Das ist doch ein eindeutiger Aufwärtstrend, oder?

Ich hätte mir gewünscht, dass der tinyMCE 3.0.8 schon integriert wäre. Der integrierte tinyMCE bietet leider noch keine Ausrichtung der Bilder mittels css-Klassen oder css-styles an. Das muss man nach wie vor von Hand im Quelltext machen.

Also habe ich mir das Dean’s FCKEditor for WordPress plugin installiert, und nun geht es recht komfortabel per wysiwyg. Aber das sind eben 3 MByte zusätzlicher Upload und Speicherplatz, und natürlich umfangreiches Feintuning am FCKeditor, da der Urheber des Plugins doch recht andere Vorstellungen von einem sinnvollen Funktionsumfang hat als ich.

Auch WordPress 2.5.1 entfernt beim speichern alle Leerzeilen, so dass einem nichts weiter übrig bleibt, als whitespace mit einer transparenten gif zu erzeugen. Eigentlich heutzutage eine verpönte Methode, aber was soll man machen. Man kann zwar in den Quelltext gehen und dem entsprechenden Element per css ein margin verpassen, aber das ist ja auch umständlich. Weiss hier vielleicht jemand eine Lösung?

Ansonsten funktionieren alle Plugins problemlos, und der überarbeitete Adminbereich gefällt mir sehr gut. Mein altes WordPress war 2.3.1, nur damit mir keiner einen Vorwurf machen kann, wenn er von einer anderen Version updated und dann Probleme hat .