Zum Inhalt springen

    Wie funktionieren die volle Breite Container?

    1. der Container bricht aus der normalen Seitenbreite aus und nutzt die gesamte Breite des Browserfensters
    2. der Container bekommt eine Hintergrundfarbe
    3. über der Hintergrundfarbe wird das Hintergrundbild mit der gewählten Deckkraft ausgegeben
      (dadurch ist sichergestellt, dass auch bei nicht geladener bzw. nicht ausgewählter Grafik der Text i.d.R. lesbar bleibt)

    Wenn Elementen innerhalb der volle Breite-Container der Rahmen "invertiert" gegeben wird, dann wird dadurch nur die Textfarbe (Vordergrundfarbe) beeinflusst, damit der Hintergrund des Containers erhalten/sichtbar bleibt.

    Sonderfall: Layout-Box, siehe hier Layout Box + Rahmen invertiert.

    Warnung: In den seltensten Fällen wird das Ergebnis barrierefrei sein!

    Container (Hintergrundfarbe: hell)

    • Hintergrundfarbe: hell
    • kein Hintergrundbild
    • kein Rahmen invertiert

    Container (ohne alles)

    • keine Hintergrundfarbe (hier identisch zu Hintergrundfarbe: weiß)
    • kein Hintergrundbild
    • kein Rahmen invertiert

    Container (Hintergrundfarbe: schwarz)

    • Hintergrundfarbe: schwarz
    • kein Hintergrundbild
    • kein Rahmen invertiert

    Container (Rahmen: invertiert)

    • keine Hintergrundfarbe
    • keine Hintergrundgrafik
    • mit Rahmen invertiert

    Container (mit Hintergrundbild)

    • keine Hintergrundfarbe
    • mit Hintergrundgrafik (100%)
    • kein Rahmen invertiert

    Container (mit Hintergrundbild, Rahmen:invertiert)

    • keine Hintergrundfarbe
    • mit Hintergrundgrafik
    • mit Rahmen invertiert

    Container (mit Hintergrundfarbe: weiß, Hintergrundbild mit Deckkraft 50%)

    • mit Hintergrundfarbe
    • mit Hintergrundbild
    • kein Rahmen invertiert

    Container (mit Hintergrundfarbe weiß, Hintergrundbild mit Deckkraft 50%, Rahmen: invertiert)

    • mit Hintergrundfarbe
    • mit Hintergrundgrafik
    • mit Rahmen invertiert (auf dem Container)

    Container (mit Hintergrundbild, mit Overlay: schwarz 50%)

    • mit Hintergrundgrafik
    • mit Overlay
    • kein Rahmen invertiert

    Container (mit Hintergrundfarbe schwarz, Hintergrundbild mit Deckkraft 50%, Rahmen: invertiert)

    • mit Hintergrundgrafik
    • mit Overlay
    • mit Rahmen invertiert (auf dem Container)

    Layout Box

    • der Container hat Rahmen: invertiert
    • dieses Element hat Layout: Box

    => Layout Box überschreibt die durch den Rahmen gesetzten Farben.

    Primary Secondary Link

    Layout Box + Rahmen invertiert

    • der Container hat Rahmen: invertiert
    • dieses Element hat Layout: Box und Rahmen: invertiert

    => Rahmen invertiert überschreibt die von Layout: Box gesetzten Farben.

    Primary Secondary Link

    Normaler Inhalt

    Dieses Inhaltselement hat kein Layout und keinen Rahmen gesetzt.

    => Dieser Inhalt ist invertiert, da im Container der Rahmen: invertiert gesetzt ist.

    Primary Secondary Link

    Inhalt in voller Breite

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas, justo at luctus scelerisque, massa leo rutrum nisi, quis gravida ipsum urna id magna. Sed suscipit mauris orci. Donec porta lectus urna, ut bibendum velit efficitur quis. Suspendisse diam enim, vulputate sit amet tristique ut, congue at metus. Cras orci mauris, consequat vel rutrum vitae, convallis eget purus. Curabitur sagittis ligula sed metus vestibulum pulvinar. Nulla rutrum tincidunt eros eget faucibus. Mauris non purus nunc. Cras nec nibh non lorem tincidunt lobortis non eu leo. Suspendisse fringilla rutrum diam eu tempus. Quisque consequat nunc id nisi maximus, vel auctor purus dignissim.

    Vestibulum id imperdiet velit. Duis sit amet sollicitudin eros. Integer ut purus quam. Sed id hendrerit est. Vestibulum ipsum odio, eleifend at aliquam quis, iaculis at mauris. Phasellus eget pharetra velit, sit amet pellentesque metus. Etiam vel ultrices erat, a hendrerit metus.