5202

ein Blog über technische Fragen zu Blogger

Blogger: Linke Sidebar fixieren

von
Zu kaum etwas existieren so viele schlechte Tutorials wie zum Thema 'Sidebar fixieren' und wenn ich fünf Cent von jedem Blogger bekommen würde, der sich dabei sein Layout zerstört hat, hätte ich ein Haus am Meer :).

Ernsthaft: Ich erkläre euch heute, wie ihr eure linke Sidebar 'richtig' fixieren könnt, dass die danach nicht irgendwo mitten im Blog rumhängt - sozusagen die ultimative Lösung!

Fixierte HTML-Elemente

Um zu verstehen, worin eigentlich das Problem liegt, eine kurze Erklärung zur CSS Eigenschaft position: fixed.

Eine Positionierung mit position: fixed verhält sich fast genau so wie position: absolute, nur mit dem Unterschied, das ein 'Absolut' positioniertes Element sich auf einen Bezugspunkt innerhalb der Seite, ein 'Fixiertes' Element dagegen auf den Viewpoint des Browsers bezieht.

Das klingt sehr abstrakt, hat aber dramatische Auswirkungen - wer mal ein 'klassisches' Tutorial zum Thema 'fixierte Sidebar' gemacht hat, wird das vielleicht kennen, dass er seine Sidebar mitten im Blog wiedergefunden hat. Warum klappt das in einem Browser und im anderen nicht? Weil jeder Browser den Viewpoint für ein fixiertes Element anders definiert.

Das zweite Problem ist, dass das umgebende Element für ein 'Fixiertes' Element immer das Browserfenster ist. Punkt. Ihr könnt zwar mit top, left die linke Sidebar irgendwie auf der linken Seite verankern, das schaut dann aber nur für eine bestimmte Browsergröße gut aus .. macht ihr den Browser größer oder kleiner, läuft die Sidebar aus dem Blog 'raus' oder 'rein'.

Die Lösung

Hier die vollständige Lösung von dem Problem.

A) Ihr fixiert die linke Sidebar mit position: fixed.
#sidebar-left-1 {
  position: fixed;
}
B) Ihr müsst der Sidebar eine definierte Breite geben, sonst laufen euch Texte nach rechts 'aus'.
#sidebar-left-1 {
  position: fixed;
  width: 200px
}
C) Ihr positioniert die Sidebar jetzt 'relativ' zu 50% Breite des Browserfensters:
#sidebar-left-1 {
  position: fixed;
  width: 200px;
  left: 50%
}
D) Mit margin-left passt ihr die Sidebar genau in den Blog ein - die Sidebar bleibt jetzt auf dieser Position unabhängig von der Größe des Browserfensters:
#sidebar-left-1 {
  position: fixed;
  width: 200px;
  left: 50%;
  margin-left: -430px
}
E) Als letztes passt ihr noch den Abstand nach oben an:
#sidebar-left-1 {
  position: fixed;
  width: 200px;
  left: 50%;
  margin-left: -430px;
  top: 100px
}
Der Code kommt in den Vorlagen Designer > Eigene CSS - drückt hinter der letzten geschweiften Klammer } auf die Taste 'Eingabe' und ihr seht die Auswirkung eurer Änderung - wenn es passt, könnt ihr mit 'Auf Blog anwenden' eure Änderung sichern.

That's the way it is - funktioniert in allen neuen Blogger-Layouts!

Fragen?

Wenn's nicht klappt fragt nach!