Andremio
Avatar Andremio
Themenersteller
Fortgeschrittener (87 Beiträge)

CSS Sprites Bild wird doppelt übereinander angezeigt

am 23.04.2015, 23:33 Uhr eröffnete Andremio folgenden Thread
OnPage Optimierung    1474 mal gelesen    2 Antwort(en).

Sehr geehrte SEO-Profis,

ich habe da wieder einen Leckerbissen in Form von einer speziellen Frage.

Für meine Social-Buttons habe ich ein CSS-Sprite erstellt und die Styles entsprechend angepasst. Funktioniert wunderbar. Es gibt nur ein Problem.

Es erscheint zum Einen das Bild von dem jeweiligen Social-Button, wie es sein soll, aber auch noch der komplette Sprite obendrauf, also übereinander. Das passiert, wenn ich folgenden Code nutze:



Nun habe ich ein wenig geknobelt, wie ich das weg bekomme. No-repeat hat nicht geholfen. Also habe ich vorübergehend einen invaliden Code benutzt, um das Problem zu lösen. Mit folgendem Code funktioniert alles Perfekt:

https://facebook.com

Das Problem ist nur, das der Code nicht valide ist, da man "src" nicht im Link nutzen darf. Kann mir jemand die Lösung aufzeigen, wie ich das Problem in den Griff bekommen kann, ohne invaliden Code benutzen zu müssen?

Ich bin gespannt und freue mich auf Eure Antworten!

Andremio

P.S.: Zur Vereinfachung habe ich die id´s weggelassen, nicht dass sich jemand wundert


"Unser Geld bedingt den Kapitalismus, den Zins, die Massenarmut, die Revolte und schließlich den Bürgerkrieg, der zur Barbarei zurückführt. Wer es vorzieht seinen eigenen Kopf etwas anzustrengen statt fremde Köpfe einzuschlagen, der studiere das Geld

matthes
Avatar matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
am 23.04.2015, 23:51 Uhr schrieb matthes

Die IDs wären aber ganz wichtig gewesen.
Ich nehme an, der Anchor-Tag hatte eine ID und dieser ID war im CSS das Sprite zugeordnet?

Andremio schrieb:


Wenn es so ist wie oben angenommen, liegt es daran, dass Du ausdrücklich sagst, es soll doppelt angezeigt werden.
Einmal über die vermutete ID per CSS und dann über den img-Tag, der per definitionem schon die ganze Grafik lädt.
Üblich wäre es, einen Platzhalter zu verwenden (transparente Grafik) oder dem anchor-Tag über display:block und entsprechende Höhe und Breite eine Fläche zu verleihen.

Andremio schrieb:
https://facebook.com


Wie Du sagst, ist der Code Unsinn. Allerdings ist er auch die Lösung zu Deinem Problem. Nur noch das src-Attribut weglassen, dann wäre er valide und sollte auch funktionieren.


PS:

Andremio schrieb:
Sehr geehrte SEO-Profis, ich habe da wieder einen Leckerbissen in Form von einer speziellen Frage.


Weder braucht es dafür SEO-Profis noch ist es ein Leckerbissen. Dafür braucht es nur HTML- und CSS-Kenntnisse und etwas Logik. Dir fehlt da eben noch ein wenig das Verständnis für den Code. Eigentlich ist das eine Kleinigkeit.
Was tut das img-Tag? Es lädt eine Grafik. Wenn Du ein Foto per img darstellst, wie wird es angezeigt? Komplett.
Warum sollte es für Spritegrafiken anders sein? Weder Browser noch img-Tag wissen, dass die Grafik ein Sprite ist.


Make Seitenreport great again!

Andremio
Avatar Andremio
Fortgeschrittener (87 Beiträge)
am 24.04.2015, 12:08 Uhr schrieb Andremio

Matthes schrieb:

Weder braucht es dafür SEO-Profis noch ist es ein Leckerbissen. Dafür braucht es nur HTML- und CSS-Kenntnisse und etwas Logik. Dir fehlt da eben noch ein wenig das Verständnis für den Code. Eigentlich ist das eine Kleinigkeit.
Was tut das img-Tag? Es lädt eine Grafik. Wenn Du ein Foto per img darstellst, wie wird es angezeigt? Komplett.
Warum sollte es für Spritegrafiken anders sein? Weder Browser noch img-Tag wissen, dass die Grafik ein Sprite ist.



Hallo Matthes,

herzlichen Dank für Deine erfrischend klaren Worte und Deine kompetente Hilfe!

Ich bin mir absolut im klaren darüber gewesen, dass meine Betriebsblindheit das Problem hervorgerufen hat. Die Lösung ist meistens sehr einfach, aber man sieht sie halt manchmal einfach nicht.

Vielen Dank!

Andremio


"Unser Geld bedingt den Kapitalismus, den Zins, die Massenarmut, die Revolte und schließlich den Bürgerkrieg, der zur Barbarei zurückführt. Wer es vorzieht seinen eigenen Kopf etwas anzustrengen statt fremde Köpfe einzuschlagen, der studiere das Geld

  • 1


« zurück zu: OnPage Optimierung

Das Seitenreport Forum hat aktuell 5274 Themen und 36108 Beiträge.
Insgesamt sind 48357 Mitglieder registriert.