- Div Wahnsinn, Div Suppe oder Div Chaos. Wie kann man es vermeiden? - Webstandard-Blog

Div Wahnsinn, Div Suppe oder Div Chaos. Wie kann man es vermeiden?

All diese Begriffe sind mir während des Redesigns des Blogs immer wieder, unter anderem in Entwicklerforen(!) aufgefallen. Und musste feststellen das oft gar nicht verstanden wurde, was mit diesen Begriffen gemeint war oder ist. Die Entwicklung weg von Layouttabellen ist absolut korrekt. Nur sollte man nicht in den oben erwähnten Div-Wahnsinn verfallen ( siehe Was bedeutet Div-Wahnsinn?). Ich denke man kann es nicht oft genug erwähnen. Tabellen sind ok, so lange sie zur Darstellung tabellarischer Daten dienen. Aber um eine Seite zu zentrieren oder um grafische Elemente von Teaserboxen oder Hintergründgrafiken zu positionieren, sind Tabellen nicht gedacht. Dafür gibt es CSS. Die Empfehlungen des W3C sind bekannt und sie sind dafür da um angewandt zu werden. Das heisst wiederum nicht, das das einzelne Div als Layout missbraucht werden soll, um nun die Aufgaben zu erfüllen die vorher die Layouttabelle übernahm. Zur Verdeutlichung hier einmal ein Bsp. ( linke Seite der Grafik ) für Div Wahnsinn, so wie ich ihn verstehe.

Beispiel: Div Suppe oder Div Chaos

Eine meiner Meinung nach bessere und dem Webstandard entsprechende Variante, sehen wir auf der rechten Seiten der Grafik. In h1 kann sich der Titel, sowie das Logo (bspw. im Hintergrund) befinden. Die "Navigation-Divs" werden zur Liste zusammengefasst. Der Content kann als div definiert werden mit Absätzen und Titeln für die Absätze. Der Footerbereich wiederum kann als Liste definiert werden. Sicherlich alles in allem ein einfaches Beispiel, aber letztendlich wurden von 14 ursprünglichen divs nur 1 verwendet, vielleicht kann man auch den Header und Footer noch als Div definieren, aber selbst dann hat man eine grosse Anzahl eingespart und ist dem Webstandard ( bei fehlerfreier Umsetzung ) wesentlich näher als vorher. Ein weitere vielleicht nicht unbedingt beabsichtigter Nebeneffekt ist offensichtlich: Mehr Übersicht und Ordnung! Die Definition der Styles obliegt natürlich jedem einzelnen um die gewünschte Darstellung zu erhalten. Hier geht es nur die Div Struktur.

Tabellen sind ok, so lange sie zur Darstellung tabellarischer Daten dienen.

Dieses Beispiel ist vielleicht noch nicht mal der Höhepunkt, aber soll aufzeigen das zahlreiche Div Elemente unnnötig sind und durch vom W3C verabschiedete Elemente ersetzt werden sollten und Standardkonform zu arbeiten und um validen Code zu entwickeln, der unter anderem auch für mobile Endgeräte genutzte werden könnte etc. Für Definitionen des Header steht uns h zur Verfügung und für eine Navigation kann eine Liste genutzt werden. Mit Ihr sind Verschachtelungen ebenso möglich, denn Listenelemente können untergeordnete Listen enthalten. Vor allem XHTML 2 bietet da eine Menge interessanter Möglichkeiten.

Um bspw. die Klassen text und teaser in unserem obigen Div-Bsp paralell nebeneinander zu platzieren, so das die Bereiche immer auf selber Höhe sind ( vor allem wichtig, wenn sie bspw. farbig hinterlegt sind), können auch in eine Liste integriert werden. Des weiteren werden gern Textbereiche in ein Div gesteckt obwohl dafür bspw. meiner Meinung nach der Einsatz von p, address, blockcode, etc. wesentlich besser geeignet sind. Reine Textformatierung sollte bspw. über span geschehen. Natürlich immer in Abhängigkeit zu den Anforderungen und Fähigkeiten der Browser.

Formular Struktur Ein weiteres Bsp. wie unnötig div Elemente verwendet werden können, wäre folgendes ( bestimmt schon einmal von jedem von uns gesehen ): Meine Erfahrung zeigt mir, das die meisten Probleme in Bezug auf das Thema erst dann entstehen, wenn man sich vorher nicht genügend Gedanken über die Umsetzung gemacht hat. Es gibt Seiten mit viel Inhalt die natürlich dem entsprechend auch zahlreich mit divs gepflastert sind, wobei man nicht immer vom falschen Einsatz eines divs reden kann. Verschachtelung ist ok, so lange sie mit den richtigen Elementen durchgeführt wird.

Meiner Meinung nach ein gutes Beispiel ist das Landesportal von Baden-Württemberg. Eine einfache und übersichtliche Struktur, erstklassig umgesetzt ( wem an dieser Stelle andere Seiten in den Sinn kommen, bitte posten! ). Ich möchte in diesem Artikel nicht näher auf die Definitionen der StyleSheets eingehen, das tut Eric in seinem Blog mit den oben erwähnten Artikel wesentlich besser. Ich möchte auf einfachem Wege aufzeigen, dass zahlreiche Divs die tägliche zum Einsatz kommen unnötig sind, wenn man sich vorher Gedanken darüber machen würde, wofür sie gedacht sind und was sie bezwecken sollen. Unter w3.org und der Kategorie CSS gibt es genügend CSS Spezifikationen die zum Einsatz kommen können.

Man sollte in Bezug auf den übertriebenen Einsatz von divs manche Projekte von einem anderen Blickwinkel aus betrachten. Grosse Projekte, die über Jahre hinweg entwickelt werden, geben den Entwicklern oft keine Möglichkeit mehr bestimmte Dinge mit Darstellungselementen zu erzeugen, dann hilft einfach nur noch ein div oder ein erbendes Element ( aber bitte sauber mit id oder class versehen ). Wer mehr zu dieser Thematik anhand praktischer Beispiele erfahren möchte, findet in dem von mir veröffentlichten Buch CSS-Design. Die Tutorials für Einsteiger, eine Vielzahl praxisnaher Anwendungsbeispiele. Ich hoffe der Artikel gibt dem ein oder anderen einen Anstoss zum Nachdenken bezüglich seines Einsatzes von Divs

Arne
04 Nov 2005, 15:56

An dieser Stelle möchte ich allen den Artikel von Julius Plenz ans Herz legen! Dieser hat sich schon vor längerem mit dem Thema Div-Suppe auseinander gesetzt und regt mit seinem Artikel zum nachdenken an: http://www.plenz.com/divs_vermeiden
tomsw
06 Nov 2005, 16:33

Sehr guter Artikel (auch wenn ich schon darüber informiert bin)

Ich werde ihn an Freunde etc empfehlen, welche sich immer in der "DivMania-Sekte" befinden ;)
inoX 09 Nov 2005, 14:19

Sehr schön, aber irgendwie frag ich mich manchmal, wieso das missbrauchen von listen besser ist als das missbrauchen von tabellen. sicher ist missbrauchen nie gut, aber auch zB. ein menü nach dem muster linksname benötigt zwangsweise den missbrauch von positionierungs möglichkeiten wenn man mit hintergrund-bildern arbeiten will.

gibt es denn zZ. wirklich KEINEN vernünftigen standart um beispielsweise ein bild oder einfach ein paar worte zu positionieren?
Webstandard-Team
10 Nov 2005, 08:41

Wer sagt das Listenmissbrauch besser ist als der Tabellenmissbrauch zum Layouten? Für eine Navigation bietet sich als Strukturierungselement eine Liste an, denn bei Navigationsleisten handelt es sich semantisch gesehen um nichts anderes als eine Linkliste! Wichtig ist aber, dass die Navigationsleiste innerhalb eines Blockelements integriert ist.

Mit einer als Liste strukturierten Navigation ist es nun bspw. für den Screenreader(user) möglich, die Navigation ( oder einzelne Elemente dieser ) mit einem Tastendruck zu überspringen bzw. schnell zu den einzelnen Punkten zu gelangen.

Natürlich gibt es einen Standard zur Positionierung von Bildern und Texten - (X)HTML + CSS. "Missbrauch" von Positionierungsmöglichkeiten ? Beschreibe mal genauer was du damit meinst. Wenn du auf Hacks anspielst, sind diese oft ein Ergebniss der vorher benutzten Styles, die einen dann dazu zwingen Hacks einzusetzen, damit man bestimmte Ergebnisse erzielen kann ( ist oft bei grossen udn langwierigen Projekten der Fall ).
inoX 10 Nov 2005, 10:07

nein, auf hacks verzichte ich sowieso. mit missbrauch von positionierungsmöglichkeiten meine ich folgendes:
bei ner bild-navi braucht man ja dennoch den TEXT in den feldern, also ned nur bilder. damit der text nun aber ned (ohne AA wie das nunmal so is) auf die bilder geklatscht wird (wo dasselbe wort ja schon in nem schönen font mit AA steht) machen viele das so, das sie zB.: margin-left:-9999px; angeben. dieses ich-ziehe-das-wort-vom-bildschirm ist MISSBRAUCH.
eleganter wäre ein visibility:hidden; oder display:none; aber dabei verschwindet ja auch das hintergrundbild. dadurch bin ich wiederum gezwungen im im li enthaltenen a noch ein div mit vis:hide einzubauen. was wiederum div-suppe erzeugt. zZ. sehe ich dafür KEINE adäquate lösung.
Jan 21 Nov 2005, 18:57

Toller Artikel! Sich vor der Gestaltung gedanken zu machen ist auf jedenfall eine wichtige Sache ;)
Lichtspiel 11 Apr 2006, 12:43

O-Ton Plenz-Artikel:
» der Grundgedanke ist also, erst den Text in eine logisch korrekte Form zu bringen, und ihn dann optisch ein wenig mit CSS aufzupeppen «

joho, so sieht das ganze dann in dem artikel auch aus. öde, ewig lange texte ohne rhytmus und zum inhalt passende layout-variationen sind die wirklichen barrieren. nach 3 absätzen verging mir die lust zum weiterlesen, obwohl mich das thema interessiert.

inhalt und layout sind eben nicht getrennt, sondern gehen eine einheit ein, die der user wahrnimmt. und genau in dieser perspektive sollte der designer auch denken und handeln.