Fixierte Content-Boxen – nur mit CSS!

Wichtige Inhalte müssen ins Auge springen. Vor allem kurzfristige, vorübergehende Mitteilungen wie Messeteilnahmen, Jobangebote oder Urlaubszeiten dürfen nicht im übrigen Content einer Website untergehen. Eine Möglichkeit, wichtige Meldungen prominent zu platzieren, ohne dabei auf nervige Popups zurückgreifen zu müssen, sind fixierte Boxen am Rand einer Website.

screenshot der website

Die Website der interkulturellen Personalberatung von Emine Decker wurde mit einer am Rand fixierten Contentbox ausgestattet.

Screenshot: http://ami.responsivedesign.is/

https://emine-decker.de

WordPress Widgets fixiert platzieren

Im konkreten Fall bat mich eine Kundin darum, eine Messeteilnahme und ein Bewertungstool möglichst prominent auf ihrer Website zu platzieren, also möglichst nicht im Footer. Ihr Wunsch war vielmehr, dass die beiden Inhalte am rechten Rand fixiert sein sollten.

Die Website der Kundin ist in WordPress erstellt. Um die Administration der Inhalte weiterhin möglichst laiengerecht und stressfrei zu gewährleisten, habe ich einem „normalen“ Footer-Widget zunächst mithilfe des Plugins Widget CSS Classes eine CSS-Klasse gegeben; in diesem Fall .floating_widget.

Als nächstes habe ich die Inhalte – zwei Banner – in das bewusste Footer-Widget eingefügt und im CSS Folgendes deklariert:

.floating_widget {
position: fixed;
top: 40%;
right: 0;
width: 200px;
background: #fff;
padding: 3px;
text-align: center;
}

*schwupps* – floatete das Widget am rechten Rand!

Finetuning

Damit sich das Widget gegebenenfalls besser vom Rest der Website abhebt, bietet sich beispielsweise ein Schatten an:

.shadow {
-webkit-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.25);
box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.25);
}

Auch kann es auf kleineren Displays sehr lästig werden, permanent das gut gemeinte Widget über dem Content zu haben, den man ja eigentlich lesen möchte. Daher empfehle ich, es per Media Query ab einer bestimmten Displaygröße dann doch in den Footer zu verbannen bzw. es erst ab einer bestimmten Größe dort herauszuholen:

@media screen and (min-width: 980px) {
.floating_widget {
position: fixed;
top: 40%;

… etc.pp.
}

Königsklasse ist es natürlich, es mit einem kleinen Link per jQuery ein- und ausklappbar zu machen – aber das ist eine andere Geschichte.