Webseiten Layouts mit DIV's bzw. CSS

[Hawky]

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]

Hi,

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

pMx

 

[Gumbo]

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]

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]

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]

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]

Hallo,

... 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]

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]

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]

Hi,

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