Tabellenloser Seitenaufbau, CSS-Tutorial gesucht Einstellungen

[Diana]

Kennt jemand ein Tutorial, in dem beschrieben wird, wie man per CSS ein (Website)Layout ohne Tabellen aufbaut?

Ich bin gerade dabei, mich (wieder) in die Grundlagen von CSS einzuarbeiten, dafür hab ich auch ein gutes Tutorial gefunden. Mein Ziel ist die tabellenlose Website – ich würde gern schon mal ein bisschen voraus schnuppern...

[kahikatea]

Ein Schritt-für-Schritt-Tutorial für komplette CSS-Layouts kann ich leider nicht empfehlen, und eine vollkommen tabellenlose Website habe ich (aus inhaltlichen und Browserkompatibilitäts-Gründen) selbst auch nicht zu bieten. Was mir aber geholfen hat, nicht nur die Verwendung von Layouttabellen drastisch zu vermindern, war jenseits des Lernens der CSS-Basics (seinerzeit aus Selfhtml) eher eine Art Meta-Vorgehen:

1) Überlegen, welche Inhalte die Seiten enthalten sollen, welche optischen Gestaltungselemente (Logos o.ä.) darüber hinaus erwünscht sind und welche Navigations-/Bedienungselemente zur Verfügung stehen müssen/was Benutzer auf den Seiten machen können/erkennen sollen

2) Bei allen Inhalten überlegen, welcher Art die Informationen sind und welche innere Struktur sie jeweils haben: Dies hat z.B. dazu geführt, daß sich etliche bis dato tabellarisch dargestellte Inhalte bei näherem Betrachten als Auflistungen zu bestimmten Oberbegriffen entpuppten und mittlerweile in (CSS-formatierte) Definitionslisten umgewandelt sind. Insofern hat für mich das Vermeiden von Layouttabellen oft mehr mit HTML als mit CSS zu tun. Nachdenken über Strukturen und Arten von Informationen finde ich auch sehr hilfreich wenn es darum geht, CSS-Formatierungen für selbstdefinierte Klassen von Elementen zu entwickeln, statt nur einfach "herkömmliche" HTML-Formatierungen eins zu eins durch CSS-Formatierungen zu ersetzen.

3) Überlegen und ausprobieren (ggf. in CSS-Referenzen nachsehen), wie sich die gewählten Elemente mit CSS so formatieren lassen, daß es die Art/Struktur der Information möglichst klar erkennbar macht und dabei auch noch ansprechend aussieht

4) Überlegen und ausprobieren, wie all die Elemente auf der Seite vernünftig benutzbar und optisch ansprechend zueinander angeordnet werden können (und die Positionierungsanweisungen ggf. wieder in CSS-Referenzen nachsehen)

5) Bei Problemen lieber undogmatische Kompromisse eingehen als völlige Tabellenfreiheit auf Kosten der Usability zu verwirklichen (mein Brötchengeber ist ganz stolz auf für viel Geld eingekaufte "barrierefreie" Layouts, bei denen die horizontalen Navigationsbalken als Listen statt Tabellen verwirklicht sind - mit der Folge, daß nun schon minimale Schriftgrößenänderungen im Browser Elemente der Hauptnavigation einfach vom Bildschirm verschwinden lassen oder diese so übereinander liegen, daß sie nicht mehr anklickbar sind :rolleyes: )

Dies ist zugegebenermaßen eher ein Ansatz "von den Inhalten zum Code", nicht tutorial-artig "vom Code zur Website", und meine Erfahrungen beziehen sich auf eine informations-/wissenslastige Website, bei der es nicht auf Effekte ankommt, sondern darauf, daß die Benutzer finden, was sie suchen. Aber vielleicht ist ja der eine oder andere Hintergedanke hilfreich. -_-