Wie CSS anstelle Tabellen und Frames?

[Micha1108]

Hallo an alle Webmaster,

hab mir gerade einige Threads über die Vor- und Nachteile von Frames durchgelesen und da ist ja so fast jeder der Meinung, Frames taugen nichts und Tabellen sollte man ebenfalls weglassen. Die Nachteile sind alle nachzuvollziehen und weil ich kein Profi-Webseitenprogrammier bin, würde mich freuen, wenn Ihr mir helfen könntet:

1. Wie kann man mit CSS tabellenartige Unterteilungen aufbauen?

2. Wie schafft man es ohne Frames, dass sich eine Navigationsleiste (egal, ob am linken oder oberen/unteren Bildrand) nicht mitbewegt, wenn man die Hauptseite scrollt?

 

[joedelord]

bei dieser frage schlies ich mich gleich an. safari will meine tabellen nicht und inline-elemente kann ich nicht box-maesig editieren. was bleibt da noch, auser absoluter positionierung?

 

[pd666]

Wär' für mich auch mal interessant. Aber ich habe die Erfahrung gemacht, dass CSS alleine nix taugt, da jeder Browser es anders darstellt. Ich mache es daher mit Tabellen...aber belehrt mich eines besseren!!

 

[xenayoo]

Hm, ich verwende css nur für allgemeine Formatierungen. So kann ich Schrift-Formmatierungen schnell und komfortabel global für die ganze Site verändern. Für das Layout verwende ich Layout-Tabellen. Frames verwende ich nicht.
Menü und Navi-Leisten lassen sich gut als Library-Objekte (.lbi) mit Dreamweaver erstellen. Beispiel: HIER

 

[polarity]

ich würde auch eher tabellen empfehlen.
css is mit vorsicht zu geniessen.

 

[lengsel]

1. Wie kann man mit CSS tabellenartige Unterteilungen aufbauen?

Das ist nicht nötig. Wenn Du strukturierte Daten in Tabellen (wie Excel) darstellen willst, dann nimmst Du auch Tabellen.
CSS eignet sich aber gut die Layouttabellen zu entsorgen.

Ich empfehle: http://www.meyerweb.com/eric/css/

Grüße,
Flo

 

[raynor]

hi,

antworten, auf deine beiden fragen, findest du hier (und vieles mehr):
http://css.fractatulum.net/index.htm
schau mal unter "beispiele".

viel spass
grüsse vom raynor

 

[minbo]

...aber ich dachte Tabellen wäre kacke in Verbindung mit "barrierefreien" internet. Da diese von einem Lesegeräte für Blinde nicht richtig gelesen werden können.
Welche Alternativen hat man noch?

 

[Micha1108]

hi,

antworten, auf deine beiden fragen, findest du hier (und vieles mehr):
http://css.fractatulum.net/index.htm
schau mal unter "beispiele".

viel spass
grüsse vom raynor

Hallo Raynor,
vielen Dank für den Spitzen-Link!!! Da steht's ja...

Micha

/* edit, weil dort gerade gefunden...: */

"Das Format border-spacing ist das Pendant zum HTML Format cellspacing=""... Diese Formatierung wird aber noch nicht von allen aktuellen Browsern unterstützt, so auch nicht vom Internet Explorer 6..."

Safari kann's

/* nochmal edit, weil ich gerade so darüber nachgedacht habe... */

ist ja eigentlich blöd, dann verwende ich zwar sauberes CSS, aber 99% der Internetbesucher sehen's nicht

 

[Meister Lampe]

Ich habe leider zuwenig Zeit, um das zu erklären, bin auch leider nicht der Guru, da ich selbst eher Programmierer, denn Grafiker bin, aber wenn ihr ein wenig HTML und gut CSS könnt, dann schaut euch mal die folgende Seite an:

http://www.csszengarden.com

Da findet ihr ein File, dem ein riesige Menge css-Designs zur Seite gestellt wurden. Die Anordnung und das Aussehen der einzelnen Elemente ist immer css. Da man sich das css-File anschauen kann und den HTML-Source natürlich auch zur Verfügung hat, kann man dort nachempfinden, wie es geht.

@pd666: da cssZenGarden unter allen mir bekannten Browsern funktioniert, könnte dich das interessieren...

 

[Der Graf]

...aber ich dachte Tabellen wäre kacke in Verbindung mit "barrierefreien" internet. Da diese von einem Lesegeräte für Blinde nicht richtig gelesen werden können.
Welche Alternativen hat man noch?

Prinzipiell richtig, wenn Du Tabellen benutzt, um Design-Elemente zu positionieren. Wenn Du tabellarische Daten darstellen möchtest, ist eine Tabelle Mittel der Wahl, deswegen heißt sie ja auch so. Lesegeräte kommen in dem Fall auch wunderbar damit zurecht.
Aber wenn Du Eine Tabellenzeile für den Kopfteil Deiner Seite benutzt, dann eine weitere Tabellenzeile mit 3 Spalten, eine für die Navigation links, eine für den Content und eine für *Ach sei kreativ*, dann vielleicht noch eine Tabzeile für den Footer (natürlich überall border='0'), dann ist bestimmt nicht im Sinne des Tabellenerfinders, wie man scih auch schnell denken kann.
Jetzt in den Contentbereich noch eine Tabelle in der Tabelle für die Überschrift und weiß ich nicht was, dann vielleicht in dieser Tabelle noch eine Tabelle, dann kann das kein Screenreader mehr korrekt entziffern.
Prinzipiell kannst Du folgende Überlegung anstellen:
Schau Dir den HTML-Quelltext an. Wenn der (sauber formatiert) von oben nach unten gelesen das an inhaltlicher Information hergibt, wie die Webseite, dann kommen auch aktuelle Screenreader damit klar.
Schau Dir mal den Quelltext der eBay-Startseite an, verstehst Du auf Anhieb, welches Tabellenende zu welchem Anfang gehört? Kannst Du auf einen Blick erkennen, wozu welcher Text gehört?
Und als Gegenbeispiel das schon genannte csszengarden.com
Ergibt von oben nach unten gelesen einen Sinn, und vom Informationsgehalt ähnlich wie die eBay-Startseite. Ja okay, weniger Links und weniger Bilder...
Man muß dazu aber auch sagen, daß es schwieriger ist, css-gestylte Seiten automatisch zu generieren, und eBay-Seiten werden ja nun mal dynamisch erstellt...

 

[Katrin]

2. Wie schafft man es ohne Frames, dass sich eine Navigationsleiste (egal, ob am linken oder oberen/unteren Bildrand) nicht mitbewegt, wenn man die Hauptseite scrollt?

Mit der Eigenschaft "position: fixed" kann man Frames simulieren. Ich hab mal ein Layout in dieser Form (natürlich tabellenlos klick! ) aufgebaut, da aber speziell WIN-IE-Browser diese Eigenschaft anders interpretieren, war es nötig, diesen mittels Conditional Comments ein eigenes Stylesheet zur Verfügung zu stellen, damit kann ich dann auch die unterschiedliche Auslegung des Boxmodells mit erschlagen.

Außerdem hab ich bei CSS Zengarden mitgemacht, kann man jedem Einsteiger nur empfehlen! Einfach ein paar Stylesheets runterladen und nachvollziehen, wie sie aufgebaut sind und funktionieren. Es macht Spaß!

 

[Meister Lampe]

für freunde des gedruckten noch eine empfehlung, die mir als umsetzer von layouts die neuen css-möglichkeiten und vor allem die cross-browser-kompatibilität etwas vertieft hat und für anfänger wahrscheinlich weit mehr bringt:

CSS-Praxis von Kai Laborenz, erschienen bei Galileo Computing. Preis ca 35 Euro.

ist ziemlich aktuell einfach geschrieben, gerade zum nachschlagen auch gut geeignet.

 

[Arclite]

Also ich hab das Buch "Cascading Stylesheets" vom dPunkt Verlag gelesen, und benutze komplett für die layouts nurnoch CSS. Dadurch wird Code wirklich viel übersichtlicher, und meiner Meinung nach ists auch einfacher, und man kann komplexere Sachen umsetzen.
Bei Fragen ist auch das Forum von www.webmasterpro.de zu empfehlen.

 

[oglimmer]

Ein super Link zum Thema CSS fehlt noch:
http://www.positioniseverything.net/
Hier sind vor allem die Browser-Bugs korrekt beschrieben.

Da ich mich gerade selbst in CSS einarbeite, habe ich eine kleine Design-Studie für ein Hobby-Projekt gemacht. Wobei ich mitterweile glaube, dass der rechte Kasten durchaus mit Tabellen gelöst werden sollte. Es ist ja eine tabelarische Darstellung. Aber es war halt ein Test wie weit man mit CSS gehen kann.
Der IE 5.x stellt übrigens die Schrift zu groß dar und ich habe das Problem durch keinen Trick behoben (weil mir IE 5.x egal ist).

 

[michanismus]

prof. css und web layout von jemandem lernen der es wirklich drauf hat!
unter anderem ist auch ein buch erhältlich.

SEHR zu empfehlen das buch, habe es selbst auch !!!!

ihr solltet der englischen sprache jedoch mächtig sein und nicht wirklich anfänger sein, was da heisst, nicht mit wysiwyg brotbackprogrammen rumzufummeln und halt das wort xhtml schon länger zu kennen...

http://www.simplebits.com/

 

[Micha1108]

@all:Vielen Dank für die Unterstützung! Das ist ja mehr als genug Info für den Anfang!!! Muss mich da jetzt erstmal durchkauen. Bevor ich rückfällig werde und wieder einen Frame einbaue, weil's mit CSS nicht geklappt hat, sag ich Euch Bescheid...

 

[cym]

Hm, ich verwende css nur für allgemeine Formatierungen. So kann ich Schrift-Formmatierungen schnell und komfortabel global für die ganze Site verändern. Für das Layout verwende ich Layout-Tabellen. Frames verwende ich nicht.
Menü und Navi-Leisten lassen sich gut als Library-Objekte (.lbi) mit Dreamweaver erstellen. Beispiel: HIER

Habs fast genau gleich gemacht: Tabellen und BlindGifs, Navi mit SSI, Schriftformatierung mit CSS. Funzt super

 

[arne1900]

@micha1108: ich bezweifle, dass du jemals fertig wirst, wenn du mit deinem superschnellen ibook arbeitest - 1,33MHz