Div-Suppe

Hallo,

hier hatte ich mal einen Vorschlag mit div-Elementen gemacht und es wurde bemängelt, es sei eine div-Suppe ( mit der SuFu lassen sich zahlreiche Einträge dazu hier finden ). Auf dieser Seite sind lauter solche Beispiele, wie ich es nach meinem jetzigen Kenntnisstand machen würde:

-> http://www.stichpunkt.de/css/bereiche.html

Fragen:

  • Ist meine Vermutung richtig, dass die Beispiele div-Suppen sind? Sind schon ca. 5 div-Elemente echt eine div-Suppe?

  • Wie würdet ihr allgemein mehrere Bereiche und besonders Drei Spalten, Kopf- und Fußleiste, Inhaltspalte flexibel ohne div-Elemente realisieren?

  • Wenn mit div-Elementen gearbeitet wird, was sollte vermieden werden und wie setzt man diese Elemente „richtig“ ein?

  • Als Verbesserung könnte ich mir vorstellen z.B. einen Header mit und Seitenbereiche mit Listen (bei Links, Bilderliste…) zu machen, aber für den mittleren Block und den Footer würde ich divs nehmen, wie seht ihr das?

-> http://de.selfhtml.org/html/tabellen/layouts.htm

  • Das halte ich für den ersten Link für unbrauchbar, aber wie seht ihr das?

Da die div-Suppe hier so oft erwähnt wird, sollte ein FAQ-Eintrag dazu gemacht werden :wink:

Danke & Grüße,

Roman

streng genommen fasst die semantik div als gruppierung für andere tags auf.

somit ist also jedes div was nur 1 tag beinhaltet sinnloss .
das element selber kann diese information ja tragen.
die classe heist bei beiden linke spalte.

wenn ich also 3 spalten habe und habe text und bilders und linkliste
dann mach ich die in ein div . hab ich nur eine spalte text brauch ich eigentlich kein div .
thoretisch kann man auch alles einzelnt defenieren ohne überhaupt div zu nehmen. Aber da wir am gruppieren nicht nur spass ahben sondern auch den sin sehen das wir z.b. alle elemente der gruppe gleichzeitig verschieben ohne jedem noch eine extra verschiebe klasse ranzuhängen …

Nun denn für dein Einfachen Template maker wird sowas natürlich nicht gehen. Der will ja gar keine Semantik :frowning: schnief , das zum glück wird mit HTML5 aber schon ganz anders (he he he) , der will einfach nur ein Layout stempeln. Also nimmt er sich 3 Div als Platzhalter die gefüllt werden. Bis dahin ist ja auch nix auszusetzen.
Jetzt will aber jemand noch die graphik viel viel ausgeklügelter haben .
Schwups wird das Seitenlayout nochmal in stücke gehackt und die mit graphik gefüllt. Da man dann auch noch koole ffekte mit Rändern und füllung und überlagerung erzihelen kann wird dann immer mehr in diesen gestückel was hier und da ergänz. Vorzugweise mit dem DIV . Bis das ganze so verschachtelt ist damit auch die coole Javascript funktion damit klar kommt und sich durch ein semantischen dreck eines Dom’es hangeln kann. Damit das ganze dann noch viel individueller verformt werden kann , kommt dann nochmal eine cascadierendes Style hinzu und nach paar divs und spans und ul und li am falschen platz . Bis man endlich eine super seite hat die jeden Kunden zufrieden stellt.
Ups hatte ich gesagt jeden kunden ? Der 56k Modem Kunde bedankt sich aber ganz schwer für den haufen kram nur um drei spalten zu haben.
Der Nicht sehende muss erstmal schnallen was wo wie sein soll . nach wieviel divs ist wohl die sidebar und wieviele divs kommen da , was hat das ul zu suchen ? die li ohne funktion ? ach da sind bilder , mal Farbig auf meinem 3D drucker materialisieren . Wie das sind ja alles die gleichen sterne . Naja , ob das nun wirklich eine ungeordnete liste wert war . Auf der suchseite hat die suchmaschine auch schon was gefunden . „Sie sind Angemeldet … Bitte klicken sie auf Hier um den Download zu starten … Bewegen sie die Mouse über das menu …“.
Na da freuen wir uns doch ,die suchmaschine hat einfach alle tags entfernt und nun das unsichtbare links oben für den user gelsen und daraus deine seiten beschreibung ermittelt. Zum glück gabs noch übereinstimmung im dokument bei download und bewegen.
Naja immerhin in 2 Monaten bin ich ja weg und dann kommt der Nächste Kollege. Hier Kollege , ich fahr dannmal in Urlaub . Viel spass bei meinem SSSSUUUPPPPER 3 Spalten layout :smile: Ich geb dir mal den aktenordner mit der 300 Seitigen Beschreibung . Da steht genau welcher DIV was bedeutet und warum er da sein muss und warum das haus sonst zusammen fällt.
Der Kollege dreht sich um und weiss das sein Arbeitsplatz auf lebenszeit gesichert ist wenn er erstmal den Ordner durchgearbeitet hat :smile:

Ein bischen Div schadet nie . Aber einfach nur DIV’s oder
um die optik zu erreichen ist falsch. Zu 90% wird die Seite klarer wenn das Element selbst positioniert ist (margin padding etc) und wenn nur im zusammen hang im richtigen div steckt. Es bringt nichts die Semantik so zu nutzen das auch noch der content getrennt wird , nur weil einem die anzeige nicht gelingt .

Moin,

Thomas hat ja schon viel dazu gesagt.

Seite sind lauter solche Beispiele, wie ich es nach meinem
jetzigen Kenntnisstand machen würde:
-> http://www.stichpunkt.de/css/bereiche.html

Das ist richtig und das ist auch falsch. Es ist eigentlich viel einfacher, weil Du in die falsche Richtung denkst. Du gehst eine Website falsch an und verstehst es deswegen nicht. Bist aber in gute Gesellschaft damit :smile:

Es ist so: HTML ist für die Semantik, CSS für das Aussehen. Das musst Du verinnerlichen, das ist dann, was Du oft als „Trennung von Inhalt und Layout“ liest.

Semantik ist die Bedeutung des Inhalts. Wenn Du also den HTML-Code schreiben willst, brauchst Du zwangsläufig vorher den Inhalt. Ohne Inhalt kannst Du (eigentlich) keinen HTML-Code schreiben. Verstehst Du? HTML legt die Bedeutung des Inhalts fest. Solange Du noch keinen Inhalt hast, kannst Du aber keine Bedeutung festlegen.

Deswegen sind solche Templates grundlegend erstmal falsch, weil sie eine Semantik aufsetzen zu einem Inhalt, der noch gar nicht bekannt ist. Und Leute, die es nicht besser wissen, ändern diese Templates nicht, wenn sie ihren Inhalt reinschreiben. Dann wird daraus meist eine div-Suppe, wie Thomas das schon geschrieben hat. Diese div-Suppe ist grundsätzlich erstmal um keinen Deut besser als Tabellenlayouts. Es ist im Prinzip das selbe, es werden Tags benutzt, die die Semantik nicht richtig wiedergeben.

Wenn Du also eine Website schreibst, musst Du (eigentlich) erst den Text schreiben. DANN erst darum das semantische Gerüst in HTML bauen. Und erst DANN geht es ans Layout. Wenn Du alles perfekt gemacht hast (wer kann das schon), müsstest Du jetzt im HTML-Code nichts mehr ändern. Tatsächlich aber wird es beim Layouten so sein, dass Du die ein oder andere Änderung in den HTML-Code einbaust, idR indem Du mehrere Elemente, die zusammen formatiert werden sollen, in eine Gruppe zusammenfasst. Das ist dann das . Manche optische Schmankerln lassen sich zudem nur durch div-Suppe realisieren, z.B. ein Rahmen aus verschiedenen Bildern, der sich noch der Größe des Contents anpassen soll. Das wird eine sehr wässrige Suppe, ist aber derzeit der einzige Weg.

  • Ist meine Vermutung richtig, dass die Beispiele div-Suppen
    sind? Sind schon ca. 5 div-Elemente echt eine div-Suppe?

Als „div-Suppe“ bezeichnet man eigentlich eine Seite, wo der Autor um alles und jedes Tag ein macht, ohne dabei zu berücksichtigen, dass das Tag eine Gruppe definiert. Ein
… ist also völlig überflüssig, weil in der Gruppe nur ein Element steht und das keine Gruppe ist! Viele machen das, weil sie glauben, CSS-Eigenschaften könnten nur auf divs angewendet werden, was natürlich falsch ist. Ein verhält sich zudem hier genauso wie das
, was man mit dem div machen wollte, kann man mit dem ul genauso machen.

  • Wie würdet ihr allgemein mehrere Bereiche und besonders Drei
    Spalten, Kopf- und Fußleiste, Inhaltspalte flexibel
    ohne
    div-Elemente realisieren?

Vermutlich gar nicht. Es geht ja nicht darum, eine Seitenstruktur ohne divs zu machen, genausowenig wie Tabellen in HTML generell böse sind. Aber man setzt in HTML die Elemente eben dafür ein, wofür sie gedacht sind.

Ein dreispaltiges Layout kann man natürlich sehr wohl auch völlig ohne divs machen, der Header ist ein , eine Sidebar ist vielleicht ein Menü, das ist dann ein
. Je nachdem, was die andere Sidebar ist, findet sich da auch ein Tag für die richtige Bedeutung. Und der MainContent braucht auch kein div. Was dann nur wieder zur Folge hat, dass der Inhalt unter die Sidebars rutscht, sobald diese enden. Aber das kann ja auch gewünscht sein.

  • Wenn mit div-Elementen gearbeitet wird, was sollte vermieden
    werden und wie setzt man diese Elemente „richtig“ ein?

bedeutet „Gruppe“. Setze es also nur ein, wenn Du mehrere Elemente zu einer logischen Gruppe zusammenfügen willst.
Genauso wie bedeutet „wichtig“ und Du das nur für Textpassagen benutzt, die wichtig sind - keinesfalls nutzt Du das, wenn Du etwas kursiv darstellen willst, denn das Ziel erreichst Du mit CSS, HTML ist dafür nicht da.
Und wenn Du eine Adresse hast, z.B. im Imrpessum, dann bietet sich eben an.

  • Als Verbesserung könnte ich mir vorstellen z.B. einen Header
    mit

Auf jeden Fall. Ein Header ist ja eine Überschrift. Es als div auszuzeichnen macht es wiederum völlig unwichtig. Eine Suchmaschine oder ein Vorlesebrowser würden das Element als ziemlich unwichtig einstufen. Auch ein id=„header“ macht daraus keine Überschrift.

und Seitenbereiche mit Listen (bei Links,
Bilderliste…) zu machen

Eben. Das Wort sagt es ja schon…eine Bilderliste wird natürlich auch als Liste ausgezeichnet. Wie das dann später aussehen soll, ist ja für HTML erstmal völlig irrelevant.

aber für den mittleren Block und
den Footer würde ich divs nehmen, wie seht ihr das?

Für den MainContent bietet sich deshalb ein an, weil da ja mehrere Elemente drin stehen, die gruppiert werden.

Beim Footer ist sicher die falsche Wahl, denn Du wirst da Text drin haben, also ist in jedem Fall die bessere Wahl. Wenn Du natürlich viel mehr im Footer stehen hast, mehrere Elemente werden dann sicher auch gruppiert. Wenn da aber nur ne ©-Notiz drin steht, ist die beste Wahl. Ist ja schließlich ein Textabsatz und keine Gruppe.

-> http://de.selfhtml.org/html/tabellen/layouts.htm

  • Das halte ich für den ersten Link für unbrauchbar, aber wie
    seht ihr das?

Natürlich Tabellenlayouts sind Krampf. Man vermittelt den Vorlesebrowsern und Suchmaschinen, dass da jetzt tabellarische Daten kommen, was ja absolut nicht der Fall ist. Vorlesebrowser lesen komplexe Tabellenlayouts vor allem völlig falsch vor.

Da die div-Suppe hier so oft erwähnt wird, sollte ein
FAQ-Eintrag dazu gemacht werden :wink:

Eigentlich nicht. Denn nicht zu verstehen, wann man einsetzt, heißt grundsätzlich einmal, dass man den Sinn von HTML schlichtweg nicht evrstanden hat. Da ist dann mehr Arbeit nötig, als man in einem FAQ-Eintrag schreiben kann. Da kann ich dann nur auf FAQ:1161 verweisen, wo ein Link drin steht zu einer HTML-Einführung, die HTML sehr gut erklärt.

Wenn jemand keine Ahnung vom Autofahren hat, dann muss ich ihm nicht erklären, was ein Drehzahlmesser ist. Der braucht da erst noch ganz andere Grundlagen.

Aber ich hoffe, meine ausführliche Erklärung öffnet Dir jetzt die Augen und Du verstehst, was HTML eigentlich ist, dass es gar nichts mit dem Aussehen oder mit Darstellung von Inhalten zu tun hat.
Dann bist Du auf dem richtigen Weg und alles wird auf einmal viel einfacher. Und Du verstehst dann auch, warum ich immer sage, dass man HTML in einer halben Stunde verstehen kann.

Liebe Grüße,
-Efchen

P.S.: (eigentlich) heißt, wenn Du die Vorgehensweise begriffen hast und Inhalt und Layout im Schlaf trennen kannst, dass Du auch anders an eine Website rangehen kannst, weil Du dann ja weißt, worauf es ankommt.

Ach, wie ich das hier hasse mit den HTML-Tags…

An der einen Stelle schrieb ich, dass ein

völlig überflüssig ist…das ist da, wo er die Liste umgesetzt hat.