Sidebar fixieren

[Lora]

Huhu
Ich hab mal wieder ein Problem ;D Ich versuche nämlich meine linke Sidebar zu fixieren. Also hab ich mich in Google auf die Suche begeben und verschiedene Tutorials ausprobiert. Leider sind aber alle davon iwie noch vom alten Design...  Das heißt ich konnte die STichworte nicht in meinem HTML finden :s Die Version von CPL ist veraltet... Hm, gibt es denn dennoch eine andere Möglichkeit um die Sidebar zu fixieren?

GLG Lora

[oliver]

Beim fixieren musst du immer die Position mit angeben, sonst stellt das jeder Browser anders da:

Beispiel:

#sidebar-left-1 {

position: fixed;

top: 40px;

left: 50px;

}

Du kannst das verwenden, aber schau dir dein Blog unbedingt im IE an, ob dir die Sidebar nicht mitten im Post hängt . Wenn ja, gebe ich dir noch einen Korrekturwert.

Gruß Oliver

[Lora]

Huhu hat geklappt :)
Allerdings im IE sehe ich, dass die durchgezogen sind die Hintergründe von den Icons. Das ist bei Mozilla gar nicht so ... Hm... weißt du wie ich das weg bekomme?
Und noch was: Die Icons sind fixiert dann doch zu bunt, also hab ich mir überlegt dass ich die grau mache und dann wenn man mit der Maus drüber fährt, die ihre Farbe ändern, aber fixiert sind, gäbe es da eine Möglichkeit?  Bei CPL hab ich es schon ausprobiert, das Icon ging, aber der Farbwechsel nicht.
Sry, ich forder so oft deine Hilfe an xD Du aknnst mir glauben, ich sitze vorher immer schon sehr lange dran und versuch ne Lösung zu finden, ich komme nicht sofort immer hier her ;D Aber ich bin einfach ein echter HTML Anfänger ;D

GLG Lora

[oliver]

Für den IE suchst du diesen Tag:

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Und schreibst ihn so um:

<meta http-equiv='X-UA-Compatible' content='IE=8, IE=9, IE=10' />

Dann schau's dir noch mal an, jetzt besser? Der IE ist kein Browser sondern Schrott - wenn der Blog darin nicht so ausschaut wie in den anderen Browsern, würde ich mir an deiner Stelle keine großen Gedanken machen.

Ich glaube dir das du eine Lösung suchst - aber wenn du das mit Google suchst, kommst du halt immer auf so halb funktionierende Tuts wie das CPL-Tut mit der Sidebar, das für 'links' nicht funktioniert. Woher sollst du es also wissen? Ist schon okay wenn du fragst ...

LG Oliver

[Lora]

Vielen Dank :D
Ja, das ist echt so und ich probier die auch alle aus bevor ich hier frage :) Aber letzendlich weißt immer nur du die Lösung :)  und wenns nicht sofort funktioniert beim ausprobieren änder ich das auch nochmal, aber ist einfach doof :(  Manchmal ist es auch so missverständlich erklärt, was man schon in den Kommentaren lesen kann ;D
Okay hab's eingesetzt-funktioniert super und schaut sogar im IE gut aus. Ich nutze den nie der ist total blöd gemacht -.-
Gibts noch eine Lösung für den Farbwechsel?

GLG Lora

[oliver]

Hi,

Gibts noch eine Lösung für den Farbwechsel?

jetzt stehe ich auf dem Schlauch, was meinst du?

.oliver 

[Lora]

Ähm...
was ich meine ist, du siehst ja bei meinem Blog (der gerade in Bearbeitung ist) links die Symbole? Die sind bunt, also die mach ich gleich noch grau, weil sie fixiert zu bunt sind und ablenken. Meine Frage ist wie ich es hinbekomme, wenn cih mit meiner Maus über einen dieser Symbole fahre, dass die von grau zu bunt werden :)
Weißt du was ich meine?

GLG Lora| www.photoostuff.blogspot.com

[oliver]

Hi,

das geht entweder fummelig und aufwendige mit Hover-Spirits (kannst ja mal danach googeln) ... oder einfach und simpel mit CSS-Filter:

#sidebar-left-1 img {

-webkit-filter: grayscale(100%);

   -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

     -o-filter: grayscale(100%);

        filter: grayscale(100%);

-webkit-transition: all 1s; 

   -moz-transition: all 1s; 

    -ms-transition: all 1s; 

     -o-transition: all 1s; 

         transition:all 1s;

}

#sidebar-left-1 img:hover {

-webkit-filter: grayscale(0%);

   -moz-filter: grayscale(0%);

    -ms-filter: grayscale(0%);

     -o-filter: grayscale(0%);

        filter: grayscale(0%);

-webkit-transition: all 1s; 

   -moz-transition: all 1s; 

    -ms-transition: all 1s; 

     -o-transition: all 1s; 

         transition:all 1s;

}

Nachteil: 

Das funktioniert z.Z. nur in Chrome, Safari6.0, IE10 und Android Browser ... d.h. davon haben vielleicht 30% deiner Besucher was. CSS-Filter werden in FF und Opera in die nächsten Versionen integriert, das dauert nur noch a bisserl ... aber als Easter Egg für Chrome Benützer finde ich das okay und in paar Wochen (na ja, eher drei Monate oder so) funktioniert das dann für alle ...

Gruß Oliver

[Lora]

Dankeschön :)
Hm, ich weiß nicht ob ich das richtige rüber gebracht habe. Also, ich hab jetzt ne Seite gefunden wo das so ist :) Als Beispiel:http://365marmeladenglasmomente.blogspot.de/ Da, die Social media buttons werden bunt, wenn man mit der Maus drüber fährt :) Und das funktioniert auch bei meinem Browser (Mozilla Firefox)

GLG Lora

[oliver]

Klar ... old Style geht das mit GIMP und Photos entsättigen, auf Picasa hochladen, über den Hover verschieben/einblenden und und und ... oder du kannst dir das alles sparen und schreibst ein paar Zeilen CSS. 

Ich bin ein fauler Mensch - wenn ich was mit CSS machen kann, warum dann stundenlang mit Photos arbeiten? Probier's aus, auf Chrome/Safari sieht es besser aus als in deinem Beispiel (auf Firefox siehst du's halt noch nicht). Das nicht alles in allen Browsern gleich ausschaut, ist aber inzwischen normal.

Wenn du aber trotzdem was mit Bildern machen willst - ich denke, da gibt's was auf CPL dazu ... oder wenn dich die Methode mit Bildern interessiert, warum fragst du nicht die Bloggerin von deinem Beispiel, ob sie ein Tut drüber schreibt? Ich denke das macht sie gerne!

LG Oliver

[Lora]

Huhu :)
alles klar, also das bearbeiten ist ja kein Problem. Ich kann dir mal zeigen was ich habe:
<a href="http://www.blogger.com/follow-blog.g?blogID= 5471011424038711962"> LINK ZU MEINEM BLOGLOVIN
<img src="http://icons.iconarchive.com/icons/designbolts/pink-girly-social/48/Hover-Blogger-icon.png"/></a> LINK ZUM BILD WENN MAN MIT DER MAUS DRAUF IST
https://lh6.googleusercontent.com/-A66pnuSaIFk/UHnnCqPiuOI/AAAAAAAAB7g/9zHHUDk_1bs/s48/Plus-icon.png LINK WIE ER OHNE HOVER SEIN SOLL

Also ich hab die drei Sachen alle schon fertig und probiere die ganze Zeit mit verschiedenen Tuts von CPL und Co den gewünschten Effekt zu erreichen. Hat aber nicht geklappt :(

GLG Lora

[Lora]

Ich hab's hinbekommen :D
<img src="https://lh6.googleusercontent.com/-A66pnuSaIFk/UHnnCqPiuOI/AAAAAAAAB7g/9zHHUDk_1bs/s48/Plus-icon.png" alt="" onmouseout=
"javascript:this.src='https://lh6.googleusercontent.com/-A66pnuSaIFk/UHnnCqPiuOI/AAAAAAAAB7g/9zHHUDk_1bs/s48/Plus-icon.png';" onmouseover=
"javascript:this.src='http://icons.iconarchive.com/icons/gakuseisean/ivista/48/Plus-icon.png';" />
Das ist der Code, der einzige Haken (wie könnte es nicht anders sein!) man konnte bei dem Tutorial keine URL einfügen, dass es auf eine andere Seite verlinkt, gibt es dafür auch eine Lösung :)?

GLG Lora

[Lora]

Ich habs jetzt selber hinbekommen, Danke :D

LG Lora

[oliver]

Super - danke für den Feedback!

LG Oliver

[Lora]

Gern ;)
Danke für die Hilfe :)
Aber ich hab schon wieder eine Frage :o xD
Also, ich habe auf meinem Blog jetzt die Sidebar rechts und würde die gerne fixieren, die Umfrage mache ich noch nach unten ;) Die geht ja bloß noch 2 Tage ;)
Und noch was, gibt es ieinen CSS Coide oder so, damit meine Follower angezeigt werden in Worten, wie z.B . Die Seite hat blablabla wundervolle Follower als TExt ohne dass man dort das Lesergadget hat :)?

GLG Lora