Fullscreen: Sprite -> HIlfe benötigt

Hallo,

ich habe mit dem Spritegen -> http://de.spritegen.website-performance.org/ mir einen Sprite generiert.
Jetzt habe ich folgenden Code Angezeigt bekommen

.sprite-12572{ background-position: 0 0; width: 60px; height: 60px; }  
.sprite-15180{ background-position: -65px 0; width: 60px; height: 60px; }  
.sprite-1816{ background-position: -130px 0; width: 60px; height: 60px; }  
.sprite-1987{ background-position: -195px 0; width: 60px; height: 60px; }  
  
#container li {  
    background: url(csg-52a30825ecb0c.png) no-repeat top left;  
}

Jetzt möchte ich gerne bei diversen SPAN's die Sprites aufrufen.
<span class="sprite-15180"></span>
zeigt nichts an. Ich habe mich versuch in CSS ein zu lesen. Und gefunden das offenbar etwas umgestellt werden muss Nun also:

span {  
    background: url(csg-52a30825ecb0c.png) no-repeat top left;  
}

Aber nochimmer keine Änderung HILFE

  1. Om nah hoo pez nyeetz, Fullscreen!

    Wie das mit den Sprites funktioniert kannst du auf dieser Seite nachlesen. Dann könntest du vielleicht auch dein Problem sehen. Möglicherweise ist das span-Element nicht groß genug. Wir können ohne Kenntnis der Seite so ziemlich genau überhaupt nichts konkretes dazu beitragen.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kai und Kaiman.

  2. Ich vermute das Span hat keinen Inhalt. Dann ist es schlicht zu klein für das Hintergrundbild.
    Also:
    display: block; -> oder -> display: inline-block;
    width: 24px (bzw. deine größe);
    height: 24px (bzw. deine größe);

    Dann solltest du etwas sehen.

    Gruß
    Counter Strike Source beherrschender
    T-Rex

  3. @@Fullscreen:

    nuqneH

    #container li {

    background: url(csg-52a30825ecb0c.png) no-repeat top left;
    }

      
    Die background-Eigenschaft setzt viele background-…-Eigenschaften, auch nicht explizit angegebene (diese auf ihren Defaultwert). Obiges ist äquivalent zu:  
      
    ~~~css
    #container li {  
        background-color: transparent;  
        background-position: top left;  
        background-size: auto auto;  
        background-repeat: no-repeat no-repeat;  
        background-clip: border-box;  
        background-origin: padding-box;  
        background-attachment: scroll;  
        background-image: url(csg-52a30825ecb0c.png);  
    }
    

    Da der Selektor '#container li' spezifischer ist als '.sprite-…', kommen die background-position-Angaben in diesen Regeln nicht zur Anwendung.

    'span' ist weniger spezifisch. Wenn die '#container li'-Regel nicht mehr  da ist, sollten die background-position-Angaben Wirkung zeigen.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hi,

      #container li {

      background: url(csg-52a30825ecb0c.png) no-repeat top left;
      }

      
      >   
      > Die background-Eigenschaft setzt viele background-…-Eigenschaften, auch nicht explizit angegebene (diese auf ihren Defaultwert). Obiges ist äquivalent zu:  
      >   
      > ~~~css
      
      #container li {  
      
      >     background-color: transparent;  
      >     background-position: top left;  
      >     background-size: auto auto;  
      >     background-repeat: no-repeat no-repeat;  
      >     background-clip: border-box;  
      >     background-origin: padding-box;  
      >     background-attachment: scroll;  
      >     background-image: url(csg-52a30825ecb0c.png);  
      > }
      
      

      Da der Selektor '#container li' spezifischer ist als '.sprite-…', kommen die background-position-Angaben in diesen Regeln nicht zur Anwendung.

      'span' ist weniger spezifisch. Wenn die '#container li'-Regel nicht mehr  da ist, sollten die background-position-Angaben Wirkung zeigen.

      Und was hat der Selector "#container li" mit dem
      <span class=".sprite-…"></span>
      zu tun? Warum sollten die background-Eigenschaften für die .sprite… nicht wirken, nur weil für völlig andere Elemente andere background-Eigenschaften gesetzt werden?

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.