Hallo,
Ich habe einen socialmedia-button in eine webseite eingebaut.
Er ist halb unter dem hauptdiv versteckt und soll beim hover ausfahren.
mein grundgedanke war, dass ich mit hover den top-wert der div positionierung übergehe. funktioniert aber leider nicht so recht.
jemand bitte rat?
hier der css-code
[CODE]#facebook {
position:absolute;
left:670px;
top:5px;
height:32px;
width:32px;
border:none;
background-image:url(…/img/facebook.png);
}
.facebook:a{height:32px;width:32px;display:block;}
.facebook:link{height:32px;width:32px;display:block;}
.facebook:visited{height:32px;width:32px;display:block;}
.facebook:active{height:32px;width:32px;display:block;}
.facebook:hover{height:32px;width:32px;display:block;margin-top:-4px;}[/CODE]
Timmer
23. Juli 2012 um 14:10
2
Dein Grundgedanke war auch völlig richtig, allerdings ist die Umsetzung falsch.
Da du keinen HTML Code angegeben hast, kann ich nur vermuten:
#facebook { position:absolute; left:670px; top:5px; height:32px; width:32px; border:none; background-image:url(../img/facebook.png); }
#facebook:hover { top:1px; }
a.facebook {height:32px;width:32px;display:block;}
a.facebook:link {height:32px;width:32px;display:block;}
a.facebook:visited {height:32px;width:32px;display:block;}
a.facebook:active {height:32px;width:32px;display:block;}
Allerdings könnte man dir mit etwas HTML Code oder einem Link besser weiterhelfen
prm
23. Juli 2012 um 15:10
3
Du kannst den „Ausfahr-Effekt“ auch mit unterschiedlichen background-positions lösen, was ich den absoluten Positionierungen vorziehen würde:
Navigation mit ausfahrbaren Registern
Timmer
23. Juli 2012 um 15:21
4
Das Problem ist, dass er einen Social Media Button eingebaut hat. Wenn ich das richtig verstanden habe, nutzt er also einen fertigen Button von Facebook o.ä., welcher kein Bild ist. Falls nicht, sind beide Methoden möglich, aber deine ist eleganter, da das eigentliche Element nicht springt^^
definitiv der schönere Weg. Für den modernen Browser könnte man noch mit CSS-Transitions arbeiten, damits nicht allzu „sprunghaft“ wirkt.
@timmer : danke, perfekt
naja der „button“ ist ein bild (einfach das logo im png-format)
aber er macht jetzt das was er soll
thx nochmal für die hilfe leute