CSS viele div's nebeneinander, zentriert und ggf. mit luft nach unten.

moin liebe cb gemeinde,

ich sitze mal wieder und rätsel über CSS.

ich habe mir ein drei spaltiges designe entworfen, in dem der user mit der maus die größen der spalten variieren kann, quasi wie frames. so kann man in 3 modulen gleichzeitig arbeiten, doch das ist hier ehr nebensächlich. Entscheidend ist nun das man die größe verändern kann. Ändert sich die größe einer Spalte, passen sich auch die elemente im Inneren an.

Im beispiel Bild geht es z.b. darum Buttons, die einer Schicht auf einem Job entsprechen, je nach breite zentriert anzuzeigen. Ist die Zeile breit genug sollen 3, oder wenn noch breiter 4 buttons, wenn zu schmal nur 2 oder sogar nur einer angezeigt werden (kleiner als das mindestens 1 button reinpasst skaliert das projekt fenster nicht).

ich habe das nun in meiner stürmischen jugenlischen art so gelöst das JavaScript das positionieren übernimmt. Leider nimmt das ab 20 projekten erheblich an rechenzeit in anspruch, sodass ein flüssiges neu positionieren während man die spalte ändert nicht mehr möglich ist.
(im schnitt werden sich später je ca. 30 projekte mit 2~3 schichten gleichzeitig auf der seite befinden, je nach tagesuafkommen)

Im groben mache ich es so das ich einmal alle buttons aus der zeile raushole und mir ausrechne wie viele buttons ich nebeneinander zeigen kann. (statisch, da für alle zeilen gleich)

Dann werden solange neue zeilen erzeugt (unsichtbar) und die passende anzahl buttons reingeladen, diese werden dann an die ursprüngliche zeile eingehängt und zentriert.
(damit man nicht für jeden button manuell die position ausrechnen muss, sondern nur die innerhalb der neuen Zeile)

das ganze muss doch aber auch mit reinem css gehen?

oder ist mein aufwand zu kompliziert?

P.S.
die werte sind alles nur testwerte, nicht wundern

Hi,

sowas wie "width: auto" schon mal probiert? Ich habe sowas nie mit so viel aufwand gemacht. Wenn nicht genug Platz für 2 Buttons ist skaliert doch der Browser in der Regel (solange du es dynamisch definierst) so oder so, das heißt es wird ein Zeilenumbruch gemacht und es steht nur noch einer da, wenn es größer wird eben wieder 2 oder 3 oder 4...

VG,
Mad

ohhhja das habe ich probiert ich hätte auf diese komplizierte verfahrensweise gerne verzichtet.

was ich evtl. vergessen habe:

jeder button ist ein eiger div-container.

wenn du mir sagst wie ich hinbekomme das die sich zentriert nebeneinander anordnen und bei bedarf eine zeile nach unten wandern und die ursprungszeile in der höhe verändern mit reinem css wäre ich dankbar, darum geht es mir ja

ich habe es jetzt soweit beschränkt das man min 2 und max 4 buttons pro zeile zu sehen bekommt.

was ich abschlißeden noch machen will ist folgendes:
man sieht ja das nach oben noch mehere zeilen sind, die haben id.r. aber so kurze werte sodass ich stets 2 zeilen zu einer zusammenfassen will, wenn die breite über 800px beträgt, da jede Zeile so oder so maimal 400px breite einimmt.
das wird wohl nur mit js machbar sein, oder? denn die zeilenfarbe muss auch immer eine andere seite, also für jede zweite das hellblau......

Hi,

das letztere ist denke ich nur mit JS machbar, richtig. Das CSS gucke ich mir bei Gelegenheit mal an, wenn mir nicht jemand zuvor kommt. Gerade wenig Zeit Lässt sich aber ganz sicher so machen!

VG,
Mad

Gib den Buttons doch einfach display:inline-block und dem umgebenden Container ein text-align:center. Sollte eigentlich zum gewünschten Effekt führen.

Hi,

schon mal versucht die Buttons in ein <div> mit variabler Breite zu legen, dass <div> ist dann zentriert z.B. über "margin-left: 20px; margin-right: 20px" und dadrin befinden sich jetzt deine Buttons als Liste. Jetzt gibst du den <li>-Elementen eine bestimmte Breite und "float:left". Wenn jetzt die Zeile "voll" ist, springen die automatisch in die nächste Zeile und so weiter...

Grüße

das sind schonmal 2 vielversprechende ansätze, das habe ich noch nicht versucht.

derzeit mache ich es fast so wie du, ein div mit variabler breite, das bekommt die div buttons verpasst und wird anschließend zentriert.

ich teste mal, schaffs aber leider erst heute abend, danke so weit und wenn wer weitere vorschkäge hat, immer her damit

Hi,

denke auch, auf den ersten Blick lesen sich die Vorschläge sehr vielversprechend!

VG,
Mad

Jipp, inline-Block ist hier das Zauberwort. Gepaart mit text-align:center; für das umschließende Element...

Gruß
Spike S.

konnte es vor spannung nicht aushalten

also der inlineblock hats wirklich gerissen, sieht genauso aus wie das ergebniss meines skriptes

nochmal danke an euch alle!!

ein qual das man sich als programmierer auch noch mit css beschäftigen muss, aber wieder was neues gelernt.

nächstesmal frag ich gleich hier, statt eine lösung in js zu implementieren, alte gewohnheit

Wenn du dich als Programmierer nicht mit CSS beschäftigen willst musst du dir einen Designer suchen ;-)

CSS ist halt genau dafür da: das Aussehen im Browser regeln und inzwischen kann es das wirklich gut, da es viele Möglichkeiten gibt und die aktuellen Browser das auch unterstützen (als ich noch etwas aktiver damit zu tun hatte war noch Firefox 2 aktuell... der konnte inline-block noch nicht...)

Aber die Buttons sehen jetzt schon ganz schön nach Div-Suppe aus. Sicher das du keine Liste nutzen willst?