CSS Sprites

Hallo!
Diesmal habe ich was kompliziertes. Ich weiß ja wer hier als erstes antwortet, deswegen sollte es schnell gehen
Also ich würde gerne CCS Sprites für die Buttons benutzen, nur leider sind die Infos bei Google schlecht geeignet, und hier gibts noch keinen Beitrag darüber, sodass andere Buttons ganz weg sind

Also ich weiß, dass für CSS Sprites die Eigenschaften background-image und background-position benötigt werden.
Beispiel:
#i_icon_mini_message {
}

#i_icon_mini_message:hover {
}

Ich habe gelesen, das man auch mit der Pseudoklasse :active arbeiten kann. Also ich muss ja das normale Bild und das hover Bild einfügen, aber wie mache ich das, dass dann beim cursorn das 2. Bild erscheint?
Ich dachte an sowas:

Code:


#i_icon_mini_message {
background-image:url ("http://imageshack.us/a/img43/2373/button10upd.png");
display: block;
height: 26px;
width: 115px;
}

#i_icon_mini_message:hover {
background-image: http://imageshack.us/a/img842/2307/button10over.png;
background-position: -115px -26px;
}

Aber ganz klappen tut das nicht...

Danke im Voraus!

Hallo,

ich würde vorschlagen, du recherchierst dazu nochmal genau, siehst dir Beispiele an und verwendest ggf. einen der Online-Generatoren für CSS-Sprites.
Dazu gibt es sehr viele Informationsquellen und wenn du wirklich CSS-Sprites verwenden möchtest, solltest du dir schon die Zeit nehmen, dich genauer damit zu beschäftigen.

Solltest du es nicht hinbekommen, dann sieh dir v.a. die Generatoren an, die es dafür sogar schon gibt. Das sollte es dir erleichtern.

Liebe Grüße
Günther

Ja diese Generatoren habe ich auch schon gefunden, nur sind dann ca. 6 Buttons verschwunden...Vielleicht solltet ihr hier mal so einen Hilfsbeitrag für euer Lexikon posten

Blade@CodeLabs schrieb:Vielleicht solltet ihr hier mal so einen Hilfsbeitrag für euer Lexikon posten

Erstens gibt es dazu sehr viele, verständliche und ausführliche Tutorials und Erklärungen im Internet, wenn man ein wenig danach sucht.
Zweitens sind CSS-Sprites keine Grundfunktionen bzw. Umsetzungen, die für viele User wichtig sind. Erst vor wenigen Jahren ist diese Idee überhaupt erstmals aufgekommen und wird seither teilweise als kreative Lösung zur Ladezeitoptimierung verwendet. Dazu ist allerdings ein gutes CSS-Grundverständnis nötig. Es hätte wenig Sinn, das hier zu erklären, weil einerseits wenige User davon betroffen sind und es andererseits bereits zahlreiche gute Erklärungen gibt.

Ich denke, wenn du dir dafür etwas Zeit nimmst und dich in die Materie einarbeitest, bekommst du das auch hin.
Andernfalls sind CSS-Sprites nicht zwingend nötig, da es viele altbewährte Alternativen dazu gibt, die wir dir auch schon einmal genannt haben.

Mhh ja klar, hovern bekomme ich auch wohl hin, ist leider nicht perfekt aber ich nehme das solange ich noch keinen passenden CSS Sprite code habe. Ich suche auch schon seit Wochen nach was passendem. Ich weiß leider auch nicht genau wonach ich suchen soll, es gibt sooo viele, nur sind nicht alle davon gut...

http://bueltge.de/css-sprites-einfach-erklaert/675/

Können wir dieses Thema damit als erledigt sehen?

Mhh den hab ich auch schon benutz, dann guck ich da nochmal rein
Eins noch: könntest du mir vielleicht sagen ob ich bei CSS Sprites die hover Klasse trotzdem brauche?

Dann kannst du das Thema schließen, und danke mal wieder vielmals
Schönes Wochenende noch!

Nur benutzen ist noch zu wenig. Du solltest dir auch die gesamte Erklärung genau durchlesen und dir die Beispielgrafik ansehen.

Und ja, wie du am Beispielcode dort siehst, wird das Hintergrundbild zuerst für das Element im Normalzustand festgelegt und anschließend wird bestimmt, dass der Hintergrund sich beim Hovern verschiebt:

#image-link {
width: 60px;
height: 60px;
text-decoration: none;
display: block;
background: url('images/fb-sprite.png') 0 0;
}
#image-link:hover, #image-link:active {
background-position: 60px 0;
}

Genau darum geht es dir ja.

Dann wünsche ich dir auch ein schönes Wochenende und viel Erfolg.

-closed-