Du bist hier: Seitenreport    Forum    Web-Entwicklung    (X)HTML & CSS    Css Sprite - Brauche Hilfe

Css Sprite - Brauche Hilfe

Verfasst am: 07. 01. 2012 [14:27]
schiggysboard
Dabei seit: 16.05.2011
Themenersteller

56 Beiträge
Beitrag hilfreich?

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: http://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?

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 07.01.2012 um 14:29.]
http://www.schiggysboard.com/
Profil
WWW
 
Verfasst am: 07. 01. 2012 [15:39]
ptra
Dabei seit: 22.09.2010

261 Beiträge
Beitrag hilfreich?

Hallo,

bist du sicher, dass die URL richtig ist? Vielleicht solltest du den Pfad mal überprüfen.

Gruß. Petra wink.gif

Edit: bzw. die Verbindung der kleinen Grafiken zum Pfad.

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 07.01.2012 um 15:43.]
Gegen die Infamitäten des Lebens… (siehe Hermann Hesse)
Profil
WWW
 
Verfasst am: 07. 01. 2012 [20:51]
schiggysboard
Dabei seit: 16.05.2011
Themenersteller

56 Beiträge
Beitrag hilfreich?

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?
http://www.schiggysboard.com/
Profil
WWW
 
Verfasst am: 08. 01. 2012 [09:51]
winelady
Dabei seit: 04.09.2010

326 Beiträge
Beitrag hilfreich?

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 <div class="name">
#name {…} kanntst du verwenden mit <div id="name">.

Gruß
winelady
Weingenuß auf hohem Niveau: Weingut Fuchs
Fremdsprachensatz
Profil
WWW
 
Verfasst am: 08. 01. 2012 [12:23]
ptra
Dabei seit: 22.09.2010

261 Beiträge
Beitrag hilfreich?

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 wink.gif
Gegen die Infamitäten des Lebens… (siehe Hermann Hesse)
Profil
WWW
 
Verfasst am: 08. 01. 2012 [14:25]
schiggysboard
Dabei seit: 16.05.2011
Themenersteller

56 Beiträge
Beitrag hilfreich?

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:
<div class="sprites" id="bild_png"></div>


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
http://www.schiggysboard.com/
Profil
WWW
 
Verfasst am: 10. 01. 2012 [12:11]
Chance
Dabei seit: 13.11.2009

140 Beiträge
Beitrag hilfreich?

Meinst du das Sorite Tool:
http://de.spritegen.website-performance.org/
www.piacos.de
www.psi-portal.de
Profil
WWW
ICQ
 
Verfasst am: 10. 01. 2012 [20:47]
schiggysboard
Dabei seit: 16.05.2011
Themenersteller

56 Beiträge
Beitrag hilfreich?

Das war schon erledigt, danke ;)

Aber nein, ich habe das nicht damit gemacht ;)
http://www.schiggysboard.com/
Profil
WWW
 




Du bist nicht eingeloggt. Bitte beachte, dass Du eingeloggt sein musst, um Themen zu erstellen oder auf Beiträge zu antworten.

RSS Feed abonnieren

Werde in Echtzeit über neue Foren-Beiträge informiert:


4 Mitglieder waren innerhalb der letzten 15 Minuten online (9 heute gesamt):
Facesof, joerg, kettnergmbh-mt, x-f

Administratoren und Moderatoren:
[keine]

Seitenreport hat 18161 registrierte Mitglieder, 3005 Themen und 29117 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 13 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 1 neues Thema und 7 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

Schnellzugriff

Hier werben
Partnerprogramm
Premium Pakete
Verlinkung freischalten
Allgemeine Geschäftsbedingungen
Kontakt aufnehmen
Impressum

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Partnerprogramm

12% Lifetime Provision auf alle Buchungen von Dir geworbener Mitglieder sowie 0,50 € für jede Registrierung. Eines der besten deutschen Partnerprogramme laut den appCharts von 100partnerprogramme.de. Nimm jetzt teil am Seitenreport Partnerprogramm und verdiene gutes Geld dabei!

* = Partnerlinks