Harlekin: Links mit Sprites

Hallo,

ich habe mir gedanken über die Geschwindigkeit unserer Homepage gemacht. Jetzt geht es als nächstes an die Sprites. Das zusammenbauen hat einwandfrei geklappt.

Ich kann die Grafiken auch in Lists oder DIVS einbinden. Aber die Grafiken als Links zu gebrauchen geht mir noch nicht von der Hand. Vielleicht liegt es auch an meiner extrem geringen Kenntnis von CSS.

Folgendes habe ich bisher gemacht:
#1 Sprite erstellt

.flag {  
background: url(sprite.png) no-repeat top left;  
}

#2 Position bestimmt
#sprite-facebook{ background-position: 0 -45px; width: 62px; height: 22px; }
#3 Im HTML definiert
<a href="facebook.com" ><div class="flag" id="sprite-facebook"></div></a>

Mein Problem ich kann nicht auf das Image klicken!? Was habe ich falsch gemacht?

  1. Om nah hoo pez nyeetz, Harlekin!

    Versuch bitte, keine zusätzlichen Elemente zu verwenden, zudem darf a in HTML<5 keine Blockelemente enthalten. Für die Struktur des Dokumentes und seine Semantik empfehle ich die Artikelserie aus unserem Blog, zur Problemstellung selbst guckst du da.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Halle und Halleffekt.

  2. servus Harlekin,

    <a href="facebook.com" ><div class="flag" id="sprite-facebook"></div></a>

    Ein a-Element kann auch Klassen und eine ID besitzen. Es kann in der Höhe und Breite angepasst werden, wenn es <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=entsprechende Eigenschaften> besitzt. Das div ist, wie Matthias schon sagte, unnötig und sogar falsch.

    henman

    --
    "Sir, we are surrounded!" - "Excellent, we can attack in any direction!"