CSS Sprite ... wie in html code einfügen?

[enigma2k]

Hallo,

Ich weiß, ist wahrscheinlich eine sehr dumme Anfänger Frage, aber nach stundenlangen Suchen im Internet geb ichs auf und hoffe, dass mir hier wer weiterhelfen kann. Habe mir mit einem Programm ein css sprite.pg erstellen lassen das folgendermaßen aussieht:

/* QuickSprites - BEGIN - DO NOT REMOVE THIS LINE */
.sprite1,
.sprite2

{	display:	inline-block;
	background-repeat:	no-repeat;
	background-image:	url( '/images/sprites.png' );
}


.sprite1
{
	background-position:	-300px 0;
	width:	100px;
	height:	36px;
}


.sprite2
{
	background-position:	-100px 0;
	width:	100px;
	height:	40px;
}

Habe das ganze nun in meine style.css (Wordpress) eingefügt. Wie kann ich jetzt nun im HTML code sagen dass er das bild aus der CSS nehmen soll?

 

[Cheffchen]

Hallo,

in dem entweder die das element entweder eine der classen gibst oder die classe anpasst.

Obwohl das zum anfang der falsche weg ist zu erlennen bzw machen.

1. Bild erstellen, raster überlegen zb alle Bilder sind max 40px hoch und 250px breit dann hast dein rasten
250px breit und alle 40px ein neues, kann natürlich auch im wechseln mit hover bild sein.

2 css anlegen, eine css classe wo nur das bild einfügst zb .sprite

display: inline-block;
background-repeat: no-repeat;
background-image: url( '/images/sprites.png' );

3 die einzelnen css ableitungen die das bild verschieben, genau wie oben mit den .sprite1 und .sprite2

4 dann halt html <a class="sprite sprite1" href="xyz1de"> oder <a class="sprite sprite2" href="xyz2.de">

Cheffchen

 

[enigma2k]

Danke für die Antwort, ich habs aber leider nicht ganz verstanden was du mit "sprite sprite1" meinst, weil bei mir ja kein "sprite" vorkommt.

Habe das hier probiert, aber das klappt nicht: <img class="sprite1" src="/images/sprites.png" width="1" height="1" /> (hab das von W3Schools Online Web Tutorials)

Muss man in dem Fall überhaupt im HTML code die URL angeben, weil die steht doch eigentlich schon im CSS?

 

[enigma2k]

Ich habe es jetzt hingekriegt indem ich einfach geschrieben hab: <a class="sprite1"> und <a class="sprite2"> um beide Bilder einzubringen.

Stimmt diese Lösung oder wäre das kein sauberer HTML code? Weil im Gegensatz zu deinem code habe ich dieses zusätzliche "sprite" nicht (keine Ahnung wozu das ist) und auch kein href.

 

[Cheffchen]

hallo,

also wenn den code von dein ersten beitrag nimmst ist das ok so.
als erweiterung fehlt dann natürlich noch das hover um das sprite zeug richtig zu nutzen.

Cheffchen