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

[blue_moon]

hm, ich denk mal, bei google hast du selbst schon geguckt. ich bleib immer wieder auf css4you hängen. da sind zumindest ein paar beispiele mit entsprecheneden codes abgebildet. ansonsten... spannendes thema! :D

[Diana]

Oh, vielen Dank! (Guck ich gleich mal)

Jo, geggogelt hab ich...
Bei diesen Themen (wie CSS oder PHP) ist es immer schwierig, Informationen zu finden, wo jemand mal mit etwas Abstand von der Detailebene erklärt, wozu wir das eigentlich alles lernen sollen. ;)
Man findet zum Beispiel wunderbare "Tutorials" dazu, wie man die affenscheusslichsten Effekte (Tabellen mit fetten, verschiedenfarbigen Rahmen oder "glühende" Schriften) erzeugen kann, aber Überblick und Sinnfragen kommen etwas kurz. Zumindest bei dem, was da so im Netz zu finden ist.

[blue_moon]

wohl wahr... und am ende ist man froh, im netz dann doch nicht ganz soviel von dieser art layout zu finden. :rolleyes:

[blu]

Wie "blue_moon" schon schrieb ist css4you wirklich zu empfehlen.
Der Workshopbereich "Wie fange ich an" bietet einen guten Einstieg in die CSS-Materie. War auch mein Anfang. :-)

Der Beitrag wurde von blu bearbeitet: 14.Mar.2006 - 20:54

[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. -_-

[Diana]

Hallo, Kahikatea,

Tabellen können gerne Tabellen bleiben, sofern sie auch Tabellen sind. ;)

Es ist ja so, dass die Webdesignerlein Tabellen zum Layouten missbraucht haben, um die Browser zu zwingen, Elemente in festgelegter Größe an festgelegten Plätzen darzustellen.
Dafür ist HTML eigentlich nicht gemacht. Erfunden wurde es von einer Handvoll Wissenschaftler, die lange Texte in Times 14 Punkt auf eine Website tippten, hier und da waren ein paar Links dabei und auch mal ein Bild – aber wie das genau aussah und wo die Elemente genau platziert waren, das war schlichtweg unerheblich.
Bei grafisch durchgestalteten Websites ist das ganz anders, hier ist es wichtig, dass das Aussehen reproduzierbar ist und alle Elemente genau stehen, wo sie der Gestalter haben will. Also wurden die Browser mit verschachtelten Tabellen gequält.
XHTML und CSS sind ein Weg aus diesem Dilemma, hier kann man Elemente positonieren, ohne die zweifelhafte Hilfskonstruktion Tabelle. Ich finds gerade ziemlich spannend und lerne fleissig!

[kahikatea]

Ich hoffe, mein letztes Post hat nicht den Eindruck erweckt, es ginge mir um "back to the roots"-HTML a la Netscape 1.x :unsure: - ich fände so etwas selbst im wissenschaftlichen Bereich unnötig unattraktiv. :ph34r: Was ich rüberbringen wollte war nur die Empfehlung, vor dem Basteln von CSS-Formatierungen auf ein den Inhalten gerecht werdendes HTML-Gerüst zu achten und entsprechende Elementklassen festzulegen. Mit denen lassen sich dann ja ansprechende optische Präsentationen basteln, ob nun mit viel oder wenig Layout-Grafiken. Gelegentlich stoße ich bloß auf Konstruktionen, wo meinem Eindruck nach mit CSS etwas zurechtzubiegen versucht wird, was eigentlich auf einer grundlegenderen Ebene nicht stimmt.

[blue_moon]

völlig ot: falsch machen kann ich die dinge auch mit der richtigen technik. :ph34r: insofern gelten immer noch die 'goldenen regeln für schlechtes html' - die seite gibt's schon seeehr lange und sie ist immer noch aktuell

[Lisabeth]

... und nochmal völlig ot: :ploep:
Danke, Blui, Du hast meinen Nachmittag gerettet!

[Diana]

Ja, im Prinzip kann mit CSS ganz schnell das Gleiche passieren, wozu früher die verschachtelten Tabellen herhalten mussten: Der Designer versucht mit allen Mitteln, seine Gestaltung festzunageln und den einen und einzigen Idealzustand zu konservieren. Kommt mir bekannt vor! B)

Was ist eigentlich inzwischen die minimale Bildschirmgröße, für die eine Website noch (ohne großes Scrollen) betrachtbar sein soll? Sind 600 x 800 Pixel immer noch der Referenzwert nach unten oder darf man ein kleines bisschen größer sein?

[blue_moon]

ein kleines bisschen grösser wäre dann 768 x 1024? wenn ich mich hier so umgucke, dürfte das inzwischen der standard sein. für meine 'freizeitseiten-bastelei' würde ich mich zumindest darauf beschränken, bis dahin 'runterzubrechen'. eine auflösung 600 x 800 hab ich in den letzten jahren eigentlich nur gesehen, wenn ich meinen (windows- :rolleyes: )rechner mal im abgesicherten modus hochfahren muss.

[kahikatea]

Die allermeisten Bildschirme, auf die ich treffe, könnten technisch 1024x768 Pixel oder mehr anzeigen. Allerdings kenne ich einige Menschen, die selbst für 17"-Röhrenmonitore nur 800x600 Pixel als Auflösung eingestellt haben, weil sie dauerhaftes Betrachten kleiner Schrift oder Bilder schlichtweg zu anstrengend finden (und das sind keine Menschen, die man im Alltag als sehbehindert einschätzen würde).

Selbst wenn der Bildschirm 1024x768 Pixel groß ist, bedeutet das außerdem nicht, daß auch das Browserfenster auf volle Größe maximiert ist - manche Menschen sehen gerne etwas von ihrem schönen Hintergrundbild, oder haben andere Anwendungen in kleinen Fenstern daneben.

Und schließlich gibt es Bildschirme, die zwar 1024x768 Pixel bieten, aber so klein sind (z.B. 12" Diagnonale am Notebook), daß die Benutzer aus Lesbarkeitsgründen eine Mindestschriftgröße im Browser einstellen, die pixelbasierte Layouts wiederum über den Haufen wirft.

Schlußendlich ist es wohl eine Frage Deiner Zielgruppe - bei passionierten jugendlichen Videospielern am PC läßt sich im Durchschnitt etwas anderes voraussetzen als in der PC-benutzenden Allgemeinbevölkerung oder in Organisationen wie Unis, wo alte Hardware aus finanziellen Gründen oft bis zum Totalschaden im Einsatz bleibt.