CSS Sprites mit Link und Text in Sidebox integrieren

html.de-Forum HTML, XHTML & CSS
1

Hallo,
ich möchte CSS Sprites verwenden.
Ich habe den fertigen CSS Sprite im .png Format und eine dazugehörige stylesheet dazu.

Bei der Einbindung hapert es leider. Die in der Suchmaschine gefundenen Beiträge funktionierten bei mir leider nicht.
Hier mein Code:

[B]




Vorstellung

[/B]

Wo steckt denn hier der Fehler?
Hier noch ein kleiner Screenshot. Oben das Original, darunter der CSS Sprite.

2

Hallo.

Bei einem CSS Problem sollte man den CSS Code auch posten, wie soil denn sonst geholfen werden.

Bei deinem Screenshot sieht es so aus wie es ausehen sollte wenn man einen Text mit einem Hintergrundbild hat, von einem CSS Sprite kann ich da nichts erkennen.

Mal eine Frage, weisst du überhaupt für was CSS Sprites verwendet werden? Eine sinnvolle Verwendung kann ich bei deinem Beispiel nicht erkennen. Eine simple Grafik würde hier genügen, was auch relativ einfacher zu handhaben ist.

Gruss
Elroy

3

Hallo,
vielen Dank für deine zeitnahe Antwort.
Ich möchte dringend http requests reduzieren.
In de Laufzeitanalyse habe ich die 11 auf der Hauptseite und jeder Unterseite geladenen Bilder in der Sidebox als Flaschenhals festgestellt.
Ich möchte den erzeugten Sprite also anstatt der 11 Einzelbilder einbinden.
Jedem Sprite soll, wie bei den zuvor einzeln eingebundenen Bildern, sowohl ein Link als auch ein verlinkter Text zugewiesen werden.

Hier ist der CSS Code:

/* glue: 0.9.4 hash: 8259c541ca */
.sprite-icons-versand,
.sprite-icons-abrollern,
.sprite-icons-blog,
.sprite-icons-anrollern,
.sprite-icons-paypal,
.sprite-icons-dbm-logo,
.sprite-icons-Esc-logo,
.sprite-icons-vorkasse,
.sprite-icons-hbm80,
.sprite-icons-kontakt,
.sprite-icons-Vorstellung {
background-image: url(‚icons.png‘);
background-repeat: no-repeat;
}

.sprite-icons-versand {
background-position: 0 0;
width: 110px;
height: 40px;
}

.sprite-icons-abrollern {
background-position: 0 -40px;
width: 100px;
height: 70px;
}

.sprite-icons-blog {
background-position: -110px 0;
width: 95px;
height: 54px;
}

.sprite-icons-anrollern {
background-position: -110px -54px;
width: 88px;
height: 55px;
}

.sprite-icons-paypal {
background-position: 0 -110px;
width: 80px;
height: 25px;
}

.sprite-icons-dbm-logo {
background-position: -205px 0;
width: 60px;
height: 72px;
}

.sprite-icons-Esc-logo {
background-position: 0 -135px;
width: 59px;
height: 72px;
}

.sprite-icons-vorkasse {
background-position: -205px -72px;
width: 39px;
height: 45px;
}

.sprite-icons-hbm80 {
background-position: -59px -135px;
width: 45px;
height: 45px;
}

.sprite-icons-kontakt {
background-position: -104px -135px;
width: 35px;
height: 27px;
}

.sprite-icons-Vorstellung {
background-position: -139px -135px;
width: 35px;
height: 27px;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min–moz-device-pixel-ratio: 1.0), screen and (-o-min-device-pixel-ratio: 100/100), screen and (min-device-pixel-ratio: 1.0), screen and (min-resolution: 1.0dppx) {
.sprite-icons-versand,
.sprite-icons-abrollern,
.sprite-icons-blog,
.sprite-icons-anrollern,
.sprite-icons-paypal,
.sprite-icons-dbm-logo,
.sprite-icons-Esc-logo,
.sprite-icons-vorkasse,
.sprite-icons-hbm80,
.sprite-icons-kontakt,
.sprite-icons-Vorstellung {
background-image: url(‚icons.png‘);
-webkit-background-size: 265px 207px;
-moz-background-size: 265px 207px;
background-size: 265px 207px;der
}
}

4

Übrigens, ein zeigt gar nichts an.

5

Hat sich erledigt, ich habe es über URI gelöst