Hier die Unterteilung des Artikels:

• Reine Formsache
  Formulare sind der Kern interaktiver Angebote und Grundlage der Kommunikation zwischen Anbieter und Nutzer …
• HTML-Elemente für Formulare
  Die Grundfunktionen eines Formulars müssen mit allen möglichen Mitteln der Bedienung und der Ausgabe gelingen …
• Formulardesign
  Ein gutes Design unterstützt den Nutzer in der Bewältigung der Aufgabe …
• Toleranz und Rücksicht
  Gerade bei Formularen sollte man strikt in dem sein, was man ausliefert, und tolerant bei dem, was man akzeptiert …
• Dynamik in Formularen
  Dynamische Inhalte sind für viele Computer-Hilfsmittel ein echtes Problem …
• Testen von Formularen und Web-basierten Anwendungen
  Testen, testen, testen und immer an den Nutzer denken …
• Strittige Punkte
  Es gibt einige Punkte, bei denen selbst unter Experten und Betroffenen keine Einigkeit herrscht …

Auf den Artikel bin ich gestoßen weil ich wissen wollte wie man heute zu Formularen in Tabellen aufgrund des Layouts steht. Um dieses eine Teilthema aus dem obigen Artikel kurz vorwegzunehmen kommt hier mein Fazit dazu:
Heutige Browser unterstützen ohne Probleme CSS und somit können auch Formulare ordentlich mit Hilfe von CSS formatiert werden. Die falsche Verwendung von Tabellen als Layouthilfsmittel ist somit nicht mehr gerechtfertigt und kann sogar negative Effekte bei Hilfsmittel wie z.B. Screenreader hervorbringen. Vielmehr kann man Tabellen wieder wirklich im eigentlichen Sinn verwenden: nämlich als Datentabelle.
Natürlich gibt es auch hier eine Ausnahme denn hat man Daten die tabellarisch angezeigt werden und die man direkt bearbeiten sollen kann steht natürlich der Tabelle in dem Formular nichts im Wege.

Selbst wenn man nicht das Ziel hat eine perfekte barrierefreie Webseite zu erstellen ist dieser Artikel dennoch sehr zu empfehlen. Ich glaube er trägt einiges zum Verständnis für ordentliches Design und Entwickeln von Web Anwendungen bei.

Einfach einen Text in die linke Box eingeben, an der Konfiguration unten drunter die Formatierung vornehmen und anschließend aus der rechten Box die CSS Angaben kopieren.

In diesem CSS Konfigurator kann man einen schön den Nutzen eines Sliders auch im Browser sehen. Wirklich gut gemacht das ganze!

Da hat sich doch tatsächlich jemand Names Roman Cortes die Mühe gemacht ein Bild von Homer Simpson rein mit HTML und CSS zu erzeugen.

Schaut man sich den Quelltext dieses Kunstwerkes an, so sieht man wie er das angestellt hat. Hier ein kleiner Ausschnitt daraus:

<div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;">
  <div style="font-size: 1.2em; font-weight: bold; color: #FED90E;">&bull;</div>
</div>
<div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;">
  <div style="font-size: 10px">
    <div style="width: 4.6em; height: 3.88em; background-color: #FED90E;"></div>
  </div>
</div>
<div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;">
  <div style="font-size: 1.2em; color: #000;">_</div>
</div>

Da möchte man gar nicht genau wissen wie lange er dafür gebraucht hat.
Zuvor hat Roman Cortes auch schon George Bush porträtiert.

Und als Highlight noch die animierte Version des Entstehen dieses Kunstwerkes. Mit der Animation kann man schnell oder langsam sehen wie das Bild entstanden ist.

Es gibt ja einige solcher CSS Bilder - mal sehen ob man noch das ein oder andere auftreiben kann.

(via webkonzepter.de)

Um das JavaScript nur für den Internet Explorer einzubinden wird die IE-if Bedingung verwendet und dabei bestehen zwei Versionen. Zum einen können der IE 5 und IE 6 zu einem IE 7 kompatiblen Browser erweitert werden:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->

Und zum anderen können die IE 5-7 zu einem IE 8 kompatiblen Browser erweitert werden:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js" type="text/javascript"></script>
<![endif]-->

Das Projekt ist bei Google Code gehostet und kann direkt von dort eingebunden werden. Fragen können in der dazugehörigen Google Group gestellt werden.

Neben den HTML und CSS Problemen, die damit gefixt werden, ist die Lösung um ein transparentes PNG darzustellen wohl die schönste Nachricht. Welche Fixes in den CSS Selektoren, CSS Eigenschaften oder HTML im Detail durchgeführt kann auf der Testseite gesehen und auch getestet werden.

Eine sehr schöne Kapagne von Mozilla mit einem noch viel schönerem dazugehörigem Wallpaper:

Welch trauriger Firefox uns da doch entgegenschaut *schnief*.

Wer sich in dem Thema noch vertiefen möchte der darf auch gerne noch das dazugehörige Dokument “Using Web Standards in your Web Pages” lesen. Ansonsten sollte der Firefox doch zumindest den Hintergrund des heimischen Desktops schmücken.

Wozu braucht man überhaupt einen mittigen Schriftzug? Gerade im “Ajax-Zeitalter”, wo die animierten Loading Bilder überall auftauchen möchte man doch ab und an auch den Text – “Loading..” mittig neben dem Bild haben und beide Elemente (Bild und Text) mittig im darum liegenden Block-Element. Aus diesem Grund wird oft das div Element verwendet um Bild und Text gemeinsam auszurichten. Oft läuft der erste Versuch dann folgendermaßen ab:

Loading…

<div style="vertical-align:middle;">
  <img src='http://www.webthreads.de/.../ajax-loader.gif'/> Loading...
</div>

Diese Herangehensweise funktioniert nicht, weil vertical-align nur auf die Höhe einer Zeile reagiert und nicht auf die Höhe eines umliegenden Block Elements.

Aber was tun? Selbst habe ich auch oft genug danach gegoogelt, mir Lösungen angeschaut und Erläuterungen entgegengenommen die mir sagen, dass es nur mit einer Tabelle funktioniert. Heißt es also wenn ich einen Text mittig neben einem Bild ausrichten möchte muss ich eine Tabelle nehmen? Das würde dann wie folgt aussehen:

Loading…

<table style="height: 40px;">
  <tr>
    <td style="vertical-align: middle; width: 25px;">
      <img src="http://www.webthreads.de/.../ajax-loader.gif"/>
    </td>
    <td style="vertical-align: middle;">
      Loading…
    </td>
  </tr>
</table>

Sieht ja grundsätztlich im Ergebnis schonmal nicht schlecht aus. Die Frage ist ob man dafür immer eine Tabelle verwenden soll bzw. muss:

Wenn man darüber nachdenkt, dann kann man doch ein Block Element nehmen welches auf die Zeilenhöhe reagiert, wie z.b. das <p> Element. D.h. man erstellt ein solches Element, mit einer angegebenen festen Zeilenhöhe und sagt, dass es sich mittig ausrichten soll:

Loading…

<p style="vertical-align:middle;">
  <img src='http://www.webthreads.de/.../ajax-loader.gif'/> Loading...
</p>

Das kann natürlich nicht funktionieren weil sich die CSS Angabe vertical-align:middle auf den Text einer Zeile bezogen auf das Eltern Element auswirkt, welches wiederum ein Inline-Element sein muss. Dabei orientiert sich die Zeile an der größten Box die die Zeile enthält. Das heißt, hat man mehrere Inline-Elemente nebeneinander und sie orientieren sich mit der Basislinie an dem größten Element, dann erstellt man einfach zwei separate Inline-Elemente, setzt bei einem die Schriftgröße zum ausrichten und orientieren für die anderen Boxen. Siehe dazu auch in der W3C CSS Level 2 Beschreibung zu der Eigenschaft “vertical-align:middle” (deutsche Übersetzung).

Folgende Variante funktioniert somit um einen Text neben einer Grafik mittig auszurichten:

<p style="padding:0;margin:0;">
  <span style="vertical-align:middle; font-size:40px;">
    <img src='http://www.webthreads.de/.../ajax-loader.gif'/>
  </span>
  <span style="vertical-align:middle">Loading...</span>
</p>

Vor allem wichtig ist die Angabe font-size in einem Inline-Element denn diese erstellt die entsprechende Zeilenhöhe an der sich die weiteren Boxen (span Elemente) ausrichten. Am einfachsten ist es diese Angabe entweder in einer leeren Box anzugeben oder bei einer Box, wie hier bei dem Bild, bei der es nicht weiter stört. Zur weiteren Verschönerung kann man die default padding und margin CSS Eigenschaften des p Elementes noch außer Gefecht setzen.

Ob diese Lösung eine gute, eine einfache oder eine bessere Lösung als die Tabellen-Lösung ist, dass darf jeder selbst entscheiden. Falls einer eine weitere Möglichkeit für das mittige Ausrichten eines Textes neben einem Bild hat so darf er sie hier gerne kund tun – bin sehr gespannt darauf.

(Für das Erstellen des animierten Loading Bildes wurde ajaxload.info verwendet.)

Eine schöne Hilfe für den Einstieg für Tabellenlose Layouts ist auf mycelly.com zu finden. Dort werden zwölf CSS Templates mit Beispiel und dazu notwendigen Code dargestellt.

Gerade für CSS Layouts ist es ganz praktisch wenn man auf Beispiele zurückgreifen kann – denn zu sehr sollte man sich auch nicht plagen ;).

Vielleicht noch als eigene kleine Anmerkung: Nicht in allen Fällen ist ein reines CSS Layout ratsam oder von Vorteil und man kann sich mit einem Tabellen Layout viel Arbeit ersparen. Aber in vielen Fällen ist man mit CSS Layouts einfach flexibler.

Das ganze hat erst einmal nichts mit Google zu tun btw. hat Google sein eigenes Produkt – das Google Webtoolkit (GWT), ich berichtete.

Nun aber der Zusammenhang zwischen Google und der YUI Library. Schaut man sich den Quellcode der persönlichen Google Startseite an so fällt einem für die div Elemente, die eine Spalte für das dreispaltige Layout ergeben, auf, dass sie die CSS Klassen yui-b , yui-gb und yui-u first enthalten. Im folgenden Screenshot ist das nochmal durch Firebug schön hervorgehoben.

Dass man diese Klassennamen auf die YUI Library bezieht kommt daher, weil es einen YUI CSS Tools Bereich in der YUI Library gibt mit denen man recht einfach bestimmte Layoutgerüste (CSS Grids) erstellen kann ohne sich selbst um die CSS Styles kümmern zu müssen. Die in den Google verwendeten Klassen yui-b , yui-gb und yui-u first werden schön unter “Available Template Presets“, “Available Special Nesting Grids” und “Using Nesting Grids” beschrieben.

Natürlich bindet Google nicht die YUI Library ein oder verwendet sie direkt. Ich schätze sie haben damals einfach die Styles ausprobiert bzw. übernommen und die Namensgebung ist noch der letzte Rest der Entwicklung.

Aber gut zu wissen, dass auch die Großen auch bei ihren Konkurrenten einfach mal “über die Schulter schauen” ;).

(via praegnanz.de)

Die Seite ist leider nicht als pdf verfügbar sondern als reine html Seite abzurufen. Aber man kann sie sich ja auf Papier ausdrucken, als pdf ausdrucken oder einfach nur abspeichern. Ich finde dieses CSS Cheat Sheet jedenfalls recht nützlich.

Finden Sie heraus, woher die Probleme kommen, und lernen Sie Methoden für die Übergangsphase und schließlich für ein komplett tabellenfreies Layout.

Selbst bin ich auch ein Freund von CSS Layouts und den div Elementen und kann ein Lied davon singen wie es ist die ganzen vom Designer erhaltenen Webseiten von klobigem Tabellen Layout in CSS Layout zu verändern.

Auf der ersten Seite wird kurz aufgelistet was die zu erwartenden Vorteile sein werden:

Wir werden Ihnen eine Einführung in eine Arbeitsweise geben, die

• Ihre Seiten schneller laden lässt
• Ihre Hosting-Kosten senkt
• Ihre Redesigns effizienter und billiger macht
• Ihnen hilft, eine optische Konsistenz in allen Seiten zu erhalten
• Ihnen bessere Suchmachinenergebnisse liefert
• Ihre Sites besser nutzbar für alle Besucher und Clients macht
• und Ihnen einen Vorsprung gegenüber Konkurrenten schafft (und Ihren Job sichert), weil immer mehr dazu übergehen, Web Standards zu verwenden.

Zudem wird ein Beispiel erarbeitet und er verweist auf viele Beispiele. Jedenfalls sehr lesenswert der ganze Artikel.

(Vielen Dank an Jörg Zintel für den Hinweis)

und endet in einem fertigen Design.

Sehr nett gemacht und einen Hingucker wert.

Die neueste Entdeckung ist die Seite “Daily Color Scheme” auf der, wie der Titel auch suggeriert, täglich neue Farbverläufe veröffentlicht werden. Leider stimmt der Titel nicht mehr ganz aber generell ist die Seite dennoch erwähnenswert.
Das schöne an der Seite ist, dass es die erstellen Farbverläufe in den verschiedensten Formaten zum Download anbietet. Zum einen kann man sich den Hex, RGB oder HSB einer dargestellten Farbe direkt in den Zwischenspeicher kopieren und zum anderen ist auf der rechten Seite ein Download Bereich. Als Dataitypen werden Photoshop (.act), Adobe Illustrator (.ai), Colorschemer Studio (.cs), als CSS (.css) oder Html (.html) zum Download angeboten.

Im Archiv werden alle bisher erstellen Schemen gelistet und dort kann man auch erkennen, dass es auch schon wieder vorbei ist mit den täglichen Veröffentlichungen, denn das letzte Farbschema stammt vom 18.09..

Aber die Motivation schien einmal vorhanden gewesen zu sein:

AN EVERY-DAY COLOR RESOURCE
WE BRING YOU DAILY-FRESH COLOR SCHEMES

Generell ist das ja eine ganz nette Idee aber ich glaube, dass die Arbeit die dahinter steckt jeden Tag ein neues Farbschema zu veröffentlichen doch erheblich ist. Aber zumindest die schon vorhandenen Schematas kann man nutzen. Evtl. hätte man das als typische Web 2.0 Seite erstellen sollen so das jedermann seine Farbschemen einbringen kann… ;)

Auf der Animator.js Seite sind viele Beispiele mit Source Code aufgelistet die man direkt testen kann.

Die Animator.js Datei ist 11.8 Kb groß und benötigt protoype.js.

Klickt man auf ein Vorschaubild gelangt man auf eine Beispielseite mit dazugehörigem Html Code und benötigten CSS Styles. Bei den Layout Varianten wird noch zwischen zweispaltigen und dreispaltigen Layouts unterschieden.
Ich denke, dass dieser Link (http://www.dynamicdrive.com/style/layouts/) in jede Bookmarksammlung gehören sollte.