Css Sprite - Brauche Hilfe
Redaktionelle Einordnung
Diese archivierte Diskussion behandelt Css Sprite - Brauche Hilfe aus Sicht der Rubrik HTML5 & CSS.
Die Diskussion bleibt als Archiv nutzbar. Für die aktuelle Bewertung empfehlen sich ergänzend neuere Artikel, Tools oder eine konkrete Analyse.
Sinnvoll nutzbar bleibt der Thread vor allem als historischer Kontext, für typische Fragestellungen und zur Einordnung älterer Empfehlungen.
Einige im historischen Thread genannte Tools, Dienste oder externe Links könnten heute nicht mehr verfügbar oder inhaltlich überholt sein. Nutzen Sie sie bitte nur mit zusätzlicher Prüfung.
Startbeitrag
Archivierter Thread aus dem Seitenreport-Forum.
Hallo, ich möchte gerne meine Navigationsbilder (und später auch andere) in CSS Sprites bündeln.
Ich habe jetzt ein Tool genutzt, weiß aber nicht, warum es nicht geht..
Mein Code:
.sprites{background-image:url(http://img4.fotos-hochladen.net/uploads/bildj1eio29kfw.png);background-color:transparent;background-repeat:no-repeat;}
#i_icon_mini_message{height:10px;width:14px;background-position:0 0;}
#i_icon_mini_gallery{height:14px;width:16px;background-position:-14px 0;}
#i_icon_mini_index{height:12px;width:13px;background-position:-30px 0;}
#i_icon_mini_members{height:14px;width:16px;background-position:-43px 0;}
#i_icon_mini_portal{height:14px;width:14px;background-position:-59px 0;}
#i_icon_mini_register{height:14px;width:16px;background-position:-73px 0;}
#icon_search_gif{height:14px;width:16px;background-position:-89px 0;}
#i_icon_mini_profile{height:14px;width:16px;background-position:-105px 0;}
#i_icon_mini_faq{height:14px;width:16px;background-position:-121px 0;}
#i_icon_mini_new_message{height:14px;width:16px;background-position:-137px 0;}
#i_icon_mini_gallery
#i_icon_mini_index
#i_icon_mini_portal
#i_icon_mini_new_message
#i_icon_mini_message
#i_icon_mini_register
#i_icon_mini_members
#i_icon_mini_groups
#i_icon_mini_faq
#i_icon_mini_search
#i_icon_mini_profile
#i_icon_mini_login
#i_icon_mini_logout
- Nicht wundern, einige dieser Bilder sind (noch) nicht im Sprite, da er ja falsch ist.
Und das Bild: img4.fotos-hochladen.net/uploads/bildj1eio29kfw.png
Aber, wenn ich das ins CSS einfüge ..sind die Bilder nicht da..?
PS: Das .sprites wurde von dem Css Sprite tool generiert, vlt. muss da ne andere Klasse hin?
Antworten
7 BeiträgeHallo,
bist du sicher, dass die URL richtig ist? Vielleicht solltest du den Pfad mal überprüfen.
Gruß. Petra
Edit: bzw. die Verbindung der kleinen Grafiken zum Pfad.
Gegen die Infamitäten des Lebens... (siehe Hermann Hesse) http://www.universoom.de
Hallo Petra,
vielen Dank für deine Schnelle Antwort
Die Url des Bildes? - Ja, die muss richtig sein, immerhin wird das Bild bei mir angezeigt und genau die Adresse, die auch im Code ist, oder meintest du etwas anderes?
Hallo,
rufst Du die CSS-Selektoren richtig auf? .name definiert eine Selektor-class, #name definiert eine Selektor-ID. Eine ID darf nur 1x/Seite verwendet werden. Beispiel:
.name {} kanntst du verwenden mit
#name {} kanntst du verwenden mit
.
Weinvielfalt aus dem Weingut Fuchs
Fremdsprachensatz
Ja, habe mich wohl etwas merkwürdig ausgedrückt.
#i_icon_mini_message{height:10px;width:14px;background-position:0 0;} steht z.B. in deiner CSS und enthält keine URL zu den Icons.
Im HTML-Code muss die Klasse .sprites angewendet werden, damit die Verbindung zu den Icons hergestellt wird.
Gruß. Petra
Gegen die Infamitäten des Lebens... (siehe Hermann Hesse) http://www.universoom.de
Hi Petra
Vielen Dank.
Ich konnte jetzt schon von 47 auf 35 Requests verkleinern
- aber das ist alles im HTML
Dort war es total einfach..
CSS:
.sprites {
background-image : url(http://i49.servimg.com/u/f49/14/29/27/55/css_sp10.png);
background-color : transparent;
background-repeat : no-repeat;
}
#bild_png {
height : 32px;
width : 32px;
background-position : -0px -0px;
}
Dann HTML:
Aber bei dem Anderen wirds ... jetzt im schrieben kam mir ne Idee.. vlt. muss ich ja die Unterclasse (#i_icon_bild) und dann noch etwas ..
Naja, mir ist noch gar nicht aufgefallen, dass die Bilder automatisch in einem CSS sind.. dies ist zwar nicht komplett optimal, aber immerhin.
Ich werde da wohl noch n bisschen rum probieren.. aber ich bin immerhin schon ein paar Schirtte weiter.
Vielen Dank !!
Liebe Grüße,
Marvin
Meinst du das Sorite Tool:
Das war schon erledigt, danke
Aber nein, ich habe das nicht damit gemacht