background-image Ausschnitt

[dave]

Hi,

ich habe ein CSS-sprite in dem mehrere Icons nebeneinander (und untereinander) sind.
Ich möchte nun einem button dieses Icon geben:

<button class="help">Hilfe</button>

.help {  
background:url(sprite.png) no-repeat -50px 0;  
padding-left:20px;  
}

So werden natürlich auch die Bilder die rechts neben dem gewünschten Icon im Sprite kommen als Hintergrund angezeigt.

Wie kann ich das lösen?

Anstelle als background-image als border-image funktioniert nicht im IE8.

:before {content:url();} nimmt das ganze Bild und nicht nur einen Ausschnitt, <img> kann ich ja nicht als content angeben.
Oder wird aus dem content:url() ein img-element im button das ich dann über .help img stylen könnte?

background-clip und background-size machen leider andere Dinge als ich von ihnen erhofft hätte (und funktionieren nicht im IE8).

Jemand eine Idee?

[Matthias Apsel]

Om nah hoo pez nyeetz, dave!

Jemand eine Idee?

overflow?

Matthias

[dave]

Hi,

Jemand eine Idee?

overflow?

Kann ich leider nichts mit anfangen.
Wenn ich dem Button overflow:hidden|auto|scroll gebe hat das doch keinerlei effekt darauf, dass das Hintergrundbild zu Breit ist und somit noch Icons hinter dem "Hilfe"-Text sind?

~dave

[ChrisB]

Hi,

:before {content:url();} nimmt das ganze Bild und nicht nur einen Ausschnitt, <img> kann ich ja nicht als content angeben.
Oder wird aus dem content:url() ein img-element im button das ich dann über .help img stylen könnte?

Nein, aber ein ganz „normales“ Element, dem du Maße und ein Hintergrundbild verpassen kannst.

MfG ChrisB

[dave]

Hi,

vielen Dank.

Meine Lösung:

button:before{  
	content:"";  
	background:url(sprite.png) no-repeat -50px 0;  
	width:25px;  
	height:15px;  
	display:inline-block;  
}

~dave

[dave]

Hi,

„normales“

wie machst du eigentlich immer die korrekten "?
Gibst du da immer den ASCII Code übern Num-Block ein?
Copy&Paste?
Oder hast du da was komfortableres?

~dave

[ChrisB]

Hi,

„normales“

wie machst du eigentlich immer die korrekten "?
Gibst du da immer den ASCII Code übern Num-Block ein?
Copy&Paste?
Oder hast du da was komfortableres?

Ich habe zuhause einen Laptop mit US-Tastatur.
Da mir die fehlenden deutschen Umlaute schnell auf den Geist gingen, habe ich mir mit dem MicroSoft Keyboard Layout Creator ein eigenes Tastatur-Layout gebastelt, wo ich mir die Umlaute und noch einige weitere Sonderzeichen wie bspw. die „“ auf spezielle Tastenkombinationen gelegt habe.
Das funktioniert nach kurzer Eingewöhnungsphase recht gut (wenn man sich vorher gut genug überlegt, was man wo hin legt) - hat nur den leichten Nachteil, dass ich jetzt, wenn ich mal an einer „normalen“ deutschen Tastatur sitze, oft automatisch meine Tastenkombinationen tippe, statt der korrekten Umlaut-Tasten ...

(Zum Programmieren ist mir eine US-Tastatur auf jeden Fall angenehmer - zahlreiche wichtige Sonderzeichen wie bspw. eckige/geschweifte Klammern sind darauf einfach besser zu erreichen, als mit [Alt GR] auf deutschen.)

MfG ChrisB

[Kai345]

[latex]Mae  govannen![/latex]

wie machst du eigentlich immer die korrekten "?
Gibst du da immer den ASCII Code übern Num-Block ein?
Copy&Paste?
Oder hast du da was komfortableres?

Man kann - wie ChrisB - seine Belegung selbst erstellen, aber SelfHTML bietet auch hier eine Lösung :)

Cü,

Kai