Layouts und Rahmen
Über die Angaben Layout und Rahmen im Reiter Erscheinungsbild kann die Darstellung von Inhaltselementen angepasst werden. Da gehören u.a. die Breite, die ein Element einnimmt, seine Hintergrundfarbe, Animationen usw.
Wichtig:
- Die Einstellung 100% Breite ist eigentlich für 1Spaltige-Container-Elemente sinnvoll. Darüber gibt man dem Container die volle Breite, meist kombiniert mit einer Hintergrundfarbe und innerhalb dieses Containers werden dann Elemente mit fester Breite angelegt. Damit kann man farbige Contentbereiche schaffen, deren Hintergrund die komplette Browserbreite ausfüllt.
- Aktuell stehen für jeden Rahmentyp 3 verschiedene Hintergrundfarben zur Verfügung. Die Farben selbst werden über die Settings definiert. Wenn man eine Hintergrundfarbe definiert, die es notwendig macht, dass z.B. Headlines und Texte, darauf angezeigt werden sollen, farblich angepasst werden müssen, wird diese Anpassung von Hand erledigt: Beispiel wäre ein Rahmen mit dunkler Hintergrundfarbe, auf der weißer Text angezeigt werden soll. Die dunkle Hintergrundfarbe wird in diesem Fall über die Settings angelegt, der weiße Text von Hand per CSS.
- Wird kein Rahmen ausgewählt, wird als Standard eine feste Breite ohne Hinterundfarbe ausgewählt.
Rahmen: 100% Breite
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Rahmen: 100% Breite, Hintergrundfarbe 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Rahmen: 100% Breite, Hintergrundfarbe 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Rahmen: 100% Breite, Hintergrundfarbe 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Rahmen: 1280 Pixel Breite
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Rahmen: 1280 Pixel Breite, Hintergrundfarbe 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Rahmen: 1280 Pixel Breite, Hintergrundfarbe 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Rahmen: 1280 Pixel Breite, Hintergrundfarbe 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Rahmen mit "mehr Innenabstand"
Bei Rahmen mit “mehr Innenabstand” gibt es deutlich größere Ränder oben und unten.
SOLLEN WIR HIER NOCH WEITERE BEISPIELE ERGÄNZEN???
Rahmen: 1280 Pixel Breite, Hintergrundfarbe 1, mehr Innenabstand
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Rahmen mit Padding
Anders als bei den Rahmen mit “mehr Innenabstand” gibt es bei den Rahmen “mit Padding” nicht nur oben und unten einen Abstand zum Rand, sondern auch links und rechts.
SOLLEN WIR HIER NOCH WEITERE BEISPIELE ERGÄNZEN???
Rahmen: 1280 Pixel Breite, Hintergrundfarbe 1, mehr Innenabstand
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Anwendungsbeispiele
Hier ein paar Beispiele, die mit der Zeit noch ergänzt werden.
Headline
Hier wurde ein 1spaltiger Container angelegt, auf die der Rahmen 100% Breite, Hintergrundfarbe 3 angewendet wurde. Darin befindet sich ein Text-Medien-Element mit fester Breite. Das sorgt dafür, dass der Hintergrund dieses Elements bis an die Ränder des Browserfensters reicht, der Inhalt aber eine feste und damit “kontrollierbare” Breite hat.