nicht angemeldet
Layout mit DIVs Problem
Matthias ApselHallo,
ich habe Schwierigkeiten bei der Erstellung eines Layouts unter Verwendung von DIVs. Anbei ein Bild das verdeutlichen soll wie ich mir das Layout vorstellen. Der schwarze Rand stellt das Browserfenster dar und die Blöcke 1-6 sind Bereiche mit Inhalten in Form von DIVs. Folgende Eigenschaften sollen gewährleistet sein:
Die Blöcke 1-6 sollen wie zu sehen als Gesamtheit immer mittig im Browserfenster zu sehen sein und sich auf die volle Breite erstecken.
Block 1 und 6 sollen fest 300px breit und 300px hoch sein.
Block 2, 3, 4, und 5 sollen sich jeweils den restlichen Platz gleichmäßig aufteilen.
Zusätzlich sollen Block 2 und 3 vertikal scrollbar und Block 4 und 5 horizontal scrollbar sein.
Vielen lieben Dank im Voraus!
-
હેલો
ich habe Schwierigkeiten bei der Erstellung eines Layouts unter Verwendung von DIVs.
Mit display:table; solltest du schnell an dein Ziel kommen.
બાય
--
.
..:-
Om nah hoo pez nyeetz, Malcolm Beck´s!
Mit display:table;
... als Übergangslösung ...
solltest du schnell an dein Ziel kommen.
Für moderne Browser empfehle ich flexbox. So sieht die Browserunterstützung aus: caniuse.com
Matthias
-
Om nah hoo pez nyeetz, Matthias!
Für moderne Browser empfehle ich flexbox. So sieht die Browserunterstützung aus: caniuse.com
Can I use ... ist in dieser Beziehung nicht wirklich aussagekräftig.
Ich bin selber ein großer Flexbox Fan. Allerdings sollte man vor der Verwendung von Flexbox einige Aspekte genau abwägen.
So hat man es derzeit noch mit 3 verschiedenen Versionen zu tun und der IE <= 9 unterstützt keine davon. Ich gibt es AFAIK kein Polyfill, sodass man für diese Browser eine Alternative braucht.
Auch der Firefox ärgert einen ziemlich. Neben dem äußerst "blöden" Bug mit den Prozentwerten, beherrscht er bspw. auch kein flex-wrap (eine der "nützlichsten" Eigenschaften des Flexbox Moduls).
Also je nachdem, was genau man erreichen möchte, kann display:table momentan zumindest noch das "geeignetere" Mittel der Wahl sein.
Und braucht es doch zwingend Flexbox, dann sollte man sich (im CSS) auf einen "Kampf" mit den verschiedensten Browser(versione)n gefasst machen, inkl. Alternative(n) je nach zu unterstützenden Browser(versione)n.
Gruß Gunther
-
-
-
