Boxen spaltenartig anordnen

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

nehmen wir an, ich hätte 20 Kästen (DIVs oder ULs) mit fester Breite (250px), jedoch unterschiedlichen Höhen.

Diese liegen in einer übergeordneten Box, deren Breite sich nach der Browserfensterbreite richtet, jedoch eine feste Höhe besitzt (z.B. 600px).

Nichts davon ist absolut positioniert.

Zunächst sieht es einfach nur aus wie eine senkrechte Kette von Kästen.

Mein Ziel, das ich per JavaScript realisiert habe, jedoch gerne mit CSS verwirklichen würde:

Die senkrechte Kette soll an mehreren Stellen so umgebrochen werden, dass sich eine Art Spaltenlayout ergibt.

Jedoch ohne Absolutpositionierung o.ä., und auch so, dass auch bei Veränderung der Fensterbreite keine Spalte aus der umgebenden Box rechts hinausragt. Unten dürfen die Boxen ruhig beliebig hinausragen, Hauptsache horizontal entspricht die Gesamtbreite der Spalten ungefähr der Breite der umgebenden Box.

Hat jemand einen Tipp?

Sonnige Grüße,

Mohamed.

#2

Moin,

wenn Du das schon realisiert hast, kannst Du dann einen Link posten? Ich kann mir nämlich grad nicht wirklich vorstellen, was Du meinst.

Solltest Du darauf abzielen, dass Du die Kästen untereinander ohne Abstand positionieren willst, ohne dass da Freiräume bleiben, das geht mit CSS nicht. Die Frage war erst vor kurzem da.

Liebe Grüße,
-Efchen

#3

Hi,

kann es sein, dass Du einfach nur nach float suchst?

Gruß
Ingo

#4

float
Hi,

hab’s schon mit „float“ versucht, siehe meine Screenshots in der Antwort an Efchen.

Schöne Grüße,

Mohamed.

#5

Screenshots
Hallo Efchen,

mit JavaScript sieht das so aus, mit beliebiger Boxenanzahl, beliebiger Boxenhöhe (je nach Inhalt) und beliebiger Höhe der umgebenden Box:

http://img5.fotos-hochladen.net/uploads/columnsnpzhj…

Mit „float“ sieht es leider nur so aus:

(CSS-Code:

ul {width:210px; border:solid 1px blue; float:left;}

)

http://img5.fotos-hochladen.net/uploads/floatqb9x4fw…

Dabei ist nicht einmal so sehr das Anordnen von liks nach rechts das Störende, sondern die klaffenden und platzraubenden Löcher zwischen den Zeilen.

Schöne Grüße,

Mohamed.

#6

Moin,

Dabei ist nicht einmal so sehr das Anordnen von liks nach
rechts das Störende, sondern die klaffenden und platzraubenden
Löcher zwischen den Zeilen.

Ja, das habe ich vermutet. Ist im Moment der erste Artikel im Archiv: /t/divs-vertikal-einpassen/7211314

Mit CSS nicht lösbar.

Liebe Grüße,
-Efchen

#7

Hallo Efchen,

danke für Deine Antwort.

Schöne Grüße,

Mohamed.

#8

Hallo Mohamed,

geht nicht … geht nicht :smile:)
nur mit CSS
und einmal mit verkleinertem Browser-Fensterdiv.container{width:100%;margin:2px;border:1px solid…

#9

Hallo Nitya,

nur mit CSS

Genauer: Das war „nur mit HTML und CSS“.

Und dass die Spalten per HTML künstlich konstruiert werden wollre ich gerade vermeiden.

Schöne Grüße,

Mohamed.

#10

Hallo Mohamed,

was?
etliche inhalte „spaltmäßig geordnet“ in einer box ohne absolute…
für die „spalten“ brauchst halt html-elemente

wie machst Du das mit JS?

h♥rzlichen Gruß
Nitya

#11

Moin,

geht nicht … geht nicht :smile:)

Deine „Lösung“ verändert aber die logische Bedeutung des Inhalts und gruppiert Elemente, die nicht zusammengehören. Ist also in den wenigsten Fällen geeignet.

-Efchen

#12

Hallo Mohamed,

was?
etliche inhalte „spaltmäßig geordnet“ in einer box ohne
absolute…
für die „spalten“ brauchst halt html-elemente

Mit anderen Worten: „Du musst halt mogeln.“ :smile:

Mit dem neuen CSS3-Multi-Column-Layout dürfte es schon gehen, aber das ist leider nicht browserübergreifend.

wie machst Du das mit JS?

Feststellen lassen, welche Box über den unteren Rand geht, diese um die gewünschte Spaötenbreite per margin-Eigenschaften nach rechts oben verschieben, der Rest zieht automatisch mit nach oben (muss aber per JS mit nach rechts verschoben werden). Dann wieder feststellen lassen, welche Box noch über den unteren Rand geht, usw.

Schöne Grüße,

Mohamed.

#13

Moin,

wie machst Du das mit JS?

Feststellen lassen, welche Box über den unteren Rand geht,

Über Position und tatsächliche Höhe, also unabhängig von Schriftgröße und Ähnlichem?

Gruß,
-Efchen

#14

Tach,

was ist an divs-Inhalten logisch???

N.

#15

incl. window.onresize ?

h♥rzlichen Gruß
Nitya

PS. … bin auch dafür, so viel als möglich den client machen zu lassen ;.)

#16

Feststellen lassen, welche Box über den unteren Rand geht,

Über Position und tatsächliche Höhe, also unabhängig von
Schriftgröße und Ähnlichem?

Ja, d.h. mit offsetTop und offsetHeight.

#17

incl. window.onresize ?

Ja.

________________________________________

#18

Moin,

was ist an divs-Inhalten logisch???

Ein div beschreibt eine logische Gruppe, also Dinge, die zusammengehören.
Du gruppierst hier mehrere Listen, die eigentlich nicht zusammengehören und sagst damit, dass sie zusammengehören.

Das ist eine andere Logik als vorher.

-Efchen

#19

Hallo

Ja, d.h. mit offsetTop und offsetHeight.

nicht trivial denn :
bei geschachtelten elementen nur mit einer reskursiven funktion wirklich echte werte lieftert und crossbrowser nciht vergessen. … bedenke da einiges realitve ist. … mehr auf http://w-w-w.ms/a4c7ii

#20

Hallo

Hi

Ja, d.h. mit offsetTop und offsetHeight.

nicht trivial denn :
bei geschachtelten elementen nur mit einer reskursiven
funktion wirklich echte werte lieftert und crossbrowser nciht
vergessen. … bedenke da einiges realitve ist. … mehr auf
http://w-w-w.ms/a4c7ii

Stimmt, für solche Fälle habe ich zwei Funktionen getX() und getY().