Auslaufende Elemente farbig hinterlegen

Wir spielen ja gerne mal mit Elementen, die links und rechts aus dem Browserrand farbig auslaufen sollen.

Hier erkläre ich euch wie das geht!

Ihr sucht euch mit Firebug die ID eures Elements, zum Beispiel einem Spaltenelement, und gebt ihm auf beiden Seiten einen sehr hohen Innenabstand. Zur gleichen Zeit sagt ihr dem Element, dass es den gleich Wert (bloß in Negativ) Außenabstand bekommt.

 

Somit wird das Element erst aus dem Browserrand geschoben und durch das negative Margin wieder in unsere Browsermitte gesetzt.


Und dann könnt ihr eurem Element natürlich jede beliebige Farbe oder ein Hintergrundbild geben.

 

Ihr müsst aber aufpassen, dass ihr dem Body oder dem Wrapper (je nach Jimdo-Tamplate) sagt, er soll bitte alles was rechts und links über den Browserrand hinaus geht, nicht zeigt. Sodass wir später keinen horizontalen Scrollbalken haben.

Das macht ihr mit overflow-x:hidden.

 
body {
    overflow-x:hidden;
}

#farbiges_element {
    background: #eee;
    padding: 0 500%;
    margin: 0 -500%;
}