Div-Suppen

Sehr interessant:

http://css.fractatulum.net/sample/suppe/div_suppe1.htm

"Webseitenbauer welche bis dato ihre Seiten mit Layouttabellen, inklusive zerschnippelter Grafiken und verschachtelter Verschachtelung erstellt haben, neigen beim Umstieg auf tabellenfreie Layouts gern dazu eben solche Div Suppen zu erstellen. Da nimmt sich der Hobbybastler nichts gegenüber dem Profi."

Der Schreiber möchte darauf aufmerksam machen, dass es keinen Sinn macht ein XHtml1.1 oberstrict-Pornogeil-Logo unter der Seite kleben zu haben, wenn der Quelltext nicht ordentlich strukturiert ist. Dann kann man mit HTML 4.0 arbeiten.

Simme dem Textschreiber zu :-)

ack

deswegen habe ich meine div suppe mit ner menge p,li ul, h1 und h2 gewürzt

stimme zu und bin bekennender anhänger... hab wahrscheinlich auf einem bestimmten Projekt 7 - 8 ineinander verschachtelt mit rowspan und colspan, damit es besonders schön wird, ohne Grafiken zu zerschneiden...

ähm das soll kein pro für verschachtelte tabellen sein
das soll gen pro für sinvolles einsetzen von html tags

Original von dan kirpan
stimme zu und bin bekennender anhänger... hab wahrscheinlich auf einem bestimmten Projekt 7 - 8 ineinander verschachtelt mit rowspan und colspan, damit es besonders schön wird, ohne Grafiken zu zerschneiden...

kirpan, sie sind raus.

Original von woodworker
ähm das soll kein pro für verschachtelte tabellen sein
das soll gen pro für sinvolles einsetzen von html tags

Ich sehe verschachtelte s als sinnvoll an.
Weil:
Seite sieht so aus wie sie soll -> Sinn erfüllt. Punkt.

Original von Kampfhoernchen

Ich sehe verschachtelte s als sinnvoll an.
Weil:
Seite sieht so aus wie sie soll -> Sinn erfüllt. Punkt.

du nutzt bestimmt auch noch den tag

Original von Kampfhoernchen

Original von woodworker
ähm das soll kein pro für verschachtelte tabellen sein
das soll gen pro für sinvolles einsetzen von html tags

Ich sehe verschachtelte s als sinnvoll an.
Weil:
Seite sieht so aus wie sie soll -> Sinn erfüllt. Punkt.
Joa aber du sollst table nicht für das Aussehen verwenden außerdem, denke mal an die Behinderten Menschen.

> Ich sehe verschachtelte s als sinnvoll an.
> Weil:
> Seite sieht so aus wie sie soll -> Sinn erfüllt. Punkt.

Kann mich dem nur anschließen ;-)
Und ich nutze nicht den Font-Tag....

Ihr erinnert euch an mein Interview mit Overon ("Blinde und Browsrgames)?
Zitat:
Macht uns keinen Unterschied, ob das ne Tabelle oder Divs sind. Wir benutzen den IE, das Programm liest von oben rechts nach unten links vor.

Das ist schon eine sehr subjektive Meinung in Bezug auf das:

Original von garyx7de

Joa aber du sollst table nicht für das Aussehen verwenden ...

Ich bin ein überzeugter Anwender von Tabellen. Eine Zeitlang arbeitete ich mit Divs, als die Tabellen "out" wurden. Aber die Kompatibilitätsprobleme (damals) waren mir zu mühsam, dass ich wieder zurück wechselte. Es gibt einige gute Seiten, die von Tabellen abraten, bisher überzeugte mich allerdings noch niemand/nichts richtig.

So gehts mir auch. Meine Homepage (www.turbohummel.de) habe ich in Divs umsetzen können (ohne "Suppe"), nur der IE 6 macht damit Schwierigkeiten, die ich nur über "Spezial-Hacks" lösen konnte. Der IE7 bekommt es auch so hin, also warte ich, bis dieser offiziell raus und weit genug verbreitet ist.

ich bin stolz auf meine suppe, die ich nicht mit sondern mit anreichere... mit divs hatte ich mal eine Website, die ich anpassen sollte... bis ich da durchgestiegen bin... es war eine Java-Script-Navigation vom übelsten... mit MouseOver usw... mich grauts schon beim drüber nachdenken, aber was soll man machen: Kunde ist König...

Ich bin echt gespannt wie lange man mit dem alten schrott noch geld machen kann. Jedes kind das mit seinem dreamweaver (not licenced) tabellen hin- und herschupsen kann meint es kann auch gute seiten machen. Langsam wird es lächerlich. Schon alleine aus kompatibilitätsgründen (nein nicht zu alten sondern zu aktuellen geräten) sollte man hier auf die neuen standards setzen. kennt ihr einen zocker der sich seine webseiten noch mit netscape 4 ansieht? Mal ganz zu schweigen von der gespaaren serverlast und dem traffic. ein browsergame mit grauenhaftem ausgabecode möchte ich nicht geschenkt haben! da kann ich mir auch schon ausmalen wie der php code aussieht. die pflege von solchem tabellen- und style-suppen will ich mir ehrlichgesagt nicht antun.

reg4rds
chojin

ps: @kampfhoernchen: die webseite hat noch etwa 30% überflüssigen suppen sourcecode.

Ich bleib bei meiner klaren Div-Suppe mit Fleischklösschen!
Früher hab ich auch verschachtelte Tabellen verwendet doch jetzt verwende ich Tabellen wofür sie gedacht sind.. für "umfangreiche" Listen.

Ihr meckert hier rum das man statt div's doch gefälligst ,

und

(etc) nehmen soll, mit der Begründung: Dafür sind die da also nutze sie auch!

Hallo.. Tabellen sind zum Anzeigen von Datensätzen da.. nicht zum Designen

So nun hab ich's euch aber gegeben. Ne aber ernsthaft: Ihr begründet immer damit das Tabellen für Blinde ja viel besser seien und das das ja alles viel behindertengerechter ist. Doch nur weil Ihr lieber Tabellen verwendet heisst das noch lange nich das man nun mit blöden Vorwänden ne Offensive starten muss. Kaum kommt ne Gruppe in die Bedrängnis schon muss sie Protestieren. Ich möchte auch nur ein BG sehen was Behindertengerecht ist bzw. das sein Design auf Blinde und derren Sprachsysteme optmiert hat. Bei den meisten BGs wirds schon an komplexeren JS-Systemen und den Massen an Formularen hapern das Blinde sich die Zeit nehmen "mal eben" nen Planeten zu koloniesieren. Von JS-Karten und AJAX mal ganz zu schweigen.

Im Endeffekt soll doch jeder nutzen was er will.. das wird hier eh ne Endlose Diskussion genauso wie das Pro und Kontra der HTML-Versionen und der Nutzung von CSS (Im Sinne von Trennung Inhalt und Design). Die einen lehnen das andere schlichtweg ab weil sie keinen Bock haben sich umzustellen, andere sind Ordnungsfanatiker und müssen immer das neuste und klarste haben. Der eine Mag Gulaschsuppe der andere nicht.. das ist einfach ne Endlose Diskussion und solange jeder sein Code "für sich" schreibt ists eh wurscht!

mudder, naja ich hoffe das ich das schafe

habe js nur für eyecandy spielerreien ansonden alles recht hübsch in listen, divs, p, hr usw verpackt

schaue mir die seiten die ich generiere recht häuffig mit fangs an und eingtlich recht gut - wie das jetzt nun wirklich bei blinden auf dem screenreader ankommt weiss ich nicht

damit warte ich erstmal bis ne beta am laufen habe.


PS: ich hoffe du hast die verschrieben bei "Ihr begründet immer damit das Tabellen für Blinde ja viel besser seien und das das ja alles viel behindertengerechter ist."

Original von Chojin
... sollte man hier auf die neuen standards setzen.

Da gebe ich dir vollkommen Recht.

Original von Chojin

... pflege von solchem tabellen- und style-suppen will ich mir ehrlichgesagt nicht antun.

Eigentlich hab ich die Suppe immer noch im Teller.

Wir haben ein einfaches Design (auf der Startseite, nicht im Spiel). Das Aussehen ist mit DIVs und der Inhalt manchmal mit Tabellen. Bei der Statistik sieht man das glaub ich recht gut. Wenn man die Stylesheetdatei raus nimmt, ist es fast noch gut strukturiert, nur der Login ist leider ganz unten (muss ich dem Designer mal sagen :roll: ). Ob das nun gut oder schlecht ist, habe kien e Ahnung, das hat der Designer gemacht, aber ich finde es so ganz ok.

Regt euch bitte nicht über den Logincode, sowie die Benutzerzahlen und Werbung auf

nun ja... schau dir sassault an... das ist kein design, das sind nur _listen_

aber dank verschachtelten tables sind es schöne listen ;-)

Das ist wirklich kein Design

aber übersichtlich und praktisch...

und bevor die Frage kommt: ja, ich habe 2 Grafiker, die meinen, morgen wird das versprochene Design fertig...

Original von dan kirpan
aber übersichtlich und praktisch...

und bevor die Frage kommt: ja, ich habe 2 Grafiker, die meinen, morgen wird das versprochene Design fertig...

Seit wie vielen Wochen? *SCNR*

Sassault kommt bei mir mit überschnittenen Inhalten rüber. Und dass man "nicht" in den inneren Frame wechseln kann nervt nur. Java Script ausgeschaltet und es ist für die Katz.

Dürfte ich euch einen kurzen Besuch bei http://www.aquarion.org nahelegen?
(gibt nen Gastaccount.)
Ich denke, ich könnte mit div's hier weder wirklich sinnvoll Sourcecode sparen noch könnte ich die erreichte Kompatibilität irgendwie verbessern. Sagt mir einen guten Grund warum ich Div's benutzen sollte und ich tus.
Es gibt oft einfach keinen guten Grund um zu wechseln. Ich hab gelernt mit Tabellen umzugehen, und will aufgrund der erreichten Effizienz nicht wirklich umsteigen, auch wenn ich Seiten wo ich den Sinn erkennen kann durchaus mit div's mache.
Einfach global in den Raum zu schreien "Ihr sollt DIV's benutzen" ist ca. so wie allen ASP - Benutzern zu erklären sie sollen auf PHP umsteigen weils besserer/toller ist und umgekehrt.

Original von Nuky
[..]Ich hab gelernt mit Tabellen umzugehen, und will aufgrund der erreichten Effizienz nicht wirklich umsteigen, [..]

Naja ich will nicht dein ganzes spiel zerlegen... also zerleg ich nur die login-box auf der startseite.

Diese würde sich so:

#login { width: 640px; height: 501px; position: relative; }
.pic1 { background: #000 url('../pics/aqua_login01.jpg') no-repeat; } /*hintergrundbild eins*/
.pic2 { background: #000 url('../pics/aqua_login02.jpg') no-repeat; } /*hintergrundbild zwei*/
.pic3 { background: #000 url('../pics/aqua_login03.jpg') no-repeat; } /*hintergrundbild drei*/

#login input { position: absolute; }
#login .name { left:220px; bottom: 120px;}
#login .pass { left:220px; bottom: 60px;}
#login .submit { right:220px; bottom: 60px;}







einfacher darstellen lassen als so:

 


 


 
 


 
 
 
 


 


 



 
 
 


Die stylesheets die du verwendest haben mir noch zuviele redunante angaben, aber sind grundsätzlich der richtige weg. Insgesamt würde ich das allerdings doch noch als "style-suppe" bezeichnen

reg4rds
chojin

Hm.. wenn ich jetzt nur wüsste, wo ich den Div-Suppen link letztens noch gefunden habe

In dem Zusammenhang viel nämlich auch *im eigenen wiki kram*
http://www.vorsprungdurchwebstandards.de/theory/retro-coding/
das Retrocoding, was bereits eben angesprochen wurde.
Dadurch erreicht man erst sinnvolles HTML, CSS sollte ja eigentlich immer noch nur ein Gestaltungsmerkmal sein.
Der Artikel ist in der Intention also ein bisschen als Back to the Roots zu verstehen; wenn ich in einem Text etwas hervorheben will (also in der Regel ja fett), dann verwende ich eben keine sondern einfach nur (das eben, und nicht das deprc. ). Ich kann ja später im "Design" noch immer festlegen, das bsp. body p strong halt nicht fett sein soll, rote schriftfarbe hat und mit hellblau hinterlegt wird (sieht klasse aus
)
Semantisch wäre das Dokument dann immer noch zu lesen - also ohne CSS, ergo ohne "Design".

Aus der gleichen Logik ist es auch sinnvoll, eine Navigation als Listenbaum zu generieren; man kann eine ganze Sublistenkonstuktuion wie z.b. oben bei GN darstellen.. inkl DHTML Zeugs wie Rollup & Co.

Das gute daran: Man spart nicht nur unnötige Tags; man spart auch viele unnötige Angaben von Klassendefinitionen, Strukturen, etc.


Nebenbei: Eine Tabelle kann mehr als nur und .. es gibt viele, die das noch nicht wissen.

Überschrift


Kopfzelle im Kopf der Tabelle
Normale Zelle im Kopf der Tabelle




Kopfzelle im Hauptteil Ider Tabelle
Normale Zelle im Hauptteil I der Tabelle




Kopfzelle im Hauptteil II der Tabelle
Normale Zelle im Hauptteil II der Tabelle




Kopfzelle im Fußteil der Tabelle
Normale Zelle im Fußteil der Tabelle



Wie man sieht, hat man also nicht nur die üblichen 2, sondern ganze 6 verschiedene Tabellenzellen. Zusätzlich kann man noch das Attribut rules geben, dann kann man sogar per Standard Zwischenlinien zwischen den Body-Körpern anzeigen lassen (gruppierte Elemente). Wichtig: thead und tfoot darf nur einmal pro Tabelle vorkommen, tbody beliebig (Opera zeigt als mein bisherig einzig bekannter Browser die Elemente auch nach der Logik unabhängig der tatsächlichen Lage an).

Das soll kein Aufruf sein, seine Webseiten jetzt mit Tabellen zu machen, es fiel mir nur grad ein; so lassen sich "echte" Tabellen wesentlich einfacher & übersichtlicher designen (eben halt ohne jegliche Zusatzklassendefinition im HTML QText)

Ich fasse mal zusammen:

Grund für Design mit Tabellen:
- Geht auch auf älteren Browsern (auf die auch die "Zocker" zurückgreifen müssen, wenn sie in der Schule sind)

Grund für Design mit DIVs:
- Irgendein Hansel hat gesagt, es wäre doch alles viel viel toller mit DIVs. Worauf hin das 5000 andere Hanseln das nachgeplappert haben.

Entscheidet nun selbst, welches Argument da mehr zählt.

Gut gesagt

Naja, ich würde die 2 harten Aussagen (die aber echt Wahrheit haben) schon etwas differenzieren: Es hat seinen Sinn, Webseiten nicht mit mehreren verschachtelten Tabellen (denn so sehen die "Div-Suppen" dann in tables aus) zu bauen.

Eigentlich war die Intention bei div auch, das man seinen Inhalt strukturell machen sollte (was er eben bei Tabellen nicht unbedingt ist).

Beispiel:
Für jede Sektion einer Darstellungsseite wird ein Container (Div-ID) gebildet, z.b. Header, Navigation, Footer, Main, Sidebar, usw.)

Innerhalb dieser gibt es dann "normales" HTML, z.b. bei Navigation ein (verschachtelter) Baum aus Listen (

• ) oder in Main normale Absätze mit Bildern, s und s.

Ob dann #Sidebar position fixed, right:0 ist, oder ob #Navigation linksbündig ist, oder lieber am Header orientiert ist (und damit, ob die Listenelemente als "Tabellenzellen" oder als einfache Inline-Texte dargestellt werden).. das ist dann die Sache der eingebundenen CSS (jawohl, eingebunden, keine Inlinestyles per Attribut style.

Div-Suppen sind im Grunde genauso schlimm wie tables.. denn ein Blinder wird damit auch nichts anfangen können, es ist unstrukturiert (schon mal versucht, 5 verschachtelte Divs nach ein paar Monaten wieder auseinanderzuentknoten?) und total überflüssig in den allermeisten Fällen (allermeist: genauso wie es in Präzensfällen durchaus angebracht sein kann, doch eine Tabelle zu nutzen).

Sei noch gesagt, das es sogar anfangs Leute gegeben soll, die haben sogar Daten (also dort, wo Tabellen genutzt werden sollten) auch mit Divs realisiert versucht haben.. mit katasrophalen (Quelltext)Ergebnis.

ich denke es liegt nicht an den divs oder tables, sondern schlicht daran dass sehr viele Entwickler die Seite aufs Pixel genau festklopfen wollen.

Ich verzichte soweit möglich auf jegliche Großenangaben und gebe sie nur an, wenn die Browser das nicht gescheit rendern (der IE ist so ein Kanidat, wegen 5 pixel ne horizontale scrollleiste, die man noch locker einsparen hätten können).
Oder mal für die Breite eines Randes

zu sassault.de: wirkt völlig überladen, einfach viele Boxen hingeschmissen

Ich überlege gerade, wie man das denn am besten realisiert, wenn man eine grafisch umfangreichere Darstellung von z.B. haben will - zumindest auf dem Bildschirm.

Wenn man z.B. einen Rahmen um die Überschrift haben will, der sich aus mehreren Bildern zusammensetzt (keine durchgezogene Linie, sondern irgendwas aufwendigeres), dann muss man ja schon eine Tabelle um die Überschrift bauen, damit das auch skalierbar bleibt und dann kann man das
-Tag gleich weglassen...

Irgendwie will mir nichts ordentliches dazu einfallen -.-

Habe mich eben mit den CSS-Pseudoelementen :before und :after rumgeschlagen, aber das kann man auch vergessen.

PS: Weil es so schön zum Thema passt

Solange der IE die 2 Pseudos nicht unterstützt, sind die für mich tabu - danach aber sehe ich das als willkommene Ergängung. Beispiel: wird dann per CSS mit vor und nachgestellten Hochkommata nach Geschmack des Designs hinzugefügt - oder, wenn das Design es eben nicht braucht, ganz ohne.

Dein Beispiel mit h1, zeige mal ein aufwendiges Werk, das du zu vereinfachen würdest, dann kann man mal gucken. Wie gesagt, es gibt Situationen, da geht es nicht anders (man missbraucht mitunter alte Techniken, um Innovationen zu schaffen, siehe Ajax *ie5-hust*).. also keine Angst.

Original von knalli

Du meinst vermutlich

!?

Original von knalli

Dein Beispiel mit h1, zeige mal ein aufwendiges Werk, das du zu vereinfachen würdest
Nehmen wir mal das Beispiel mit dem skalierbaren Rahmen um eine Überschrift (stark vereinfacht - Rest könnt ihr euch denken):

Überschrift








Und nun soll ein ähnlicher Effekt mit einem einfachen erreicht werden:

Überschrift

Nein, ein Zitat ist ein Zitat; blockquote ist nur eine Einrückung.

Was verstehst du unter Rahmen? Ein border reicht nicht? Die können ja auch gepunktet, gestrichelt etc sein. Man kann überdies ja ein Hintergrundbild verwenden.. aber ohne weitere Angaben kann man das so pauschal nicht verbessern. Wie gesagt, es gibt manchmal Situationen, wo es keine bessere Alternative gibt, das kommt aber auf den Fall an.

Original von knalli
Nein, ein Zitat ist ein Zitat; blockquote ist nur eine Einrückung.

ist html2 maximal
blockqoute ist schon das richtige für zitate, aber cite ist ne option für blockquote zum angeben woher das zitat kommt.

oder halt auch

Unterstützt eigentlich ein Browser das cite-Attribut auf "besondere" Weise? Also das man da den Link zu Gesicht bekommt o.ä.?

Oder ist das mehr nen Spielkram was bestenfalls Suchmaschinen interessiert?

Original von Chojin

Naja ich will nicht dein ganzes spiel zerlegen... also zerleg ich nur die login-box auf der startseite.

oje.. grad die is am ältesten, ca. 2 jahre alt.. nagut, die wäre mit div's eindeutig effizienter..

Tatsächlich, war mir auch nicht bewusst

Sehe aber gerade, zumindestens beim Schnellsuchen ist cite Bestandteil von XHTML 2 - aber es ging ja auch nur um das Prinzip selber, nicht um das Beispiel.

Original von TheUndeadable
Der Schreiber möchte darauf aufmerksam machen, dass es keinen Sinn macht ein XHtml1.1 oberstrict-Pornogeil-Logo unter der Seite kleben zu haben, wenn der Quelltext nicht ordentlich strukturiert ist. Dann kann man mit HTML 4.0 arbeiten.

Das lustigste ist, dass mir bis jetzt erst eine Handvoll Seiten begegnet ist, dann auch mit dem Richtigen Mime-Typ auszuliefern. Ja. Spaßig
Egal. Manche Leute bekleckern sich in diesem Thread jedenfalls nicht mit Ruhm, und man fragt sich auch, wie der ein oder andere überhaupt so an seinen Posten gekommen ist. Unschön, wirklich.

Ich benutze Tabellen, weil es funktioniert. Bei irgendwelchen divs müsste ich erst rausfinden wies geht. Und da hab ich keine Zeit für.

Soll Leute geben, die programmieren sogar so.
Und das schlimme ist.. die kriegen diese Sünden sogar noch bezahlt.