Das Grid, Trenner und Umfluss

Das Layout der Uni Köln teilt die Haupt-Inhaltsspalte in bis zu 3 Spalten auf. Die Elemente nehmen dabei somit 33%, 50% oder 100% Breite ein. Es gibt auch die Möglichkeit ein 67%-Element mit einem 33%-Element zu kombinieren. Die Prozent-Angaben beziehen sich immer auf die Breite des Haupt-Inhaltsbereiches.
Die Maginalspalte lässt sich nicht weiter in Unterspalten aufteilen. Somit bekommen hier alle Elemnete 100% egal, welche Breite angegeben wurde.

Das Grid ist Responsive und teilt die Elemente in unterschiedlichen Auflösungen unterschiedlich auf. So kann es sein dass 33%-Elemente auf einem Tablet als 50%-Elemente angezeigt werden. Auf Smartphones haben meist alle Elemente 100% Breite und werden ausschließlich untereinander dargestellt.

50%-Elemente können dabei nicht sinnvoll mit 33%igen oder 67%igen Elementen kombiniert werden, da sich so keine 100% zusammenadiren lassen, was zu diversen Layout-Problemen führen kann.

Lässt sich nicht sicherstellen, dass alle Elemente, die nebeneinander angezeigt werden sollen, die selbe Höhe haben, muss mit Trennern gearbeitet werden. Diese beenden die aktuelle Zeile und es wird in der nächsen Zeile weiter gemacht.Dies ähnelt dem Verhalten der Absatztaste bem Schreiben von Texten.

Ohne Angabe einer Breitenbegrenzun umfließen Normale Textelemente die vorhergehenden Elemente dynamisch und nehmen möglichst 100% Breite ein.
Überschriften haben in diesem Fall jedoch immer 100% Breite und bringen einen Trenner mit, so dass man das Umflussverhalten nur bei Texten ohne Überschrift bemerkt.

33% (Lang)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus sem quis libero consectetur, eu sagittis nisi scelerisque. Pellentesque vel odio gravida, commodo justo sit amet, consectetur nibh. Maecenas in aliquet ligula. Vestibulum nunc eros, viverra nec sapien venenatis, fringilla malesuada nisl. Nam vulputate leo eget posuere fringilla. Quisque rhoncus enim at dolor scelerisque gravida. Ut vulputate maximus ipsum semper iaculis. Sed fermentum nisl velit, et lobortis elit cursus nec. Aenean luctus hendrerit nulla ut sagittis. Suspendisse potenti. Phasellus placerat erat justo, eget luctus velit vestibulum a. Cras nunc est, euismod eu aliquet ac, tempor eu justo. Sed non placerat magna. Duis justo metus, dictum nec magna non, sodales tristique tellus.

33% (Mittel)

33% (Kurz)

(Auf dieses Element folgt ein unsichtbarer Trenner)

33%

67%

(Auch nach diesem Element ist ein unsichtbarer Trenner nötig, damit das folgende 50%-Element nicht in die Lücke rutscht)

50%

100%

"Nur Überschrift" (Default)

320px480px640px786px1024px1280px1440px

Dieses Nur-Bild hat 50% Breite und abgesehen von dieser Bildunterschrift keinen Text. Das Bild-Element hat auch keine sichtbare Überschrift Photo: Creator / Autor

Dieses Text-Element besitzt keine eigene sichtbare Überschrift und auch kein Bild, es umfließt das vorausgehende Element bishin zum nächsten Trenner. Das 50%-Bild wird hier also noch umflossen, die Überschrift darüber stellt dabei den Trenner da.

UNIVERSITÄT ZU KÖLN

Musterseiten