angenommen, ich hätte 6 DIVs ( oder sonst ne Anzahl) die unterschiedlich gross sind (Breite bei allen gleich, Höhe nach Inhalt).
Nun wollte ich die dass diese 6 DIVs in zwei Spalte verteilt werden, und zwar so, dass möglichst beide Spalten gleich lang sind.
Leider kann ich nicht einfach sagen DIV 1-3 linke Spalte, DIV 4-6 rechte Spalte, de vielleicht 1-3 zusammen nur 400px hoch wären, und 4-6 über 2000px.
Etwa so:
Das sind drei verschiedene Beispiele à je 2 Spalten.
Mir ist glaubs bekannt, dass die aktuellen CSS Spezifikationen Text Kolumnen noch nicht unterstützen, CSS3 (oder zumindest FF und Webkit) dies aber ermöglicht.
Nun, gibt es trotzdem einen Workaround?
Was ich mir vorstellen könnte, wenn auch etwas umständlich, nach dem Rendern die Höhen der DIVs per JS auszulesen, und mit einer Rechnung zu entscheiden wo getrennt wird.
Aber eben, etwas umständlich und ohne JS nicht möglich -> Barrierefreiheit.
Genau gleich hoch ist bei unbekanntem Inhalt mit HTML und CSS bei DIVs nicht möglich, aber du kannst dir ein Container erstellen mit zwei gefloateten DIVs als Spalten. Der Container wird dann immer für beide Spalten gleich gross sein, wenn du z.B. am Schluss im Container ein "clear:both" einfügst.
Gut, dass die beiden Spalten nicht genau gleich gross sein können ist mir klar.
Es geht halt nur optisch darum, dass die ungefähr gleichgross sind.
Nicht dass die linke Spalte ganz kurz ist, und die rechte super lang.
Auf dem Bild oben sieht man es denke ich gut. Die dunkelgrünen Felder sind die DIV-Absätze, das Hellgrüne ist eigentlich nur da, damit man sieht es sind 3 Beispiele à zwei Spalten, und nicht ein Beispiel à 6 Spalten.
Sichtbar wäre der Hellgrüne Bereich nicht.
Nicht dass die linke Spalte ganz kurz ist, und die rechte super lang.
das hängt einzig und allein vom inhalt ab. mehr kann man da nicht machen. oder du haust einfache so lange leere absätze in ein div, bist es passt. ist zwar nicht die feine englische art, aber imho die einzige möglichkeit
peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson) Meine Seite
Brauchste nur noch einen tollen Algorithmus, welcher ein ausgewogenes Bild errechnet mit den Höhen
Wenn du die Länge der Texte indirekt schon nach den Boxen 1 - 5 vergibst, dann wäre der Algorithmus 1 + .. + x = 5 - ... - x . (wäre natürlich ein Sonderfall)
Wenn die Boxen alle unterschiedlich sein können, dann müsstest du wohl tatsache etwas knobeln bzw. vlt doch alle Varianten durchrechnen lassen..
Das ist ein Fehler im Designkonzept. Wenn du unterschiedlich lange, aber gleichwertige Inhalte hast, dann solltest du sie nicht zweispaltig darstellen. Das erschwert die Lesbarkeit und macht die ganze Seite "unordentlich". Mit Bildern kann man das mal so machen, aber nicht mit Text.
Zieh jedes DIV über die gesamte Breite und alles ist gut.
Nun, es ist zu sagen, dass es sich beim Inhalt der DIV nicht um Text handelt, sondern es sind Daten (Jahreszahlen mit kurzem Beschreib à ~4 Wörtern).
Die verschiedenen DIVs sind die verschiedenen Kategorien in wechle die Daten unterteilt sind (Ausstellungen, Werke, Ausbildung, etc).
Im Design benötigen die etwas weniger als die Hälfte von der Seite. Ich denke es wäre eher ein Fehler im Design wenn ich die Seite sehr lang und dafür in der Breite nur halb genutzt machen würde.
Ähnlich wie bei wikipedias alphabetischer Auflistung. Anstatt eine Spalte zu machen die super lang wäre, und welche die Breite nicht nutzen würden, haben sie auch drei Spalten gemacht die +/- gleichlang sind.
Wenn es jetzt wirklich einfach nur ein normaler Text wäre dann, ja klar würde ich die ganze Breite einfach nutzen, aber da es sich hierbei um Auflistungen handelt welche die Breite nicht ganz nutzen würden wäre es eine a) Platzverschwendung und b) unnötige Scrollorgie.
Edit:
ähnliches Prinzip hier zu finden. http://www.fit-inn.ch/power-plate.htm
Ist irgendwie angenehmer (meiner Meinung nach) das in zwei Spalten zu lesen, als in einer einzigen.
Ähnlich wie bei wikipedias alphabetischer Auflistung.
Hier ist die Anzahl der Einträge bekannt. Im Normalfall ist ein Eintrag exakt eine Zeile hoch .. Damit gibt es nicht das Problem wie bei dir. Du hast n Boxen mit unterschiedlichen Höhen. Korrekt?
Zitat:
ähnliches Prinzip hier zu finden.
Ich vermute, dass diese Seite NICHT dynamisch so ausgerichtet wird.
Dann hast du es ja ziemlich einfach... Du hast da eine Bestimmte Anzahl von <li>s - wieviele wirst du ja wohl herausfinden können wenn sie Dynamisch erstellt werden. Dann hast du einen bestimmten Abstand zwischen jedem Div und du kannst das ganze ziemlich einfach ausrechnen.
Wie genau es dann aussehen soll, bzw. wie die DIVs angeordnet sein sollen und wie genau sie dynamisch erstellt werden müsstest du hier noch etwas genauer reinschreiben, wenn du iene genauere Antwort willst.
Wie gesagt, ausrechnen könnte ich es scho, und auszählen wieviele <li>-Elemente ausgegeben werden ist auch kein Problem.
Ich dachte nur, vielleicht gibt es eine einfache Lösung ohne Rechnerei. Vielleicht ja sogar ein einfacher CSS-Tag den ich nicht kenne (à la columns:2).
Aber wen es nichts fertiges gibt mach ich das per JS (PHP ist nicht gut, da die einzelnen LI nicht immer gleichgross sind, einige haben noch kleinere (40*40px) Icons drinnen.
Die RIGID-FLEX-Technologie Die sogenannte "Flexible Elektronik" , oftmals auch als "Flexible Schaltungen" bezeichnet, ist eine zeitgemäße Technologie zum Montieren von elektronischen Schaltungen.
WeltExplorer v1.0 ist ein Dateimanager zum Browsen und Operieren im Dateisystem. Bei installiertem cURL können Ordner und Dateien zu entfernten FTP-Servern hochgeladen bzw. von diesen heruntergeladen werden, etwa zum Erstellen von Backups oder Mirrorsites
> Job Site Pro - web-basiertes Programm, auf PHP/MySQL für Erstellung der funktionellen Job Board Site gebaut. Das hat erweitertes Management-System für Arbeitssuchenden und Arbeitgeber und kann für bestimmte Länder, Regionen oder einfach generelle Job Si