WebStyleBoard

da stimm ich dir voll und ganz zu, cheffe, ich habs mir auch mal angeschaut, als auf einmal alle damit angefangen haben und es preisten... aber es war mir schon schnell zu "kompliziert", wenn ich bedacht hatte, dass das mit tabellen eine sache von 5 minuten ist! daher, ich bleib bei meinen schönen tabellen, mit denn hatte ich noch nie probleme :]

Es ist weder gut ein Layout mit Tabellen noch ein Layout mit Divs zu erstellen, welches man dann Div-Suppe nennt.

Ich glaube ihr habt den Sinn von HTML nicht verstanden. Mit HTML erzeugt man eine Struktur in seinen Informationen. HTML ist aber keine Sprache um etwas zu 'malen'. Eine Tabelle benutzt man nur wenn man eine Tabelle haben möchte, Stundenpläne, Bilanzen, Terminübersicht, sowas sind Tabellen. Ein Layout ist nicht die Aufgabe von HTML sondern die Aufgabe von CSS.

Nun, millionen Divs ist auch keine Lösung für ein Layout. Divs braucht man einerseits mehrere Elemente zu erfassen oder in selteren Fällen ein neuese Element zu erzeugen. Aber man erstellt immernoch nicht mit Divs ein Layout bzw. versucht nicht ein Layout mit Divs zu erstellen.

Das Problem ist nicht die Frage "Tabelle oder Divs?". Die meisten gehen einfach den falschen Weg um eine Homepage zu erstellen, nä(h)mlich "Ich erstelle erst mein Design, vielleicht, wenn ich Lust hab, kommt vielleicht irgendwann mal der Inhalt". Eindeutig der falsche Weg. Man erstellt erst seinen Inhalt mit HTML, und wenn der Fertig ist (das erstmal schaffen) kann man sich dem Layout mit CSS zuwenden.

Man muss sich also nicht fragen "Wie Layoute ich HTML?", sonder "Wie erzeuge ich logisches und gut strukturiertes Markup?"

Weblinks:

• http://www.htmlwiki.de/Webseiten_richtig…it_HTML_und_CSS
  
• http://www.htmlwiki.de/Erst_Inhalt_dann_Layout
  
• http://www.htmlwiki.de/Div-Suppe
  
• http://www.htmlwiki.de/Layout_mit_Tabellen
  
• http://www.w3.org/WAI/
  

Eigentlich halte ich mich ja aus Diskussionen heraus, aber diese ist ja gewollt. Hier also mein Senf:

Ich schließe mich meinem Vorredner an... Zwar ist es, vor allem am Anfang, nicht leicht, mit den Tücken von CSS klarzukommen, aber wenn das einmal klappt, lohnt es enorm. Warum? Ganz einfach:

Benutzt Du Tabellen, dann zwingst Du das Layout von Anfang an in eine steife, starre und unflexible Form.

Benutzt Du jedoch (wenige und gut überlegte!) divs, bleibt die HTML-Datei selber frei von gestalterischen Elementen und Du hast innerhalb weniger Mausklicks die Möglichkeit, das Layout völlig anzupassen.

Denn Änderung in der CSS-Datei wirken sich ja auf alle Dokumente aus. Und damit meine ich nicht nur Farben oder Schriften sondern das Layout selbst kann sehr schnell und flexibel angepasst werden, wohingegen beim Tabellenlayout eine Änderung jeder Tabelle in jeder Datei nötig ist.

Durch divs kannst Du wunderbar das Layout versch. Gegebenheiten anpassen (Druckausgabe, kleine Bildschirme etc) und Du kannst z.B. Deinen Besuchern versch. Layouts ein und der selben Seite (ähnlich dem CSS Zen Garden) anbieten, und das ohne großen Aufwand. Das kannst Du mit Tabellen (fast) vergessen...

Zitat von »TheNobody Style«

Seit geraumer Zeit scheint es immer mehr Mode zu werden [...]

Gut, dass wir hier nicht nach Mode gehen, sondern uns von Argumenten überzeugen lassen und uns eine eigene Meinung bilden.

Zitat

[...]-Layouts per Div-Container zu realisieren

Eine Mitläufererscheinung, geprägt vom Halbwissen des Nachwuchses, das sich nicht von Argumenten überzeugen lässt und sich keine eigene Meinung bildet.

"Geraume Zeit" ist hier ein Zeitraum von bald acht Jahren, CSS1 wurde 1996 verabschiedet. Das Konzept der Trennung von Inhalt/Struktur desselben und der Präsentation ist also nicht neu und schon gar nicht in Mode. Gute Ideen schwappen halt immer zeitverzögert zum hinterletzten Anwenderpöbel, der sich nicht selbst informiert. Bis dahin ist dann auch der Inhalt verfälscht. Die Grundidee von CSS ist ja, Layouts eben NICHT vermittels irgendwelcher HTML-Elemente zu realisieren, wie Progman das ganz richtig aufzeigte. Dass man in Ermangelung von XML-Kenntnissen manchmal DIV-Elemente verwendet, um eigene Elemente zu "definieren" oder irgendetwas zu gruppieren, hat nichts mit dem Konzept der Trennung von Markup und Style zu tun.

Zitat

Früher hab ich das Layout mit Tabellen gemacht und nun will ich es mal richtig machen ... also mit div's

Genau. Statt sich sein Bein mit einer Axt zu zertrümmern, macht man es jetzt mit einem spitzen Stein -- genug des Zynismus'.

Zitat

Als ich mich vor ein paar Tagen mit genau diesem Thema befasst habe

Donner, Du bist ja wieder richtig ausgeschlafen ...

Zitat

(man will ja anderen Techniken eine Chance geben)

Mein Dank ist der Eurige, Mäzen des CSS'!

Zitat

Was zum Teufel soll dieser Quatsch?

In Ermangelung von geeigneter Fachliteratur, die zum Verständnis der Materie gereicht hätte, muss mal wieder die Polemik herhalten, nicht wahr? Sie sind willkommen, Ihre konkreten Fragen zu seit Jahren aktuellen Konzepten im Webauthoring in einem dieser lustigen Boards zu stellen, wie hieß es doch gleich, Webstyleboard oder so, da wird einem immer geholfen...

Zitat

allein schon den Header umzusetzen ... zwei Grafiken nebeneinander ... eine links (Ausrichtung links) und rechts (Ausrichtung rechts)

Ah, Kästchenmalerei! Ein klarer Fall für die Sprache, mit der man Hypertext auszeichnet!

Zitat

... dies mit Div's zu machen ist eine echte Qual.

Das hätte ich Dir vorher sagen können. Allerdings wird es mit Tabellen genau derselbe semantische Unfug.

Zitat

Der nächste Spass ist dann der "Body" der Seite. 3 Spalten sollen es einfach mal werden und dann wird es abenteuerlich. Wenn sich dann noch die Hintergrundfarben der Spalten unterscheiden ... das sieht echt übel aus, weil die Div's ja unterschiedlich hoch sind.

Eine Zwischenfrage: wieso sollten drei Spalten, die alle unterschiedlich lange Inhalte haben, exakt gleich groß sein? Entbehrt das nicht jeder Sinnhaftigkeit? Davon abgesehen ist das, wie oben, eine Frage für Präsentation von Inhalten und damit keine Aufgabe für irgendwelche HTML-Elemente. Nicht alles, was hinkt, ist ein Vergleich.

Zitat

Nehm ich dazu eine Tabelle, dann kann da nix schiefgehen.

Außer der sinnvollen Textauszeichnung. Schade, dass das genau das ist, weswegen man HTML einsetzt. Also zerstört man gerade den Sinn des Werkzeuges, das man einsetzt. Vielleicht sollte man die Inhalte gleich als großes Bild ausliefern. Dann muss man sich auch nicht mit Wald- und Wiesenbrowsern auseinandersetzen, wie etwa Mozilla, Firebird, Opera, ...

Zitat

Hat man es nun aber mit den Div und CSS hinbekommen, dann sollte man einfach mal dat CSS abstellen und sehen, was von der Seite übrig bleibt.

Genau das, was man in HTML geschrieben hat: eine DIV-Suppe. Und wer das tut, hat nicht verstanden, was er tut. Ich werde jetzt hier nicht ausführen, wie das Konzept wirklich lautet, das wurde (sogar in diesem Fred) schon oft genug getan (da war doch was...).

Zitat

Also ich für meinen Teil bleibe bei den "guten alten" Tabellen und kann dieses "mit Div's is es besser" definitiv nicht nachvollziehen ... Es macht einfach keinen Sinn.

Also, ich für meinen Teil bleibe weiterhin bei den guten alten Rechenschiebern und kann dieses "Mit Computern kann man viel schneller rechnen" definitiv nicht nachvollziehen ... Es macht einfach keinen Sinn.

Und wenn wir jetzt weiter polemisieren, kommt in ein paar Stunden ein Hamburger und sagt, man solle das ganze mit Frames machen...

Dieses um Jahre verspätete Aufwärmen in derartig hinkender Form nicht nachvollziehen kann:
Mirko

Hi,
zunächst: wer sie noch nicht kennt schaut sich doch einmal diese kleine Seite an:

http://www.1ngo.de/web/selfhtml.html

Ihr werdet sie sicherlich wiedererkennen. Ein typisches Tabellenlayout - sollte man meinen - und so ist die Seite im Original auch.

Natürlich war es etwas komplizierter, exakt dieses Layout ohne Tabellen und mit einem sinnvollen MarkUp umzusetzen, aber ich finde, der Aufwand hat sich hier gelohnt.
Warum?
- der Code ist wesentlich schlanker und das MarkUp sinnvoll und barrierefrei,
- die Seite ist nicht mehr in ein starres Tabellengerüst gezwängt, so daß bei zu kleinem Fenster oder zu großer Schrift kein Scrollbalken kommt, sondern aus drei Spalten (wenn ich den linken Logobereich mitzähle) zwei werden.

Und was wird ohne CSS aus der Seite?
Zwar eine "Textwüste", aber eine, in der man sich sehr gut zurecht findet. Genauso kommt einem Blinden mit seinen begrenzten Möglichkeiten die logische Textauszeichnung sehr entgegen.

Ich will jetzt nicht sagen, daß CSS-Layouts leichter zu erstellen wären, allerdings wage ich zu behaupten, daß ein Anfänger, der sich Selfhtml gründlich zu Gemüte geführt hat, sich mit einem CSS-Layout nicht viel schwerer tut als mit einem Tabellenlayout (sofern das von Hand gecodet wird).
Natürlich gibt es die ein oder andere Hürde, besonders wegen alten Browsern wie dem IE, aber das Ergebnis belohnt einen dann wieder.

Es gibt unbestritten auch Fälle, in denen die Umsetzung eines bestimmten Layoutwunsches mit CSS nicht praktikabel ist. Typisches Beispiel die von Dir angeführten gleichhohen Spaltenhintergründe . Nur kann man sich doch auch überlegen, ob so ein kleiner optischer Effekt nicht entbehrlich ist oder es sogar eine noch schönere Alternative gibt, die sich mit CSS umsetzen läßt.

Solche kleinen Problemchen wie die Anordnung zweier Bilder lassen sich allerdings wirklich leicht lösen: float:left und float:right und fertig...
Gruß
Ingo

Zu diesem Thema sollte man auf jeden Fall nochmal auf eine vergangene, sehr fruchtbare Diskussion hinweisen: http://www.webstyleboard.de/t3975

Wie sicher viele wissen erstelle ich Webseiten nur aus "Spaß an der Freude" im Rahmen meiner ehrenamtlichen Tätigkeit im Schützenverein und übernehme gelegentlich kleinere Projekte für Bekannte. Als "Webdesigner" würde ich mich nie bezeichnen, da meine Werke von künstlerischer Höchstleistung weit entfernt sind und ich damit kein Geld verdiene.

Es kostet für einen kundigen Webdesigner sicher einiges an Überwindung, den Großteil der bisherigen Angewohnheiten über Bord zu werfen und etwas völlig neues zu lernen. Für Layouts die früher innerhalb weniger Minuten erstellt waren muss man dann möglicherweise mehrere Stunden oder sogar Tage einplanen.

Der Umstieg fiel nicht leicht, eine Gestaltung mit Layouttabellen kommt für mich dennoch nicht mehr in Frage. Gerade weil ich mich intensiv damit auseinander setzen musste konnte ich mir viel neues Wissen aneignen und die von mir betreuten Seiten ein gutes Stück voran bringen.

Milestone: http://spirit4web.com (mein Testserver)

Zitat von »TheNobody Style«

aber diesen herablassenden Tonfall

In letzter Zeit war es bei einigen mit Dir befreundeten Nutzer durchaus üblich und toleriert, einen solchen Tonfall an den Tag zu legen -- was aber nichts mit mir zu tun haben soll. Ich hatte gedacht, mich dem Startposting ("Was zum Teufel soll dieser Quatsch") anzupassen und ich mache mich nicht davon frei, über das Ziel hinausgeschossen zu sein. Monatelanger geballter Ärger über diese Fehlinterpretationen des CSS-Konzepts haben sich in ein Posting ergossen. Ich bitte dies zu entschuldigen.

Das Thema, das hier anfangs, so schien es, zu diskutieren war, ist ja wie ausgeführt wurde, nicht sehr neu und so langsam wird man es leid, ständig darauf hinzuweisen, dass das ganze so nun auch nicht gemeint war. Wie auch immer, Dein letztes Posting, lieber Andreas, klang auch von Deiner Seite viel angenehmer und lenkt zudem verstärkt auf Dein konkretes Beispiel um. Es wird mir eine Freude sein, ab jetzt in konstruktiver Weise teilzunehmen.

Mit freundlichem Gruß
Mirko

Zitat von »TheNobody Style«

Mir geht es nicht primär um "Was ist per Definition richtig ect", sondern was ist rein praktisch besser, um ein bestimmtes Ergebnis zu erzielen.

In dem Fall CSS ist es so, dass sich durch die Verwendung nach den Grundintentionen einige gravierende Vorteile ergeben gegenüber vermischten Inhalts mit der Präsentation. Für jemanden, der seit Urzeiten Tabellen malt, mag die Umstellung schwer sein, aber viele hier, die es tatsächlich praktisch gemacht haben, werden bestätigen (oder haben das schon gemacht), dass es einfach viele Vorteile hat.

Die Trennung von Inhalt und Präsentation zeigt ihre Stärke vor allem in der Wiederverwendbarkeit. Du zeichnest Deinen Inhalt einmal so aus, dass die Struktur (Überschriften, Aufzählungen, ...) und die Logik (wichtige Passagen, Betonungen, ...) deutlich wird und die Präsentation machst Du unabhängig davon. Aber was rede ich, die Vorteile wurden x-mal genannt und lassen sich bequem nachlesen...

Zitat

wenn ich also eine bestimmte Vorstellung vom späteren Aussehen meiner Webseite habe

Siehst Du, das ist ja schön und gut, ein Grundkonzept für die Trennung von Inhalt und Präsentation ist aber, dass man erstmal einen Inhalt hat, bevor man den irgendwie grafisch herausputzt. Aber vielleicht bin ich da auch nur ein bisschen altmodisch-informationsorientiert.

Natürlich kann man auch mit klarer HTML/CSS-Trennung schon eine Optik im Kopf haben, während man HTML schreibt, aber man muss damit noch nicht den Inhalt verschandeln und kann dann nachher alles umschmeißen, ohne im Inhalt rumpfuschen zu müssen.

Zitat

dazu gehört zum Beispiel, auch wenn memowe es nicht glauben kann, dass die Spalten gleich lang sind

Mag sein, dass folgende Meinung darauf beruht, dass man sowas mit sauberem Code nur schwer simulieren kann. Ich finde nicht, dass es sinnvoll ist, Spalten mit verschieden langem Inhalt gleich lang zu machen. Ich glaube eher, dass das ein Relinkt aus alten Zeiten ist, wo man noch mit Tabellen layouten musste (habe ich auch mal gemacht) und es garnicht so einfach anders ging. Menschen sind halt Gewöhnungstiere. Grundsätzlich sehe ich, dass die Tabellenschubserfraktion in ihren Layout-Vorstellungen tatsächlich ein bisschen eingeschränkt ist. Zum Beispiel denken sie immer nur in Rechtecken, die wie ein Gitternetz zusammenpassen -- da sind auch Spalten immer gleichlang. Jemand, der mit CSS ein bisschen vertrauter ist, ist da nicht so festgelegt und lässt auch schonmal Text um eine Navigation herumfließen, was Platz spart und sehr hypsch aussehen kann. Er muss halt nicht, aber er kann. Mit CSS hat man viel mehr Möglichkeiten, freier mit dem Inhalt rumzupräsentieren und natürlich muss man dafür nicht bei jeder Änderung im HTML rumändern. Du wirst das genießen lernen, wenn Du Dich darauf wirklich einlässt. Und damit meine ich nicht einen Nachmittag.

Zu Deinem Beispiel: 1. würde ich nie mehr auf die Idee kommen, Präsentation mit Tabellen machen zu wollen. 2. ist das natürlich möglich, was Du willst, eventuell muss man tricksen. Da stellt sich bei MIR aber die Sinnfrage mit den gleichlangen Spalten und so. Wie es mit Tabellen nicht leicht ist, Text um beliebig positionierte Boxen fließen zu lassen, so ist es mit sauberem HTML/CSS nicht so leicht, Spalten auf eine unbekannte dynamische Größe auszudehnen. Eine schöne Sache wäre hier sicherlich, wenn CSS rechnen könnte, das ist aber leider noch nicht so -- vielleicht kommt da noch was.

Jetzt war ich schon wieder schwammig. Liegt daran, dass ich heute abend nicht mehr die Muße finde, sowas konkretes zusammenzuschieben. Ich hoffe, ich schaffe es morgen oder mir kommt jemand zuvor.

Gruß
Mirko

Ich benutzte mitlerweile auch nur noch logisches HTML und sauberes CSS.
Das ist zum Teil eine echte arbeitserleichterung, ein kleines Beispiel von Heute Nachmittag:
Ich arbeite zur Zeit an zwei Webprojekten: einmal meiner Shadowrun (Rollenspiel) Webseite und einer Computer Webseite. Man bat mich darum, in der Webseit über Computer ein Gästebuch zu installieren. Da ich vor einigen Tagen das Gästebuch in meiner Shadowrun Webseite fertiggestellt hatte, ging es sehr schnell.
Ich kopiere einfach die beiden Datein auf den Server der anderen Webseite, änderte kurz den Titel der Webseite und die Überschrift, habe dann noch schnell die SQL Datenbank installiert und fertig.

Das Beispiel mag zwar sehr exotisch sein, aber es zeigt, wie schnell man etwas anpassen kann. Durch die verwendung von logischem HTML brauchte ich keinen einzigen HTML-Tag anpassen und zum Glück verwende ich in meinen Webprojekten auch noch die gleichen CSS-IDs und Classes. Alles was ich ändern musste waren die Überschriften.

MfG Arne

PS:
Wer sich das anschauen will:
Shadowrun Webseite
Computer Webseite

PPS: Ich verändere im Moment das Design von einem WBB 2.2 und versuche einwenig Ordnung in die Templates zu bringen, dies ist aber bei so einer Code-Matsche nicht leicht.
Auch wenn es als XHTML 1.0 Trans. deklariert ist, logisch ist das HTML wirklich nicht...

wie wäre es denn mal mit einem kleinen tutorial wie man mit div-containern in verbindung mit css arbeitet würde mich sehr freuen :]

Zitat von »fraggle«

wie wäre es denn mal mit einem kleinen tutorial wie man mit div-containern in verbindung mit css arbeitet

Du hast nicht verstanden. Das Konzept sagt, dass man sein HTML an den Inhalten ausrichtet und nicht daran, wie man nachher layouten will. Das, was Du willst, ist so nicht möglich. HTML wird also vom Inhalt diktiert. Mit CSS styled man das ganze. Da kann man auch sehr gut ohne DIV auskommen. Vielleicht liest Du mal www.memowe.de/webauthoring/markup/

Am besten guckst Du Dir konkrete Beispiele von Webseiten von Leuten hier im Board an um zu sehen, wie man das machen kann. Das ist häufig ganz verschieden. Die Engstirnigkeit der Tabellenschubser (dass man da irgendeinen Designprototyp wie etwa eine leere Rohtabelle bräuchte) greift hier nicht mehr.


Gruß
Mirko

vielleicht hast du auch mich falsch verstanden

ich meinte lediglich,wie man z.B. div-container mittels css dort positionieren kann, wo man sie hinhaben will, zum beispiel 3 in eine reihe

wenn die frage weiterhin nicht zu beantworten ist, lassen wir das thema und ich bleib schön bei meinen tabellen :]

Kein sehr schöner Code-Stil, ich habe Euch gewarnt: http://www.memowe.de/css-clan/

Los, macht es besse!

Gruß
Mirko

Zitat von »memowe«

Kein sehr schöner Code-Stil, ich habe Euch gewarnt: http://www.memowe.de/css-clan/

Los, macht es besse!

Gruß
Mirko

erstens verstehe ich dich nicht und zweitens funktioniert deine css-clan seite bei mir nicht, falls sie überhaupt funktionieren soll, sie hat auf jeden fall keinen inhalt, auf welchen link ich auch klicke, ist also somit keine hilfe

Zitat von »fraggle«

zweitens funktioniert deine css-clan seite bei mir nicht

Sind das auf der Seite etwa keine drei Spalten? Sollte ja nur ein kleines Beispiel sein, vielleicht guckst Du Dir mal den Quellcode an. Ist ein bisschen DIV-Gewurschtel, aber als Anschauung, wie man drei Spalten nebeneinander bekommt, sollte es ausreichen. Vielleicht haben hier noch einige Leute schönere Lösungen auf Lager.

Gruß
Mirko

Hi,
zwar auch nicht besonders sinnvoll ausgezeichnet, aber für einen schnellen Einblick vielleicht ganz praktisch: http://www.thenoodleincident.com/tutoria…sson/boxes.html

Übrigens sitze ich gerade an einem kleinen "Code-Generator" für ein einfaches CSS-Layout; ich sag' Bescheid, wenn man es sich schon ansehen kann, auch wenn's dann noch nicht ganz fertig sein sollte.
Gruß
Ingo

Vielleicht schreien jetzt wieder welche auf, aber es geht auch so denke ich:
http://css4you.de/wslayout1/index.php