# Webseiten Layouts mit DIV's bzw. CSS



## Hawky (4. September 2005)

Guten Abend zusammen, 

Ich bastle grad mal wieder an einem redesign meiner Homepage und bin jetzt mit dem layout fertig und muss sie jetzt in Code umsetzen, jetzt überleg ich halt ob ichs wieder wie immer mit einem haufen tabellen machen soll, was schnell unübersichtlich wird und zu Problemen in diversen Browser führen kann oder ob ichs mit DIV's mache. DIV's sind meiner Meinung nach die Zukunft und daher tendiere ich dazu, jetzt allerdings die Frage zu was zählt dieses gestalten mit Div's zu CSS, oder?

Könnt ihr mir ein Buch empfehlen zu dem Thema oder vielleicht eine Seite die einige Tutorials zu dem Tham enthält auser jetzt tutorials.de?

Vielen Dank

P.S. Damit ich kein neuen Thread aufmachen muss frag ich auch noch gleich welches PHP5 + MySQL Buch zu empfehlen ist, über das Data Becker das es gibt hab ich nur schlechtes gelesen.

Danke

Mfg
Hawky


----------



## pamax (4. September 2005)

Hi,

  Das dürfte dir weiterhelfen.
http://css.fractatulum.net/
http://www.css4you.de

  pMx


----------



## Gumbo (4. September 2005)

> DIV's sind meiner Meinung nach die Zukunft […]


Der allgemeine Trend zur Nutzung von div-Elementen – der jedoch auch übertrieben werden kann (vgl. Divitis und div-Wahnsinn) – wäre im Allgemeinen unter dem Begriff „semantisches Markup“ zusammenzufassen, was eigentlich auch der Grundgedanke einer Auszeichnungssprache ist und heutzutage Dank engagierter Entwicklern/Autoren wieder thematisiert wird.



> […] jetzt allerdings die Frage zu was zählt dieses gestalten mit Div's zu CSS, oder?


Das Nutzen der richtigen Mittel für die richtigen Bereiche nennt man die adäquate Nutzung beziehungsweise Unterstützung von Web-Standards: Inhalte werden mit HTML semantisch ausgezeichnet und mit Hilfe von CSS formatiert.


----------



## Inspector (5. September 2005)

Hi,

div-Container und semantische Auszeichnung sind nicht notwendigerweise synonym. Semantische Auszeichnung heißt letztendlich, daß man die Dinge nach dem benennt, was sie *sind*, und nicht nach dem, wie sie *aussehen* (sollen). Man kann also durchaus auch mit div-Containern eine nicht-semantische Auszeichnung hinbekommen  Umgekehrt ist es allerdings mit Tabellen ziemlich schwer, eine semantische Auszeichnung hinzubekommen.


----------



## Gumbo (5. September 2005)

Die Frage ist, ob man die Elemente für die Einsatzzwecke nutzt, für die sie gedacht sind, oder ob man sie – meist zu optischen oder Positionierungszwecken – missbraucht. Denn es gilt nicht grundsätzlich als böse oder verpönt, Tabellen einzusetzen. Einige sind diesem „DIV-Wahn“ so verfallen, dass sie selbst tabellarische Daten versuchen durch div-Elemente und komplizierter CSS-Deklarationen darzustellen – wohl gemerkt: darzustellen.
An solch einem Punkt frage ich mich immer, ob die Personen überhaupt den Begriff „semantisches Markup“ kennen und damit auch etwas anfangen können, oder schlicht dem Schlachtruf „Tabellen sind out, DIV’s sind in“ (natürlich mit falsch gesetztem Apostroph) blindlinks folgen.

Ähnliches gilt auch für das font-Element: Zwar wissen schon viele, dass das font-Element vom W3C abgelehnt und damit als „veraltet“ gilt, diese jedoch stumpf durch span-Elemente zu ersetzen, ist auch nicht das Wahre.


----------



## Inspector (5. September 2005)

Hi,

nun, was den Missbrauch von falsch verstandenen Tags angeht, da gebe ich Dir vollkommen Recht. Auch, was die derzeitige div-Hype angeht. Aber das ist immer noch nicht das Gleiche wie semantische Auszeichnung.

Beispiel: Nehmen wir mal an, Jemand will auf der linken Seite eine Navigationsleiste anbringen, z.B. per div-Container. Und diese Navigationsleiste soll von mir aus in blau gehalten werden. Dann sind weder div class="blau" noch div class="links" semantische Auszeichnungen, div class="Navigation" oder div class="Navigationsleiste" oder sowas in der Art hingegen schon. In allen diesen Fällen wurde ein div-Container verwendet. Fazit: Ein div-Container alleine macht noch keine semantische Auszeichnung.

Das Gleiche kann man z.B. auch mit frames hinbekommen. Ich weiß, frames sind alt und out. Egel. Wenn man frames verwendet und diese per Dateiname und/oder ID passend benennt, dann ist auch das semantische Auszeichnung. Das Resultat kann man sehr deutlich sehen, wenn man sich so eine frame-Seite mit einem Browser wie z.B. Lynx anschaut. Dann werden die einzelnen Frames als Link angeboten. Um zu wissen, was man damit soll, müssen diese Frames also passende sinnvolle Namen haben. Eine der Forderungen der Accessibility Guidelines und nichts Anderes als semantische Auszeichnung.

Was Deine anderen beiden Beispiele angeht, hast Du natürlich Recht. Wenn das, was man darstellen möchte, eine Tabelle *ist*, dann sollte man es auch Tabelle *nennen*, und folglich logischerweise auch das Tebellen-Element verwenden. Und was die font-Herumwurstelei per span angeht, das ist natürlich nicht nur reichlich aufgebläht und unübersichtlich, sondern hat definitiv mit semantischer Auszeichnung rein gar Nichts zu tun. Semantische Auszeichnung bedeutet, daß ich den Textabschnitt, von mir aus per span, so nenne, daß klar wird, was für eine Art Text das *ist*, und nicht, wie der Text *aussehen* soll. Logischerweise sind übrigens Elemente wie b (bold) oder i (italic) überhaupt nicht geeignet für semantische Auszeichnung. Wenn man z.B. ein Zitat gerne in Fettschrift darstellen möchte, dann tut man das bei semantischer Auszeichnung, indem man den Textabschnitt Zitat *nennt*, indem man diesen Text innerhalb von cite oder blockquote einfügt. Wie dieses Zitat dann *aussieht*, das wird per css geregelt. Genau das, und nichts Anderes, bedeutet die Trennung zwischen Bedeutung und Aussehen.


----------



## hela (5. September 2005)

Hallo, 





			
				Inspector hat gesagt.:
			
		

> ... Beispiel: Nehmen wir mal an, Jemand will auf der linken Seite eine Navigationsleiste anbringen, ...


 ... dann sollte man die Navigation beispielsweise als (ungeordnete) Liste gestalten und die Menüpunkte sind dann in UL-Tags eingeschlossen. Da das UL-Element ein Blockelement ist, können *ihm* alle notwendigen Eigenschaften zugewiesen werden. Damit wird (meistens) ein umhüllender DIV-Block überflüssig.


----------



## Inspector (5. September 2005)

Hi,

das ändert Nix an der Namensgebung, egal, ob es nun ein ul oder ein div ist. Wobei allerdings zugegebenermaßen eine Liste besser ist, da es sich ja um eine Liste von Navigationselementen handelt. Ansonsten trägt das zur Klarstellung des Begriffs "semantische Auszeichnung" wenig bei.


----------



## Hawky (5. September 2005)

Es ist ja schön und gut das ihr euch darüber jetzt auseinandesetzt ob dieses exzessive div genutze sinnvoll ist, allerdings bin ich jetzt weniger schlau wie vorher, ich hab mir die Links von ganz oben durchgelesen. Allerdings bin ich jetzt total verunsichert durch eure diskussion was sinnvoller ist, tabellen oder div's oder beides?!


----------



## Inspector (5. September 2005)

Hi,

was Das angeht, ganz einfach: Wenn es sich um tabellarische Daten handelt, nim 'ne Tabelle, sonst div.


----------



## hela (5. September 2005)

Hallo Hawky, hallo Inspector,

  lest bitte beide mal den Beitrag "Sematischer Code ...", auf den Gumbo in seinem Beitrag #3 verwiesen hat, und versucht ihn zu verstehen.


----------



## Inspector (5. September 2005)

Hi,

sehr guter Text! Absolut!

Es geht mir auch weder um eine Verteufelung noch eine Glorifizierung von semantischem Markup. Semantisches Markup ist schlicht eine Notwendigkeit. Es geht mir einfach nur darum, klarzustellen, daß alleine die Verwendung eines div statt einer Tabelle noch lange kein semantisches Markup ist.

Deswegen: In dem Artikel wird von *Bedeutung* geredet. Ich habe das als *Sein* bezeichnet. Darum geht es, wenn man Markup so benutzt, wie es gemeint ist. In diesem Sinne ist übrigens, wie bereits oben geschrieben, eine Liste als Markup für eine Navigationsl(e)iste tatsächlich besser. Aber nicht deshalb, weil eine Liste ein Blockelement ist und man dieses so und so darstellen (per css formatieren) kann, sondern weil es eine Liste *ist*. Ich bin deswegen bei meinem Beispiel bei div geblieben, weil eben der Eindruck entstand, daß allein die Verwendung eines div bereits semantisches Markup darstellt. War vermutlich so nicht gemeint, aber es sollte einfach klar herausgestellt werden.

Um nochmal auf den (berechtigten) Einwand von Hawky zurückzukommen: Klar, wir sind hier von einer konkreten Frage etwas auf eine Grundsatzdiskussion gekommen. Aber die ist durchaus nützlich. Wenn man diesen Artikel verstanden hat, dann ergibt sich die Antwort auf die ursprüngliche Frage von selber, und die Antwort auf ähnliche Fragen gleich mit:
Tabelle? Klar, wenn es sich um tabellarische Daten handelt. Die Daten als Gesamtheit *sind* eine Tabelle. Oder, um bei den Worten dieses Artikels zu bleiben: Die *Bedeutung* dieser Daten ist "Tabelle".
Liste: Immer. Jedenfalls, wenn es sich um eine Liste handelt. *Ist* es eine Liste? Ist die *Bedeutung* dessen, was ich da produziere, eine Liste? Dann als Liste markieren.
div-Container? Immer dann, wenn man allgemeine blockorientierte Layoutprobleme lösen muß, die nicht durch besseres Markup hinzukriegen sind. Also, wenn es sich partout nicht um eine Liste und nicht um eine Tabelle und nicht um ein Zitat oder was auch immer handelt, sondern in keine dieser Kategorien passt, dann div. Und wenn es ähnlich allgemein ist, aber nicht blockorientiert, sondern inline, dann span. Zusätzlich impliziert semantisches Markup in diesen Fällen einen geeigneten Klassennamen oder gar eine geeignete ID.

Zusammengefasst: In dieser Grundsatzdiskussion geht es durchaus um die Beantwortung der Eingangsfrage, nur aus Gründen der Verallgemeinerbarkeit resp. Anwendbarkeit auf ähnliche Fragestellungen eben allgemein. Im Grunde so, daß der Fragesteller die Möglichkeit hat, sich die Frage selbst zu beantworten.


----------



## Hawky (5. September 2005)

Der Artikel ist schon sehr interessant und sehr hilfreich, allerdings dreht es sich nur um Text also Content! Wie ist das wenn man ein recht aufwändiges grafisches Layout hat, sollte man das in Tabellen packen ich mein formatieren kann man ja immernoch mit css (also den content) .

Aber ich bin definitiv schlauer als vorher!


----------



## Gumbo (5. September 2005)

Semantisches Markup bedeutet schlich und einfach: Schreibe, was Du meinst, und meine, was Du schreibst. Es bedeutet, Inhalten eine Bedeutung oder eine Metainformation mitzugeben: Überschriften werden als HTML-Überschriften, Absätze als HTML-Absätzen, Listen zu HTML-Listen, tabellarische Daten als HTML-Tabellen ausgezeichnet. Jedes Element besitzt eine bestimmte semantische Bedeutung. Und auch nur zu diesem Zweck sollte es eingesetzt werden.

Das heißt auch, dass nur der tatsächliche Inhalt ausgezeichnet werden sollte – nicht mehr. Dazu kommt auch die strikte Unterscheidung von deskriptiven und dekorativen Grafiken.


----------



## son gohan (5. September 2005)

Hallo,

mit dem Verwenden von sematischen Code bin ich eigentlich schon vetraut, aber mir ist eben aufgefallen, das ich eigentlich immer einfach den CSS Klassen belibiege Namen gebe.

Das ist aber dann nicht mehr semantisch oder?

Wen man es richtig macht mit den Klassennamen, worauf sollte man dann noch achten, müssen die semantischen Klassennamen auch in Englisch geschrieben werden oder ist das egal.

Was wäre wenn jeder seine Muttersprache verwenden würde für die Klassennamen, dann wäre es doch nicht mehr semantisch?


----------



## hela (6. September 2005)

Hallo son gohan,

 bei der Wahl semantischen Codes geht es um die treffende Auswahl der HTML-Elemente. Diese HTML-Elemente sollten inhaltlich den "harten Kern" der Seite bilden, so dass auch ohne CSS die Seite möglichst lesbar ist und somit klar wird, worum es hier inhaltlich überhaupt geht.
 Mit CSS kann dann der "HTML-Kern" nach dem Prinzip "die Form folgt dem Inhalt" zum Layout geformt werden. Bei der Namensgebung von IDs und CSS-Klassen hast du die freie Auswahl. Am besten gibst du ihnen m.E. solche Namen, unter denen *du* dir auch nach Monaten oder auch Jahren noch etwas vorstellen kannst.


----------



## Gumbo (6. September 2005)

Markup nennt man die Auszeichnungen einer Auszeichnungssprache. Von semantischem Markup ist die Rede, wenn die Auszeichnungen aufgrund ihrer Semantik korrekt benutzt werden. Dies auch auf die Wahl der Klassenbezeichnungen zu übertragen, ist zwar löblich, wird nicht unbedings im Zusammenhang mit semantischem Markup gesetzt.
Denn Klassen werden häufig nur zu Formatierungszwecken genutzt und sind daher nur für die Entwickler interessant. Diesen treffende, auf ihre Semantik bezogene Bezeichnungen zu geben, kann daher nur im Interesse des Autors sein. Auch für Außenstehende wäre die Struktur dadurch schneller nachzuvollziehen.


----------



## son gohan (6. September 2005)

Hier seybold.jan-andresen.de/20semanticmarkup.php
Stand ja folgendes:


> Geben Sie Ihren div Elementen eine ID oder eine Klasse, die den Inhalt oder die Funktion des Bereichs beschreibt und nicht sein Aussehen.



Das hört sich für mich so an als ob man bei der Auswahl der Klassen und id Namen doch etwas mehr achten sollte.


----------



## SilentWarrior (6. September 2005)

Die Lektüre dieses Textes hilft sicher weiter:

http://www.w3.org/QA/Tips/goodclassnames


----------



## Inspector (6. September 2005)

Hi,

Stimmt, aussagekräftige IDs und Klassennamen sind mehr als wünschenswert. Die Bezeichner sollten das angemessen bezeichnen, was ihr Inhalt ist.
Sprache ist hierbei sekundär. Englisch wird halt international verstanden. Wenn Du Webentwicklungen machst, die vielleicht irgendwann man internationale Bedeutung haben werden, verwende besser Englisch. Ansonsten ist die Muttersprache mindestens genauso gut, vielleicht besser.

Ansonsten kann ich mich Gumbo nur anschließen. Allerdings ist das für Jemanden, der hauptsächlich in Designkategorien denkt, nicht leicht nachzuvollziehen. Daher vielleicht mal ein *Versuch* einer weiteren Interpretation:

Was ist *Inhalt (Content)*? Im Prinzip Alles, was in der fertigen Seite sichtbar ist. Ist dann die Navigation auch content? Ja! Content mit einer genau spezifizierten semantischen Bedeutung: Eine Liste von Navigationsmöglichkeiten. Ist ein Logo Content? Ja! Ist eine dekorative Hintergrundgrafik Content? Nein. Ist der gewählte Font Content? Nein. Ist ein Diagramm oder ein informatives Photo Content? Ja.

Vielleicht etwas technischer: Content ist die Schnittmenge aus dem, was ein üblicher Browser auf dem Bildschirm anzeigt und dem, was ein Screenreader aus der Webseite vorlesen kann. Der Rest ist Dekoration. Nicht, daß ich Dekoration für unwichtig halte, nur sollte man das auseinander halten.


----------



## Gumbo (6. September 2005)

> Was ist Inhalt (Content)? Im Prinzip Alles, was in der fertigen Seite sichtbar ist.


Inhalt ist alles das, was der Autor zu vermitteln sucht.


----------



## Inspector (6. September 2005)

Hi,

eine vielleicht etwas philosophische Frage: Was, wenn der Autor im Wesentlichen *Design* zu vermitteln sucht? Die Praxis zeigt, daß diese Frage gar nicht so abwegig ist. Ward dann das Design zum Inhalt?


----------



## Gumbo (6. September 2005)

Der Sinn der Auszeichnungssprache HTML ist es, Daten eine Bedeutung mitzugeben. Dabei sind die Daten vor allem in textueller Form präsent.
Wenn nun jemand versucht, das Design seiner Website zu „verkaufen“, soll er davon ein Screenshot machen und einen ansprechenden Text dazu schreiben.

Der Begriff semantisches Markup ist auch immer im Zusammenhang mit den Blindesten aller Benutzergruppen zu sehen: den Suchmaschinen. Denn Suchmaschinen interpretieren allgemein weder die Präsentationsfeatures von HTML, noch CSS oder eine andere Stylesheet-Sprache. Sie sind allein am Inhalt, insbesondere am textuellen Inhalt und dessen Bedeutung im Zusammenhang des gesamten Dokuments interessiert. Und die Bedeutung der Daten im Zusammenhang des gesamten Dokuments auszuzeichnen, ist nur durch semantisches Markup möglich.


----------



## SilentWarrior (6. September 2005)

Inspector: Das ist imo genau das (ein) Problem. Immer mehr Webdesigner (und ich spreche hier ausdrücklich von Designern) meinen, mit einem geilen Design die Inhaltslosigkeit ihrer Webseiten kompensieren zu können. Dabei sucht der Benutzer doch kein geiles Design, sondern Inhalt, Inhalt, Inhalt – ich lese derzeit recht viele Linux-Howtos, und die meisten wurden noch in den 90er-Jahren geschrieben, mit überhaupt keinem CSS und/oder irgendwelchen Formatierungen, nur Überschriften, Texten und Listen. Aber es reicht – weil es Inhalt hat. Sogar verdammt viel. Und wie Gumbo schon gesagt hat, wenn du Design vermitteln willst, dann mach eine Bildergalerie auf. Ansonsten hat der Inhalt oberste Priorität.


----------



## son gohan (6. September 2005)

Hi,

die Frage könnt ich mir sicher auch sparen, aber es sieht wohl so aus als ob semantische Bezeichnungen der id und Klassennamen auch Vorteile bei Suchmaschinen bringen können?


----------



## Inspector (7. September 2005)

Hi,

@SilentWarrior: Ja und nein. Ich würde das nicht werten. Design trägt ebenfalls eine Message. Während der Text den rationalen Anteil rüberbringt, bringt das Design den emotionalen Anteil rüber. Nun, und genauso, wie es durchaus legitiim ist, ein Telephonbuch zu vertreiben (100% Ratio), genauso dürfte es auch legitim sein, einfach nur 100% Emotio zu vermitteln. Allerdings wenn, dann würde ich das auch konsequent machen. Naja, jedenfalls von daher würde ich solch eine Webseite nicht abwerten. Also nicht: "Da versucht Jemand, mangelnden Inhalt durch Design zu kaschieren", sondern: "Da dekoriert Jemand ein gutes Design mit ein bisschen Text". 

@Son Gohan: Soweit ich weiß, durchaus. Allerdings bin ich da nicht unbedingt *der* Fahmann


----------



## Gumbo (7. September 2005)

> […] es sieht wohl so aus als ob semantische Bezeichnungen der id und Klassennamen auch Vorteile bei Suchmaschinen bringen können?


Das würde ich nicht sagen. Denn Suchmaschinen Interessiert vor allem die semantische Nutzung von HTML-Tags, dessen Inhalte und die Beziehung zu anderen, artverwandten Seiten.


----------

