HTML [CSS & JS] [Diskussion] Spalten Layout - aber wie?

Viele von euch, die schon ein mal eine Webseite erstellt haben, werden sich sicherlich darüber geärgert haben, dass es so viele unterschiedlich Bildschirmbreiten gibt, so dass man immer gezwungen ist, Kompromisse einzugehen, wenn man Webseiten gestalten will:

• Will man dass es möglichst lesbar wird, muss man die Breite des Inhalts begrenzen - Breiten von z.B. 600px sehen aber auf einem 24" Monitor mit einer Auflösung von 1920px horizontal fürchterlich verloren aus.
• Will man, dass es auf einem Handy oder Netbook darstellbar wird, ohne das gezoomt werden muss, verbieten sich Tabellen oder Layouts mit Pixeln, ebenso, wenn man nicht verhindern will, dass z.B. jemand die Schriftgröße zum bequemeren lesen verändern kann.

Die Lösung wäre, wenn man das Ganze in Spalten packen würde.

Leider ergeben sich auch daraus andere Nachteile, wie ich sie auch schon ansatzweise in diesem "Arbeitspapier" beschrieben habe.

edit/
Damit es nicht falsch verstanden wird: Ich benötige keine Programmierhilfe (obwohl ich auch nichts dagegen habe ), sondern Hilfe bei den grundlegenden Sachen, wie z.B.:

• Bei welchen Breiten in mm macht es Sinn?
• Blocksatz oder nicht Blocksatz, das ist die Frage?
• Sollen im Container auch (Unter)Uberschriften vorhanden sein, oder lagert man die besser aus?
• usw.

/edit

Aus dem Projekt soll irgendwann ein mal eine Art funktionierendes Framework zur client-seitigen halbautomatischen Erstellung von Spalten entstehen und ich würde mich über euren Input wirklich freuen. Falls jemand schon ein solches Framework oder passende JS Schnipsel kennt, wäre das natürlich auch hilfreich, denn man muss das Rad nicht zum 2. Mal erfinden.

Da ich nicht noch ein mal wiederholen möchte was dort steht, bitte ich euch darum, euch den Text durchzulesen und hier eure Kommentare, Vorschläge für eine weitere Ergänzungen zu posten und mir bei der Erstellung der Basis "Regeln" für ein "gefälliges" Mehrspalten Layout zu helfen, denn ich bin vieles, aber kein Typograf oder Webdesigner, optische Erscheinung von Webseiten ist für mich immer mit Schmerzen bei der Erstellung verbunden.


PS: Natürlich wird das Ganze unter einer "Open-Source und macht doch damit was ihr wollt" Lizenz veröffentlicht Und die Namen von Helfern werden auf der Seite ebenfalls erwähnt, sofern es gewünscht wird.

vielleicht findet sich bei einfach für alle etwas?

Nope. Da geht es nur um irgendwelche Spaltendesigns - ich bin aber kein Designer und mag auch keiner werden, da mir dafür einfach das künstlerische Geschick fehlt.

Mir dreht es sich dabei darum, dem Webseiten Ersteller ein Handwerkszeug an die Hand zu geben, womit er möglichst einfach flexible Layouts bauen kann, die z.B. auf dem Handy eine Spalte darstellen, auf dem Netbook mit dem kleinen Bildschirm vielleicht 2 und auf dem großen 24" Bildschirm 5 oder 6 und - jetzt kommt's - mit ein und der selben Datei und ohne dass er sich selbst hinsetzen und Buchstaben zählen muss. Einfach den Text in einen Container werfen, dem Script sagen: "Zerleg den in so breite Spalten wie ich sie haben will wenn der Platz beim Betrachter in Breite und Höhe ausreicht, ansonsten lass es" und das war's

Das Problem bei der Sache ist:
Es gibt kein wirklich passendes Regelwerk dafür. Im Prinzip macht das jeder so, wie er gerade lustig ist und flucht bei jeder Änderung an seiner Seite, weil er alles wieder neu machen muss - trotz Trennung von Inhalt und Layout dank CSS (Stichwort: Doppelte floats, has Layout und der IE - eine unendliche Geschichte...).

Da ich das auch schon des öfteren darüber und deswegen geflucht habe dachte ich mir, dass die breite User Basis hier im Forum doch dazu in der Lage sein sollte|könnte, einen Konsens über Sinn und Unsinn einer solchen Maßnahme zu schaffen. Wenn dann noch jeder seinen Senf dazu gibt, wie es denn aussehen soll (ich meine damit nicht wie bunt, sondern Abstände, Typografische Korrekturen an Zeilenhöhe, Laufweite usw., wie und wo Trennungen erfolgen sollen, wo Fallstricke liegen könnten ), dann könnte tatsächlich eine für viele Leute brauchbare Kompromisslösung heraus kommen.

(X)HTML, CSS und JS Freaks können es sich ja hinterher immer noch so anpassen, wie sie es haben wollen ...

Hmm..

ich denke, das was du suchst ist zwar einerseits die eierlegende Wollmilchsau, zumindest im Bereich Webgestaltung/Backend, aber einerseits eigentlich bereits vorhanden, nur nicht da, wo du es gerne hättest. Professionelle DTP-Software, ggfs Word/OO beherrschen diese Kunst schon. Die Schwierigkeit ist eigentlich, einerseits die Logaritmen zu finden, anderseits mit einer derart beschränkten SSprache wie JS agieren zu müssen. Was du wohl suchst ist andererseits eigentlich gedanklich gar nicht so schwer. Du brauchst eine einzige Spalte, in der der Gesamttext fliessend eingepflegt wird. Statt nun aber diese Spalte undendlich gen Boden fallen zu lassen, willst du je nach Bildhöhe/breite die Spalte selbst trennen, was im Endeffekt den Text dann automatisch beeinflusst. Das würde auch die manuelle Schriftvergrösserung beeinflussen, ohne dass du das berücksichtigen musst. Der Inhalt schwappt einfach über, da er ja aus Spaltensicht lediglich die Spalte verlängert - aber ob man das mathematisch ausdrücken kann, samt Sonderregeln für untrennbaren Inhalt?

So gesehen käme es aber dem pro*gres*si*ve en*chan*ce*ment durchaus entgegen, da ohne Skripte lediglich eine Spalte mit 100% Breite übrigbleibt, die man ja als Grobmass per umschliessendem div optisch aufbereiten kann. Was nun also passieren muss: Bildbreite auslesen und/oder per Hotkey vom User bestimmen lassen. Die Spalte aufteilen in X Breiteinheiten/Segmente. Damit hast du das Gerüst, und nun wird der Content der Originalspalte aufgegliedert in die einzelnen Spaltensegmente. Aber ohne ein Backend wie php oder Java sehe ich da wenig Chancen, den Nutzfaktor gegenüber seitenweisem JS im Quellcode aufzuwiegen. Das Problem aber ist nun, dass Content/Skript zusammenwirken müssen, man will ja zB wissen, wieweit zB ein Bild im Fliesstext skaliert werden muss, um in der Spalte zu bleiben (inkl Skript für eine Bildlupe/vergrösserte Ansicht maybe?). Unschöne Dinge wie Hurenkinder wollen vielleicht auch noch vermieden werden, und letzten Endes will sogar noch der Webdesigner ein Wörtchen mitreden, zerhaut dir damit aber jegliche dynamisch erstellten Vorgaben, und setzt sich seine Teile doch wieder so hin, dass die Skripte das nicht wieder sauber ausbiegen können.

Als Grundkonzept würde ich aber eben sagen, eine Spalte mit fliessendem Inhalt, welche ich in beliebige Spalten aufteilen kann, als kleinstes Primärelement. Der Text schwappt fliessend in die jeweils nächste Spalte, wobei der Überschuss eben dynamisch auf eine neue Seite geschoben werden kann.

hth.
LG

Nein, ich suche keine Eierlegende Wollmilchsau, ich suche lediglich nach Parametern für die Zerlegung eines einzigen Containers, welcher Fließtext beinhaltet.

Threepwood schrieb:

Als Grundkonzept würde ich aber eben sagen, eine Spalte mit fliessendem Inhalt, welche ich in beliebige Spalten aufteilen kann, als kleinstes Primärelement. Der Text schwappt fliessend in die jeweils nächste Spalte, wobei der Überschuss eben dynamisch auf eine neue Seite geschoben werden kann.

Zum Vergrößern anklicken....

Genau so war das angedacht.

Ich will nur einen DIV Container (meinentwegen per CLASS gekennzeichnet) haben, in den der Rohtext für genau diesen Container hinein kommt. Dieser soll dann zerlegt werden.

Eine JS-Klasse für getElementByClass (ich frage mich immer noch, warum das nicht zum Standard JS Core gehört ) habe ich auch schon in Mache, damit man die die zu zerlegenden Container nicht alle einzeln mit IDs belegen muss, sondern einfach nur das JS einbinden kann und das den DOM Baum abrattert, nach den Elementen mit der betreffenden Klasse sucht und den zusätzlichen Code einfügt.

Mir schwebt vor, einfach nur die Viewport Dimensionen und zusätzlich die Maße des "Rohcontainers" auszulesen und dann los zu legen, letztendlich genau so, wie es in dem im "Arbeitsblatt" verlinkten W3C Working Draft vorgesehen ist, bloß unter Berücksichtigung der Höhe. Das Ganze natürlich nicht erst, wenn 90% aller Browser den CSS3 Standard beherrschen (also nie, wenn ich so an den IE denke OK, ohne Scherz: Frühestens in 3-4 Jahren) sondern jetzt - zumal es trotz "Last Call" vom WD über den RC zur TR noch ein ziemlich weiter Weg ist ...

PHP braucht es dafür wirklich nicht, denn PHP kann nicht auf Veränderungen auf der Client Seite reagieren (zumindest nicht ohne xmlhttprequest und das wäre in diesem Fall IMHO völliger Blödsinn, da schon alle Daten beim Client vorhanden sind, wenn der Umbau zu Spalten erfolgt) und soo schlecht ist JS schon lange nicht mehr, wenn ich mir die ganzen, mittlerweile ziemlich vollwertigen Anwendungen ansehe, die damit geschrieben werden.

Mal davon ab: Das soll letztendlich genau so unaufdringlich laufen, wie die automatische Silbentrennung (die man übrigens mit einem Klick auf [hy-phe-na-ti-on] oben rechts deaktivieren kann ): Kann man es nicht oder ist JS deaktiviert, wird es halt nicht gemacht und die Seite sieht "konventionell" aus, also kein Verlust.

Weiß zufälligerweise irgendwer, welche Browser ab welchen Versionen
getElementsByClassName(className,tag,elm)
nativ unterstützen und ob es bei denen, die es tun, Quirks in den unterschiedlichen Versionen gibt?

Es dreht sich darum, ob eine einfache Abfrage
ausreichend ist, oder nicht.

Bisher funktioniert es in:

• Safari 3.1+
• Opera 9.5+
• Firefox 3.03+

Funktioniert nicht in:

• IE

edit: Einfacher Test:
Bei einer offenen Google Ergebnisseite folgendes in die Adresseingabezeile des Browsers kopieren:
javascript:alert(document.getElementsByClassName("r").length);
und auf die Eingabetaste (Return) drücken. In dem sich dann öffnenden Meldungsfenster sollte stehen, wie viele Suchergebnisse gerade auf der Seite angezeigt werden. Wenn nicht, klappt's nicht.