Mehrspalten-Layout > Anzahl der Contentboxen soll sich der Breite anpassen
Hi,
Ich hab für meine/unsere HP mal wieder ein neues Design. Im prinzip ist es ein pures 3-Spaltenlayout, bei dem sich der Contentbereich in der Mitte der breite nach anpasst (rechts und links ist jeweils ein fixer Container). Soweit kein Problem. Nun hab ich mir aber in den Kopf gesetzt, das die einzelnen Inhalte innnerhalb des Contentbereiches nochmals in einzelne Contentboxen unterteilt werden. Minimum, also bei der Mindestbreite des Layouts, sollen es 2 Boxen nebeneinander sein, die restlichen in die nächste Zeile, usw Die mindestbreite einer Box soll 300px sein
Kleines Rechenbeispiel:
1 - 2 Inhalte > 1 Reihe à 1 - 2 Boxen : Breite jeweils 50%
3 - 4 Inhalte > 2 Reihe à 1 - 2 Boxen : Breite jeweils 50%
5 - 6 Inhalte > 3 Reihe à 1 - 2 Boxen : Breite jeweils 50%
usw, usf
Ist der Anzeigebereich nun aber so groß, dass mindestens 3 oder mehr Boxen in eine Reihe passen, dann sollen sie aus der nachfolgenden Reihe nach oben 'springen'.
Wären es z.B. 3 Boxen, die in eine Reihe passen würden (anzeigebreiche hat mindestens 900px bis max 1199px), dann sollte das ganze so aussehen:
1 - 3 Inhalte > 1 Reihe à 1 - 3 Boxen : Breite jeweils 33,333%
4 - 6 Inhalte > 2 Reihe à 1 - 3 Boxen : Breite jeweils 33,333%
7 - 8 Inhalte > 3 Reihe à 1 - 3 Boxen : Breite jeweils 33,333%
usw, usf
Ich hoffe es ist einigermaßen verständlich was ich meine bzw. vor habe. Genauso hoffe ich, dass sich diese Vorhaben umsetzten lässt (ohne JS).
Ich weiß, dass das sehr anspruchsvoll ist, aber bisher habt ihr hier doch auf (fast) alles eine Lösung gefunden
Danke schonmal für eure Mühe...
PS: Der Grund, warum ich das so haben will, ist dieser: Wie bereits erwähnt, passt sich das Design der Breite an. Wenn nun einer die Seite (Auflösung 1024*768) öffnet sieht er 2 Contentboxen, die richtig gut aussehen (Textausschnitt geht über mehrere Zeilen). Wenn jetzt aber einer mit 1600px Breite auf die Seite kommt und dann ebenfalls nur zwei Contentboxen nebeneinander hat, hat er, wenns ganz schlecht läuft, zwei Boxen mit jeweils einer Zeile Text, die sich über die gesamte Breite ausstreckt ^^
Hi,
Ich hab für meine/unsere HP mal wieder ein neues Design. Im prinzip ist es ein pures 3-Spaltenlayout, bei dem sich der Contentbereich in der Mitte der breite nach anpasst (rechts und links ist jeweils ein fixer Container). Soweit kein Problem. Nun hab ich mir aber in den Kopf gesetzt, das die einzelnen Inhalte innnerhalb des Contentbereiches nochmals in einzelne Contentboxen unterteilt werden. Minimum, also bei der Mindestbreite des Layouts, sollen es 2 Boxen nebeneinander sein, die restlichen in die nächste Zeile, usw Die mindestbreite einer Box soll 300px sein
Kleines Rechenbeispiel:
1 - 2 Inhalte > 1 Reihe à 1 - 2 Boxen : Breite jeweils 50%
3 - 4 Inhalte > 2 Reihe à 1 - 2 Boxen : Breite jeweils 50%
5 - 6 Inhalte > 3 Reihe à 1 - 2 Boxen : Breite jeweils 50%
usw, usf
Ist der Anzeigebereich nun aber so groß, dass mindestens 3 oder mehr Boxen in eine Reihe passen, dann sollen sie aus der nachfolgenden Reihe nach oben 'springen'.
Wären es z.B. 3 Boxen, die in eine Reihe passen würden (anzeigebreiche hat mindestens 900px bis max 1199px), dann sollte das ganze so aussehen:
1 - 3 Inhalte > 1 Reihe à 1 - 3 Boxen : Breite jeweils 33,333%
4 - 6 Inhalte > 2 Reihe à 1 - 3 Boxen : Breite jeweils 33,333%
7 - 8 Inhalte > 3 Reihe à 1 - 3 Boxen : Breite jeweils 33,333%
usw, usf
Ich hoffe es ist einigermaßen verständlich was ich meine bzw. vor habe. Genauso hoffe ich, dass sich diese Vorhaben umsetzten lässt (ohne JS).
Ich weiß, dass das sehr anspruchsvoll ist, aber bisher habt ihr hier doch auf (fast) alles eine Lösung gefunden
Danke schonmal für eure Mühe...
PS: Der Grund, warum ich das so haben will, ist dieser: Wie bereits erwähnt, passt sich das Design der Breite an. Wenn nun einer die Seite (Auflösung 1024*768) öffnet sieht er 2 Contentboxen, die richtig gut aussehen (Textausschnitt geht über mehrere Zeilen). Wenn jetzt aber einer mit 1600px Breite auf die Seite kommt und dann ebenfalls nur zwei Contentboxen nebeneinander hat, hat er, wenns ganz schlecht läuft, zwei Boxen mit jeweils einer Zeile Text, die sich über die gesamte Breite ausstreckt ^^
Zuletzt bearbeitet:
