Tabellenlayout - ich kriegs nich hin!

[Holger_fb4cb8]

Hallo!
Ich habe schon die ein oder andere (einfache) Website erstellt, bisher immer nur mit Frontpage 2003. Um Diskusionen vorzubeugen: Ich weiß, das Programm hat nicht viele Freunde, Code ist schlecht usw. Trotzdem bin ich immer gut damit zurecht gekommen und möchte mich ungern komplett umgewöhnen. Ich verfüge nur über wenig HTML kentnisse, von CSS ganz zu schweigen.
Nun habe ich mich diesmal daran versucht, ein grafisches Layout in Photoshop zu erstellen. Nach vielen Recherchen im Web hat’s auch ganz gut geklappt. Zu letzt habe ich die Grafik geslicet und mit PS als HTML abgespeichert. Dann habe ich das ganze in meinem geliebten Frontpage geöffnet, um es weiter zu bearbeiten. Habe bei den Contentbereichen die grafik als Hintergrund eingefügt, damit ich Text eingeben kann und die Seiten mit wachsen. Siehe da, wunderschöne website: http://www.partyliner.org/gut Mal davon abgesehen das die Grafiken wohl noch etwas zu groß sind…
ABER: Wenn ich im Contentbereich viel Text eingebe, zerreist es mir das Layout an der Seite. Siehe hier: http://www.partyliner.org/schlecht Die bereiche wachsen zwar wie gewollt mit, aber trotzdem verschiebt sich die Tabelle. Warum ist das so und was zum teufel tue ich dagegen?!
Wäre toll wenn mir jemand helfen könnte.

Liebe Grüße, Holger

[Markus_Brucherseifer_a4afd6]

Hallo,

Tabellenlayout

nimm das! http://warum-keine-tabellen.de.vu

mfg
MB

[Stefan_Dewald_34b81b]

Sag Deiner Tabelle…
… sie soll mal einen Rahmen von 1 px; und lass mal mehr Text reinlaufen. Dann wirst Du sehen, was passiert und verstehen warum.

Gruß

Stefan

[Dirk_Pegasus]

Hallo Markus,

ich hab das Gefühl, dass der Autor deines Links da etwas über das Ziel hinausgeschossen ist. Sicherlich kann man mit CSS viel erreichen und es sollte mehr (eben Layout) eingesetzt werden.

Allerdings dann zu sagen, dass HTML quasi nur noch den Content trägt ist imho völlig übetrieben. Dann müßte man kosequent z.B. XML und XSLT/CSS einsetzen, mal abgesehen von JavaScipt etc…

HTML = Hyper Text Markup Language
(HTML ist eine Sprache zur Strukturierung von Texten; Quelle: SelfHTML)

CSS = Cascading Style Sheets
(CSS Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente; Quelle SelfHTML)

ME sollte man jedem das lassen was er kann, auch Frames haben (wie wewewa selber zeigt) ihre Daseinsberechtigung!

Ich würde mich freuen, wenn diese Duískussion weitergeführt wird. Wie man denn all das Zeug sinnvoll kombiniert (Daten in einer DB, zusammensuchen per SQL, umbauen per c# und dann in der ASPX Seite ein bißchen JavaScript zum spielen …) ist sicherlich vom Einzelfall und den Möglichkeiten des „Schreibers“ abhängig.

mfg

Dirk.Pegasus

[Markus_Brucherseifer_a4afd6]

Hallo,

ich hab das Gefühl, dass der Autor deines Links da etwas über
das Ziel hinausgeschossen ist.

ich finde nicht.

Allerdings dann zu sagen, dass HTML quasi nur noch den Content
trägt ist imho völlig übetrieben.
…
(HTML ist eine Sprache zur Strukturierung von Texten; Quelle:
SelfHTML)

Du sagst es selbst: HTML sagt, was ein Textstück quasi „ist“ - Absatz, Tabellenzelle, Listenpunkt, …

(CSS Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es
handelt sich dabei um eine Sprache zur Definition von
Formateigenschaften einzelner HTML-Elemente; Quelle SelfHTML)

Und CSS sagt, wie ein HTML-Element auszusehen hat. Was für einen Punkt der Listenpunkt nun hat, welchen Rahmen die Zelle und welchen Rand der Absatz, …

ME sollte man jedem das lassen was er kann, auch Frames haben
(wie wewewa selber zeigt) ihre Daseinsberechtigung!

Frames sind überflüssig. Ich kenne nichts, was nicht ohne zu realisieren wäre.

Falls „wewewa“ „wer-weiß-was“ bedeutet: Das könnte man problemlos ohne Frames aufbauen - und zwar sogar mit erhöhtem Komfort. Ich muss beispielsweise dreimal die Zurück-Taste an meiner Maus drücken, um im Frame oben rechts einen einzigen Schritt zurück zu kommen. Ohne Frames wäre es einer. Das regt auf, und liegt garantiert an den Frames. Der einzige Vorteil ist, dass beispielsweise das Menü nicht immer neu geladen werden muss, allerdings verliert dieser Punkt angesichts der immer schnelleren Internetanbindung rapide an Bedeutung, und die paar Kilobytes, die man da spart, machen sowieso nicht viel aus - immerhin reden wir nicht von umfangreichem Bildmaterial oder so, das ohnehin lokal zwischengespeichert würde.

Ich würde mich freuen, wenn diese Duískussion weitergeführt
wird. Wie man denn all das Zeug sinnvoll kombiniert (Daten in
einer DB, zusammensuchen per SQL, umbauen per c# und dann in
der ASPX Seite ein bißchen JavaScript zum spielen …) ist
sicherlich vom Einzelfall und den Möglichkeiten des
„Schreibers“ abhängig.

Man muss es ja nicht übertreiben

mfg
MB

[anon43317210]

Hallo,

ich hab das Gefühl, dass der Autor deines Links da etwas über
das Ziel hinausgeschossen ist.

sicherlich formuliert er - absichtlich - etwas hart, aber er hat schon ziemlich recht.

Sicherlich kann man mit CSS
viel erreichen und es sollte mehr (eben Layout) eingesetzt
werden.

Mir faellt gerade nichts ein, was man mit html und nicht stattdessen mit CSS erreichen koennte. Mit CSS sogar besser, weil schneller.

Allerdings dann zu sagen, dass HTML quasi nur noch den Content
trägt ist imho völlig übetrieben. Dann müßte man kosequent
z.B. XML und XSLT/CSS einsetzen, mal abgesehen von JavaScipt
etc…

HTML = Hyper Text Markup Language
(HTML ist eine Sprache zur Strukturierung von Texten; Quelle:
SelfHTML)

ja, genau. Und wenn man den Gedanken des semantisch sinnvollen Webdesigns noch mit einbringt kommt man zi ein paar sehr lohnenswerten Gedanken.
Html traegt nur noch Inhalt.
Wie der Inhalt dargestellt wird, haengt vom - fuer die Ausgabegeraete optimierten oder vom Benutzer ausgewaehlten - StyleSheet ab.
Google sieht gar kein Layout und kann das tun, was es am besten kann: Inhalte indizieren.
Ich sehe mit meinen Firefox ein schoenes Layout.
Mein Kumpel mit seinem MobileDevice sieht ein reduziertes Layout.
Mein blinder Nachbar laesst sich von seinem Screenreader die Inhakte und nicht irgendeinen Tabellenmist vorlesen. Und bekommt Überschriften als Überschriften und Texte als Texte, weil ich mir vorher überlegt habe, was für einen Sinn ein Element trägt und wie ich es dementsprechend auszeichne (h1-6, p, ou, ul, dl, …)
Das macht es allen einfacher.

CSS = Cascading Style Sheets
(CSS Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es
handelt sich dabei um eine Sprache zur Definition von
Formateigenschaften einzelner HTML-Elemente; Quelle SelfHTML)

ja, eben. s.o.

ME sollte man jedem das lassen was er kann, auch Frames haben
(wie wewewa selber zeigt) ihre Daseinsberechtigung!

Aber man kan ja gelegentlich darauf hineisen, dass es bessere Alternativen gibt. Vor allem, wenn es irgendwann die Kunden begriffen haben, weil ihre Seite billiger in der Pflege und besser bei Google gerankt sind. Wenn man dann als Webdesigner nicht mitgekriegt hat, wo es hingeht…

Ich würde mich freuen, wenn diese Duískussion weitergeführt
wird. Wie man denn all das Zeug sinnvoll kombiniert (Daten in
einer DB, zusammensuchen per SQL, umbauen per c# und dann in
der ASPX Seite ein bißchen JavaScript zum spielen …) ist
sicherlich vom Einzelfall und den Möglichkeiten des
„Schreibers“ abhängig.

Leider spucken gerade solche Systeme immernoch einen ziemlichen Schrott aus.
Dabei kann man ja nun auch eine DB-Loesung dazu bekommen, vernuenftigen Code zu schreiben.

Argumente fuer den Kunden, der vermutlich keinne Lust hat, sich mit solchen Fragen wirklich auseinanderzusetzen sind:
weniger Trafic - ine CSS-Seite ist bis zu 1/3 „leichter“ als eine verschachtelte Tabellen-Kostruktion. Bei Trafic in GB-Dimensionen ist das richtig Geld.
leichtere Pflege, weil Inhalte schneller greifbar sind
lechtere Layoutaenderungen
Google likes it
zukunftssicherer - Html ist ein Auslaufmodell, Xhtml/CSS kommt. Ohne Frames.

Wie schoen das geht zeigt zB http://www.csszengarden.com/tr/deutsch/

Ich selber schreibe seit einiger zeit meine Sites immer mehr nach dieen Regeln und kann sagen, es erleichtert auch die Arbeit, wenn man sich erst umgestelt hat. Denn wirklich praktisch waren diese Tabellenmoster doch nie

Greetinx
Christian

[Jan_625356]

auch Hallo,

Frames sind überflüssig. Ich kenne nichts, was nicht ohne zu
realisieren wäre.

Frames haben immer noch ihre Daseins-Berechtigung.
Sicher kann man das mittels CSS (was diverse schon genannte Vorteile hat) auch erledigen und Frames werden mehr und mehr von der Bildfläche verschwinden, aber hin und wieder finde ich sie schon recht praktisch, weil schnell geschrieben. (Auch wenn man dann die Nachteile in Kauf nehmen muss, dass z.B. die in den Frames dargestellten Inhalte nicht von den Robots, Spidern etc. gelesen werden usw.)

allerdings verliert dieser Punkt angesichts der
immer schnelleren Internetanbindung rapide an Bedeutung, und
die paar Kilobytes, die man da spart, machen sowieso nicht
viel aus - immerhin reden wir nicht von umfangreichem
Bildmaterial oder so, das ohnehin lokal zwischengespeichert
würde.

Mit der Aussage wäre ich pauschal vorsichtig. Es gibt mehr User als man denkt, die immer noch mit analogen Leitungen unterwegs sind. Es gibt immer noch Gegenden, die maximal ISDN verfügbar haben.
„die paar Kilobytes“ summieren sich relativ schnell und machen den Seitenaufbau bei langsamen Verbindungen nicht nur nervtötend, sondern ermutigen den User dazu, diese Seite nicht mehr zu besuchen.
Auch wenn es immer schnellere Internetanbindungen gibt, wer die Langsamen unter den Teppich kehrt, schliesst damit absichtlich eine ganze Benutzergruppe aus.
In diesem Zusammenhang muss man auch an das „umfangreiche“ Bildmaterial denken, dass erst einmal in den Cache muss. (und dabei ist es relativ egal, wie man umfangreich definiert - die Bytes müssen erst mal durch die Leitung auf den Rechner gelangen…)

Gruß

[Markus_Brucherseifer_a4afd6]

Hallo,

Frames sind überflüssig. Ich kenne nichts, was nicht ohne zu
realisieren wäre.

Frames haben immer noch ihre Daseins-Berechtigung.
Sicher kann man das mittels CSS (was diverse schon genannte
Vorteile hat) auch erledigen und Frames werden mehr und mehr
von der Bildfläche verschwinden, aber hin und wieder finde ich
sie schon recht praktisch, weil schnell geschrieben.

Wo genau?

(Auch
wenn man dann die Nachteile in Kauf nehmen muss, dass z.B. die
in den Frames dargestellten Inhalte nicht von den Robots,
Spidern etc. gelesen werden usw.)

Das ist wohl aber ein wesentlich schwerwiegenderer Nachteil als das Vernachlässigen (Nicht: Ausschließen) von Modem- und ISDN-Nutzern.

allerdings verliert dieser Punkt angesichts der
immer schnelleren Internetanbindung rapide an Bedeutung, und
die paar Kilobytes, die man da spart, machen sowieso nicht
viel aus - immerhin reden wir nicht von umfangreichem
Bildmaterial oder so, das ohnehin lokal zwischengespeichert
würde.

Mit der Aussage wäre ich pauschal vorsichtig. Es gibt mehr
User als man denkt, die immer noch mit analogen Leitungen
unterwegs sind. Es gibt immer noch Gegenden, die maximal ISDN
verfügbar haben.

Ich wage mal zu behaupten, dass beispielsweise dieses Forum in seiner Benutzung auch für Modemnutzer nicht wesentlich eingeschränkt wäre, wenn man es mittels PHP aus seinen Einzelteilen in eine Datei zusammensetzen und die verschicken würde. Man kann durchaus erreichen, dass diese Einzelteile in der Reihenfolge beim User eintreffen, in der er sie braucht (Geklickter Artikel zuerst, dann Artikelliste oben rechts, Forenliste oben links und das Menü zum Schluss). Dadurch kann er schon lesen, während Teile noch laden. Und DSL-Leute können schon lesen, während eben nichts mehr lädt.

„die paar Kilobytes“ summieren sich relativ schnell und machen
den Seitenaufbau bei langsamen Verbindungen nicht nur
nervtötend, sondern ermutigen den User dazu, diese Seite nicht
mehr zu besuchen.

Ich war lange selbst mit einem Modem unterwegs, und ich kann daher aus ERfahrung sprechen. Als Modemnutzer ist man an lange Ladezeiten generell gewöhnt. Und eine Seite wie diese hier lädt nicht so viel länger als andere. Zumal mit Frames pro Frame mindestens ein Dokument, meistens sogar noch mehr (Bildchen, Stylesheets, …) angefordert werden müssen. Wenn der Browser die Verbindungen nicht mehrfach benutzt und mehrere Dokumente durch eine Verbindung zieht, müssen dabei sogar noch mehr als vier Verbindungen aufgebaut werden, was bei einem Modem natürlich auch langsamer geht (Ping und so). Mit einem einzelnen, gut aufgebauten Dokument kann man die langsamere Geschwindigkeit bei einem Modem ja fast ausgleichen.

Auch wenn es immer schnellere Internetanbindungen gibt, wer
die Langsamen unter den Teppich kehrt, schliesst damit
absichtlich eine ganze Benutzergruppe aus.

Wie gesagt, ausgeschlossen werden die dadurch nicht. Sie können die Inhalte nämlich komplett benutzen wie alle anderen auch. Sie müssen eben nur etwas länger warten, aber das ist eben die Eigenart dieser Internetanbindungen und prinzipiell so.

mfg
MB

[Omar_Abo_Namous]

Missionierung
Hallo Holger,

ich weiss wie diese ewig-„keine-Tabellen“ Nörgeleien klingen können, aber es lässt sich sehr leicht demonstrieren, wie einfach ein Webseiten-Design mittels CSS ist.

Die Grundlage jeder Designvorlage ist eine vorhandene Struktur. Das hat zwei Vorteile:

1. Die Struktur ist auch später für „Maschinen“ (bots sowie lesesoftware für (seh-)behinderte Menschen) leichter verständlich.

2. Das ändern des Designs kann leichter gar nicht sein (aber das hängt vom Grad der Abstraktion der Struktur ab).

Ich könnte nun anfangen, die Nachteile des von dir erstellten Design aufzulisten - und glaub mir es sind genügend. Ich will aber versuchen, konstruktiv zu sein. Deine Seite ist aufgebaut wie jede zweite Seite auch: Ein headerbereich mit einem horizontalen Menü, ein content-Bereich mit einer „sidebar“ und einem footerbereich.

Ich hab mir mal die Zeit genommen, das ganze ohne Tabellendesign zu gestalten. Hier kannst du eine Version noch ohne footer sehen:

http://www.toomuchcookies.net/temp/holger/gui.html

Wenn du dir den Quelltext anschaust, wirst du schnell merken, dass es weit einfacher zu durchblicken ist, als die tabellenstruktur. Es ist ausserdem einfacher jemandem mit einem css-design-problem zu helfen, als jemandem mit einem tabellenproblem (auch weil das erste einfacher zu durchblicken ist…)

Ich hoffe wirklich, dass du hiermit was anfangen kannst…

Gruss, Omar Abo-Namous