[CSS] Sprite wil niet op de goede plek staan

[TheNephilim]

In plaats van tientallen icoontjes te blijven uploaden, heb ik mij eens even verdiept in het sprite gebeuren. De sourcecode van deze geïnstalleerd, de 0,5MB verhoogd naar 1,5 zodat het zipje van ~700KB er in past.

Sprite gegenereerd en dat werkt erg mooi! Het enige probleem waar ik tegen aanliep was de plaatsing van het icoontje. Wat wel werkt:

HTML:

<img src="transparent.png" class="sprite sprite-accept" />

Cascading Stylesheet:

.sprite {
   background: url(silk-icons-sprite.png) no-repeat top left;
   vertical-align: bottom;
}
.sprite-accept { background-position: 0 0; width: 16px; height: 16px; }

Het probleem hiervan vind ik dat ik alsnog een extra plaatje, namelijk transparent.png moet ophalen. Ik heb het al met LI, SPAN en met DIV geprobeerd, maar:

• tekst gaat in/op/door het icoontje staan
• bij gebruik van padding word het icoontje groter en laat 2 icoontjes zien, gebruik van display:inline of block maakt geen verschil
• img zonder src tag vertoont een border, niet weg te krijgen
• span laat niks zien

Heeft iemand enig idee hoe ik dit netjes oplos?

[Bosmonster]

Gewoon die sprite als achtergrond op je element zetten en positioneren met background-position?

Snap niet zo goed waarom je met een img-tag zit te kloten. (njah ik weet het wel, voor browsercompatibility, maar dan moet je ook niet zeuren over een enkel extra transparant PNG'tje).

[ Voor 52% gewijzigd door Bosmonster op 10-08-2010 11:31 ]

[steffex]

misschien werkt het niet omdat de img-tag geen background ondersteuning heeft?
http://w3schools.com/tags/tag_img.asp
wat doet transparent.png?

span gaat niet werken omdat het geen block element is, maar een inline element...
je zult met containers moeten werken om dit voor elkaar te krijgen.

HTML:

<div class="sprite sprite-accept" id="container">
<div class="transparantpngclass"></div>
</div>

[ Voor 64% gewijzigd door steffex op 10-08-2010 11:36 ]

[TheNephilim]

Zoals ik al aangaf werkt het weergeven van de icoontjes op deze manier prima, echter ben ik op zoek naar een manier waardoor ik gewoon een li ofzo neer kan zetten. Alleen is er geen element die zich normaal gedraagt tegenover de rest van de content.

HTML:

<h3><img src="transparent.png" class="sprite sprite-tag" /> Bronnen</h3>

Bovenstaande werkt prima, maar ik had het liever zo gezien:

HTML:

<h3><li class="sprite sprite-tag" style="list-style-type:none; display:inline;"></li> Bronnen</h3>

Echter geeft hij dan niks weer. Zonder display:inline laat hij het icoontje netjes zien, maar een regel naar boven.

[TheNephilim]

stef-o schreef op dinsdag 10 augustus 2010 @ 11:32:
misschien werkt het niet omdat de img-tag geen background ondersteuning heeft?
http://w3schools.com/tags/tag_img.asp
wat doet transparent.png?

span gaat niet werken omdat het geen block element is, maar een inline element...
je zult met containers moeten werken om dit voor elkaar te krijgen.

HTML:

<div class="sprite sprite-accept" id="container">
<div class="transparantpngclass"></div>
</div>

Ik krijg wel een icoontje te zien bij een IMG, alleen een border omdat er dan geen SRC aanwezig is. Die transparant.png zorgt er voor dat er wel een plaatje is, zodat ik die border kwijt ben. Hij doet het opzich prima, ik vind het alleen niet erg netjes.

Je voorbeeld ga ik even uitproberen!

[Wiethoofd]

Bernardo schreef op dinsdag 10 augustus 2010 @ 11:38:
Ik krijg wel een icoontje te zien bij een IMG, alleen een border omdat er dan geen SRC aanwezig is. Die transparant.png zorgt er voor dat er wel een plaatje is, zodat ik die border kwijt ben. Hij doet het opzich prima, ik vind het alleen niet erg netjes.

Hoezo kan je dan niet met CSS die border weghalen.

Cascading Stylesheet:

img.sprite { border-width: 0; }

[TheNephilim]

Omdat het een "plaatje niet gevonden" border is. Dus eigenlijk niet aanwezig. Net als dat een plaatje niet bestaat in IE, dan krijg je zo'n mooi kruis. Dat heb ik nu ook, Chrome geeft alleen een border weer, IE een border + kruisje.

@ stef-o: Krijg je voorbeeld niet werkend, hij pikt dan de border positie niet meer...

[Bosmonster]

stef-o schreef op dinsdag 10 augustus 2010 @ 11:32:
misschien werkt het niet omdat de img-tag geen background ondersteuning heeft?

IMG ondersteunt background in alle browsers voor zover ik weet. Tijdje terug dat ik het voor het laatst gecheckt heb wel, maar het is in ieder geval basis voor veel PNG-fixes in IE6 bijvoorbeeld.

span gaat niet werken omdat het geen block element is, maar een inline element...
je zult met containers moeten werken om dit voor elkaar te krijgen.

Je wilt hiervoor juist geen div gebruiken, aangezien dit niet meer valideert met veel doctypes als je het gebruikt binnen een a-tag bijvoorbeeld (waar je juist icoontjes wilt gebruiken). Je wilt een span hanteren en deze display:inline-block geven.

De reden dat in het voorbeeld een img-tag gebruikt wordt is browsercompatibility, aangezien niet alle browsers inline-block ondersteunen.

[ Voor 65% gewijzigd door Bosmonster op 10-08-2010 12:08 ]

[TheNephilim]

Bosmonster schreef op dinsdag 10 augustus 2010 @ 12:04:
Je wilt hiervoor juist geen div gebruiken, aangezien dit niet meer valideert met veel doctypes als je het gebruikt binnen een a-tag bijvoorbeeld (waar je juist icoontjes wilt gebruiken). Je wilt een span hanteren en deze display:inline-block geven.

De reden dat in het voorbeeld een img-tag gebruikt wordt is browsercompatibility, aangezien niet alle browsers inline-block ondersteunen.

http://www.quirksmode.org/css/display.html Volgens deze sheet doen ze het allemaal, alleen IE7 niet volledig, dat zou een probleem kunnen zijn. We ontwikkelen niet meer voor IE6, dus daar hoeven we geen rekening mee te houden. Ik ga eens kijken wat het doet!

[Bosmonster]

Firefox 2 niet en IE6/7 niet (sort of). De img-tag manier is dus wel een oplossing, maar met wat CSS ook wel met een span op te lossen.

Voor FF2, mocht je die willen ondersteunen, kun je -moz-inline-block oid gebruiken. IE6/7 hanteren inline grotendeels als inline-block, alsin daar kun je width/height aan meegeven.

[ Voor 43% gewijzigd door Bosmonster op 10-08-2010 13:02 ]

[TheNephilim]

Heb het nu inderdaad met een SPAN gemaakt, met een display: inline-block; werkt het prima, ook in IE7! Bedankt voor de tip

Een stuk schoner dan nog zo'n stom transparant plaatje mee sturen