Sprite met rode X erdoor

Status
Niet open voor verdere reacties.
A

Aloneal

Gebruiker
Lid geworden
12 nov 2011
Berichten
168
Ik heb er lang niet aan gedurfd maar ben nu toch maar aan de slag gegaan met sprites.

Ik gebruik de volgende code (ik zit nog in de testfase zonder linking, dat komt later, de code heb ik opgepikt van w3schools.com):

CSS:

img#facebook
{
width:30px;
height:30px;
background:url(http://www.mijnsite.org/images/socialmedia.png) 0 0;
}
img#twitter
{
width:30px;
height:30px;
background:url(http://www.mijnsite.org/images/socialmedia.png) -40px 0;
}

HTML:

<div class="socialmedia">
<img id="facebook" src="socialmedia.png" width="1" height="1" align="right"/>
</div>

<div class="socialmedia">
<img id="twitter" src="socialmedia.png" width="1" height="1" align="right"/>
</div>

Nu worden de delen van de sprite weliswaar prima weergegeven, maar ze worden weergegeven met een rode X erdoor (zoals wanneer een afbeelding niet gevonden wordt). Ik denk zelf dat het met src="socialmedia.png" te maken heeft. Maar hoe moet ik het oplossen? Wat doe ik fout, want volgens mij volg ik de instructies van w3schools correct?

Voor zover het uitmaakt: dit is mijn doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
Laatst bewerkt:
Waarom gebruik je dezelfde afbeelding in een <img> en als achtergrond? Da's een beetje dubbelop nietwaar? Sowieso moetje bij die achtergrond opgeven dat hij zich niet moet herhalen.
 
Dank voor je antwoord Naarling. De image verwijst nergens naar want het is geen url, toch?. Maar zoals ik van w3schools had begrepen mag de scr niet leeg zijn en moet je er iets (random?) in zetten.

Wat is de code om te voorkomen dat de achtergrond zich herhaalt? Ik had de code overgenomen van w3schools: http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img.

Zou je een voorbeeld van de code kunnen geven hoe het wel moet?

- Edit -

Mij lijkt het probleem dat je via CSS een achtergrond oproept, maar dat er vervolgens met scr een image overheen gezet wordt. Maar de scr kan je ook niet weghalen want dan komt er weer een ander symbooltje (dat van image) over de sprite heen te staan...
 
Laatst bewerkt:
Ik snap überhaupt niet waarom ze daar een img tag gebruiken, lijkt me volkomen overbodig (vooral omdat niet de bedoeling is dat ze worden weergegeven). Ik zou iets als het volgende doen:
HTML: 
<div class='social facebook'></div>
<div class='social twitter'></div>

en de CSS:
Code: 
.social{width:30px; height:30px; background:url([url]http://www.mijnsite.org/images/socialmedia.png[/url]) 0 0 no-repeat;}
.social.twitter{background-position:-40px 0;}
Dus eerst alle algemene instellingen aan .social meegeven, en vervolgens per knop alleen de afwijkingen meegeven, waar nodig.

EDIT: voor betere leesbaarheid hoor je je code trouwns tussen [*code][*/code] (zonder *) tags te zetten. Of [*html][*/html] tags als het om HTML gaat.
 
Laatst bewerkt:
Aha, ik was in de tussentijd zo ongeveer krek hetzelfde aan het opmerken / fabrieken! :)
Dit was mijn antwoord:

Mmm, bij w3schools doen ze het op een nogal merkwaardige manier:
  • Ze zetten in de html een transparant image, en via de css wordt er een background-image aan toegevoegd.
  • Bovendien geven ze tegenstrijdige opdrachten: volgens de html heeft het img een width="1" en een height="1"; maar in de css wordt de werkelijke breedte en hoogte opgegeven.
  • En het transparante image in de html is helemaal niet nodig!
Wat er verkeerd gaat:
  • Bij jou heeft het html-image de src="socialmedia.png" gekregen, maar daar zit het niet (en dat geeft het rode kruis). Het zit in een mapje "images", dat een niveau verder is dan de map waar de pagina in zit.
  • Het zou dus moeten worden: src="images/socialmedia.png" (of via de volledige URL: src="http://www.mijnsite.org/images/socialmedia.png").
  • Maar dan gaat het nog steeds niet, want dat image is niet een transparant image! - Het mag dus niet random zijn.

=======
Hoe wel?
Waarschijnlijk moeten de sprite-images een link worden.
Dan kan je het bv. zo doen:
HTML: 
...
<div class="socialmedia">
    <a id="facebook" href="deFB-URL"></a><br />
    <a id="twitter" href="deTW-URL"></a>
</div>
Met in de css:
Code: 
.socialmedia a { /* dit geldt voor alle twee */
    width: 40px;
    height: 40px;
    display: inline-block;
    background: url(images/socialmedia.png);
    }
#twitter { 
    background-position: -40px 0;
    }
  • Opm.1: de Facebook bg-position staat automatisch al op 0 0, die hoeft niet apart vermeld te worden.
  • Opm.2: er hoeft niets bij om de background zich niet te laten herhalen, want het te tonen oppervlak is toch maar 40*40px (en een background-image kan niet verder komen dan de grens van het element waar het in zit).
Vervolgens kan je er ook nog twee hover-varianten onder tekenen (of ernaast, dat kan ook), met bv. in de css:
Code: 
#facebook:hover {
    background-position: 0 -40px; /* background wordt nu omhoog getrokken */
    }
#twitter:hover { 
    background-position: -40px -40px; /* background wordt naar links en omhoog getrokken */
    }
 
Laatst bewerkt:
Bedankt voor de informatie zover. Met jullie tips lukt het me om simpele sprite-buttons te maken met simpele url doorverwijzingen. Dat is al vooruitgang. Helaas lukt het me niet met de social media buttons. Ik ben bezig met facebook, twitter, google + en inshare.

Facebook: toont de sprite zoals het hoort, maar als ik klik dan opent er een blanco pagina met linksboven de like button waar je alsnog op moet klikken.
Twitter: toont niet de sprite maar de eigen button.
Google + : gebruikt geen url maar Javascript, hoe kan ik dat met een href in werking stellen?
Inshare: ook Javascript.

Ik verwacht niet dat jullie dat allemaal voor mij gaan oplossen. Ik denk dat sprites met social media tamelijk specialistisch maatwerk is.

Maar als er tips zijn waarmee ik het alsnog werkende kan krijgen dan zijn ze welkom natuurlijk. Al zijn het maar links naar pagina's met uitgebreide uitleg.

---Edit---

Ik doe de social media buttons toch maar op traditionele wijze, dus zonder eigen tekeningen. Wel wat minder strak, maar het kost me teveel research (met te weinig resultaat).

Naarling en CSS Hunter bedankt voor jullie bijdrage. Als ik een sprite wil gebruiken weet ik nu hoe ik het aan kan pakken! :)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan