[TYPO3-german] CSS: dynamische Spaltenanordnung

[Christian Wolff]

Am Fri, 06 Jul 2007 18:43:15 +0200 hat Christoph Kuhn <adonix at chrisk.ch> geschrieben:

> Hallo,
>
> ich möchte in einem Parent-DIV mit dynamischer Breite mehrere div's, welche je
> nach Breite automatisch ein, zwei oder gar drei-spaltig angeordnet werden.
> Nun gibt sich aber das Problem, dass bei Angabe von min-width und max-width
> das erste div rasch auf max-width ausdehnt und das nächste nicht nebenan
> lässt, auch wenn beide in der vorgegebenen Breite platz hätten. Damit bleibt
> beim Aufziehen des Fensters rechts eine Lücke, bis die Lücke für die
> min-width des nächsten Divs genügend gross ist.
>
> Unten ist die Aufgabe schematisch dargestellt. Wenn in der letzten Zeile ein
> div alleine bleibt, so spielt es keine Rolle, ob dieses nur die Breite des
> darüber liegenden einnimmt, oder die ganze Breite.
>
> Bedingungen:
> - die Anordnung der div's muss nur über CSS funktionieren (kein Java)
> - die gesamte Breite des Parent-DIV muss immer ausgefüllt sein.
> - die Spalten müssen gleichmässig verteilt sein.
>
> Ist sowas überhaupt möglich?
>
> Gruss
>
> chris
>
>
>
> von oben nach unten wird die Fensterbreite stets vergrössert:
>
> -------
> |  1  |
> |     |
> -------
> |  2  |    Fensterbreite auf min-width Breite der divs
> |     |
> -------
> |  3  |
> |     |
> -------
>
>
> -----------
> |    1    |
> |         |
> -----------
> |    2    |    Fensterbreite auf auf max-width Breite der divs.
> |         |    Wenn das Fenster noch etwas mehr verbreitert wird,
> -----------
> |    3    |
> |         |
> -----------
>
>
> -------------
> |  1  |  2  |
> |     |     |
> -------------   nehmen die divs wieder min-with Breite ein und
> |  3  |         ein div springt in die obere Reihe.
> |     |
> -------
>
>
> -----------------
> |   1   |   2   |
> |       |       |    Die Fensterbreite ist nun nahezu zweimal
> -----------------    max-witdh breit. Wenn weiter verbreitert
> |   3   |            wird,
> |       |
> ---------
>
>
> -------------------
> |  1  |  2  |  3  |   springt das nächste div in die obere
> |     |     |     |   Reihe und alle haben min-width Breite.
> -------------------

Hi Chris
ich bezweifle die machbarkeit ohne Javascript fixes.
da der IE 6 zumindest die min und max width / heigt properties
nicht versteht.

desweiteren hast du ja das problem das du je nach breite es browsers fensters zwischen
ein die einzelnen spalten auf 100% 50% oder 33% laufen lassen willst.
weil nur so kannst du den vollen platz ausnutzen.

eine möglichkeit währe den spalte einfach ein feste breite zu geben. und alle left floaten zu lassen.
das wird von allen gängigen browsern unterstützt. hat aber den nachteil das nicht immer 100% der fensterbreite
ausgenutzt werden können.

würde des wegen folgenden compromiss empfehlen:
du gibst den einzelnen spalten eine feste breite!
und baust ein javascript ein was sich darum kümmert die breiten anzupassen. damit kommen leuten
die kein javascript haben zumindest noch in den genuss der 3 spalten wenn der bildschirm breit genug ist.
alle mit aktivem javascipt bekommen genau das was du ihnen zeigen wolltes. immer volle seitenbreite.

gruss chris


-- 
christian wolff - multimedia producer
telefon: (030) 789 134 99
handy: 0179 49 44 758
email: chris at connye.com
adresse: schenkendorfstr. 6 - 10965 berlin