Es ist zum Verzweifeln ?

Der Hovereffekt bei den Social-Buttons hängt viel zu tief.
Kann mir Jemand sagen weshalb ?

Link: http://neu.repricing.de/de/ - im Footer rechts

Ich suche mir hier einen Wolf :)
Gruß Dirk

Es liegt daran das dein a kein Block sondern ein Inlinelement ist (siehe Anhang). Somit ist das Element zu klein.

Code:

---

display:block;
width:50px;
height:50px;

---

Sollte das lösen

Außerdem solltest du in das a keine Grafik legen sondern generell dem a eine Hintergrundgrafik per CSS zuweisen. Bei :hover dann eine andere Hintergrundgrafik. So wie es aktuell ist, würde man ein korrekt platziertes Hintergrundbild nicht sehen weil es ja hinter dem img Tag liegen würde.

Irgendwie verstehe ich das jetzt nicht:

Code:

---

<div id="social">
<div class="foho1">
<a  href="https://plus.google.com/+RepricingDe/posts"><img src="/files/repricing/images/social/google_sozial.png" border="0" alt="Google+"></a>
</div>
<div class="foho2">
<a  href="https://www.facebook.com/Repricing"><img src="/files/repricing/images/social/facebook_social.png" border="0" alt="Facebook"></a>
</div>
<div class="foho3">
<a  href="https://twitter.com/repricing"><img src="/files/repricing/images/social/twitter_sozial.png" border="0" alt="Twitter"></a>
</div>
</div>

---

CSS zB. so:

Code:

---

#social .foho1:hover {
    float:left;
    background-image:url("files/repricing/images/social/google_sozial_hover.png");
    display:block;
    width:50px;
    height:50px;
}

---

Code:

---

#social {
    float:right;
    margin-top:25px;
}

---

Bekomme es aber jetzt nicht nebeneinander ?

Ich würde es wie folgt machen

HTML-Code:

---

a.socialbutton{
    float:left;
    display:block;
  width:50px;
  height:50px;
  text-indent:-3000px;
}

a.foho1{
    background:url("files/repricing/images/social/facebook_sozial.png") center center no-repeat;
}
a.foho1:hover{
    background:url("files/repricing/images/social/facebook_sozial_hover.png") center center no-repeat;
}
....

---

HTML

HTML-Code:

---

<a class="socialbutton foho1" href="#">Facebook</a>
<a class="socialbutton foho2" href="#">Google+</a>
...

---

Eine noch saubere Lösung wäre es mit Spritegrafiken zu arbeiten und diese bei Hover nur per background-position zu verschieben. Dann hast du beim ersten hovern kein flackern, weil er das Bild erst noch laden muss. Mit Sprites ist es dann schon geladen.