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 Eigenschaftposition: 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!
