Herzlich Willkommen
beim Muster-Template für
"Responsives Web-Design"

Reihe CenterBefore 1 bis n (fakultativ, mit 1 Kolonne)

Diese Seite ist nur ein Muster-Template ohne konkreten Inhalt. Sie zeigt nur einige Darstellungsmuster und demonstriert die "responsive" Wirkung auf Smartphones und Tablets. Diese Wirkung zeigt sich auch auf Desktops und Notebooks, wenn die Browserfenster entsprechend verkleinert werden.

Reihe im Centerbereich mit 1 Kolonne (hier ohne ContentBox)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis, turpis at volutpat fringilla, lectus eros vulputate quam, a viverra elit turpis id leo. Integer ac tortor eros, in luctus tortor. Vivamus euismod purus a mi rhoncus rutrum. Aenean et ipsum at magna facilisis blandit. Donec cursus quam nec urna dapibus quis auctor nulla auctor. Pellentesque elementum tortor in mi dictum facilisis. Morbi lectus ipsum, aliquam ut interdum quis, faucibus sed urna. Suspendisse vitae lectus ipsum, eget cursus magna. Vivamus id egestas sem. Etiam molestie convallis nibh eu rutrum. Curabitur sed libero nisl.

Reihe im Centerbereich mit 2 Kolonnen (hier ohne ContentBox)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis, turpis at volutpat fringilla, lectus eros vulputate quam, a viverra elit turpis id leo. Morbi lectus ipsum, aliquam ut interdum quis, faucibus sed urna. Suspendisse vitae lectus ipsum, eget cursus magna. Vivamus id egestas sem.

Reihe im Centerbereich mit 3 Kolonnen (hier ohne ContentBox)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis, turpis at volutpat fringilla, lectus eros vulputate quam, a viverra elit turpis id leo. Etiam molestie convallis nibh eu rutrum. Curabitur sed libero nisl.

Ersatzreihe bei kleinen Smartphones

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis, turpis at volutpat fringilla, lectus eros vulputate quam, a viverra elit turpis id leo.

Reihe im Centerbereich mit 4 Kolonnen (hier ohne ContentBox)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis, turpis at volutpat fringilla, lectus eros vulputate quam, a viverra elit turpis id leo.

Reihe im Centerbereich mit 5 Kolonnen (hier ohne ContentBox)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis, turpis at volutpat fringilla, lectus eros vulputate quam, a viverra elit turpis id leo.

Reihe im Centerbereich mit 6 Kolonnen (hier ohne ContentBox)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis, turpis at volutpat fringilla, lectus eros vulputate quam, a viverra elit turpis id leo.

Reihe CenterAfter 1 bis n (fakultativ, mit 1 Kolonne)

Donec cursus quam nec urna dapibus quis auctor nulla auctor. Pellentesque elementum tortor in mi dictum facilisis. Morbi lectus ipsum, aliquam ut interdum quis, faucibus sed urna. Suspendisse vitae lectus ipsum, eget cursus magna. Vivamus id egestas sem. Etiam molestie convallis nibh eu rutrum. Curabitur sed libero nisl.

Reihen-, Kolonnen- und Klassen-Konzepte

Die Klasse rX-2 bildet den linken und rechten äusseren Rand des eigentlichen Wesite-Inhaltes (ink. der Bereiche Top, Center und Bottom, ohne Outer und Footer). Sie beinhaltet eine feste Breite, minus n*2 Pixel für einen linken und rechten Rand 'n'. Die weiteren Bereiche resp. Klassen sind primär für den Center-Bereich gedacht, können aber auch in den anderen Bereichen Verwendung finden.

Innerhalb von rX-2 befindet sich die Klasse rx-ml. Sie definiert den linken Abstand zum äusseren Rand. Der Abstand zum rechten Rand wird in der übernächsten Ebene (KolContainer) definiert, damit gleiche Abstände zwischen den Kolonnen, aber auch zu den äusseren Rändern möglich sind.

Danach (resp. innerhalb von rx-ml) wird mit Koln-n definiert, wie viele Kolonnen diese Reihe haben soll. Die Breite einer Kolonne wird in % definiert, wodurch sich bei "Standardbreiten" (z.B. 50%, 33%, 25%) auch die Anzahl der Kolonnen einer Reihe ergibt. Ausser bei 100% (nur 1 Kolonne) kann nebst float:left auch eine Mindestbreite in Pixel und evtl. eine reduzierte Schriftgrösse definiert sein.

Innerhalb der Kolonnendefinition wird mit KolContainer (primär) der rechte Abstand zwischen den Kolonnen definiert. Dieser sollte ausserdem gleich wie der linke Abstand bei rx-ml sein, wodurch sich (auch) ein gleichmässiger Abstand zum äusseren Rand ergibt. Bei Bedarf kann ausserdem bereits hier ein Kolonnen-Rahmen und innere Abstände definiert werden, falls dies nicht erst in der nächsten Ebene geschehen soll.

Die letzte "offizielle" Ebene kann mit verschiedenen individuellen Klassen (ContentX, ContentBox, etc.) definiert werden. Innerhalb dieser letzten Ebene können beliebige Inhalte mit beliebigen Definitionen sein.

Musterstruktur (inkl. Over) zum kopieren, mit 2 Kolonnen (hier ohne ContentBox)

...

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

| Impressum | AGB | Login |

Herzlich Willkommen beim Muster-Template für "Responsives Web-Design"

Webmaster: E. Korostensky, PC-Informatik

Herzlich Willkommen
beim Muster-Template für
"Responsives Web-Design"