eerder topic   volgend topic
  
CSS Sprite vraagje
9 juni 2011 - 13:43   
geplaatst door: pakito
Ik wil graag drie social icoontjes (Twitter, Facebook & RSS) op m'n site integreren.

Nu staan ze er ook al, maar ik wil ze met een css sprite ook een rollover effect geven, momenteel lukt me dit niet zo goed (je ziet maar een icoontje en het is niet eens clickable). M'n testversie vind je op http://www.kristofdevos.com/testarea

de HTML die ik gebruik is deze:

Code: [Selecteer]

<ul id="socialsprite">  
<li id="socialsprite1"><a href="http://www.kristofdevos.com" rel="nofollow"><span>Twitter</span></a></li>  
<li id="socialsprite2"><a href="http://www.kristofdevos.com" rel="nofollow"><span>Facebook</span></a></li>  
<li id="socialsprite3"><a href="http://www.kristofdevos.com" rel="nofollow"><span>RSS</span></a></li>  
</ul>

de CSS is deze:

Code: [Selecteer]

#socialsprite {  
   background:url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") 0 0 no-repeat;  
   width:16px;  
   height:16px;  
   margin:0;  
   padding:0;  
   }

#socialsprite li span { display: none; }  
 
#socialsprite li { float:left; list-style:none; position:relative; }  
 
#socialsprite li, #social a {  
   height:16px;    /* Each button must have the same height, define it here */  
   display:block;  
   margin:0;  
   padding:0;  
   }  
 
li#socialsprite1, li#socialsprite2, li#socialsprite3, { margin-right:0px; width:16px; }

#socialsprite1 a:hover { background:url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") -0px  -0px no-repeat; }  
#socialsprite2 a:hover { background:url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") -0px  -0px no-repeat; }  
#socialsprite3 a:hover { background:url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") -0px  -0px no-repeat; }  

Wat doe ik verkeerd?

(Bewerkt door pakito om 13:43, 9-06-2011)

CSS Sprite vraagje
9 juni 2011 - 14:26    reactie #1
geplaatst door: marcone
ik kan het eerste blokje met code helemaal niet terugvinden in de source van je voorbeeld. Of kijk ik er gewoon overheen?
Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain
CSS Sprite vraagje
9 juni 2011 - 14:33    reactie #2
geplaatst door: moxie
je gebruikt 1 plaatje voor je social icons ... bij hover zul je dan een offset moeten instellen
de basispositie is 0px, maar het hoverplaatje staat op 16px (de hoogte van je button)
bij je hover heb je nu ook een positie staan van 0px
CSS Sprite vraagje
9 juni 2011 - 16:08    reactie #3
geplaatst door: pakito
@Marcone, ik heb nog even nagekeken en het blokje staat er wel degelijk in.

@moxie Voorlopig heb ik de hover laten staan op 0px, omdat ik zag dat de links sowieso niet werken en je ook maar één ipv drie icoontjes ziet. De hover posities zal ik op het einde wel erin stoppen.

Enig idee waar het misloopt? Waarom er maar één icoontje is en waarom de link niet werkt?

CSS Sprite vraagje
10 juni 2011 - 00:16    reactie #4
geplaatst door: Godfather
Omdat je een achtergrond plaatje probeert te laten linken wat niet kan, omdat het op de achtergrond staat? Mogelijk dat je een transparant vlak eroverheen moet plakken alszijnde link of nog misschien het plaatje zelf?
Mac Pro '08 - iPad 16GB - iPhone 6 - Next Gen MB Pro
CSS Sprite vraagje
10 juni 2011 - 09:03    reactie #5
geplaatst door: Tacon
Hoi Kris

Je span belet je de a href om te werken:

als je die even met css comments uitzet zie je wat ik bedoel:
#socialsprite li span
{
*/
   display: none;
/*
}  

Verder is het handig ivm debuggen om een border toe te voegen:

#socialsprite li, #social a {  
   height:16px;    /* Each button must have the same height, define it here */
   width:   16px;
   display:block;  
   margin:0;  
   padding:0;  
   border:   red 1px dotted;
}  
 
dan zie je dat ze onder mekaar staan.

En omdat je wel wat anders te doen hebt, kan je beter gewoon wat werkende code lenen:

http://www.alistapart.com/d/sprites/ala-buttons1.html

Die doet volgens mij (imho) precies wat je zoekt. Is een klassieker!

Kortom surf je de rambam en dan vindt je het wel. Story of my life ;)

Enjoy en big kiss, Tacon (web-dino)

CSS Sprite vraagje
10 juni 2011 - 12:28    reactie #6
geplaatst door: pakito
Dag Tacon, bedankt voor de tips!

Ik gebruik nu de 'geleende' code en zie nog steeds niets … Als je met de muis een beetje beweegt zie je wel ongeveer gecentreerd onder de horizontale lijn een mouseover effect. Wat doe ik verkeerd?

CSS Sprite vraagje
11 juni 2011 - 15:43    reactie #7
geplaatst door: ettepet
Kun je hier iets mee?

Code: [Selecteer]

#socialsprite a {
display: block;
width: 0;  
height: 16px;  
margin: 0;  
padding-left: 16px;
overflow: hidden;
}
#socialsprite1 a {
background: url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") 0 0 no-repeat;  
}
#socialsprite1 a:hover {
  background: url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") 0 -16px no-repeat;  
}
#socialsprite2 a {
background: url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") -16px 0 no-repeat;  
}
#socialsprite2 a:hover {
background: url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") -16px -16px no-repeat;  
}
#socialsprite3 a {
background: url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") -32px 0 no-repeat;  
}
#socialsprite3 a:hover {
background: url("http://www.kristofdevos.com/wp-content/themes/gridlocked/images/social/socialsprite.png") -32px -16px no-repeat;  
}
#socialsprite li {
float: left;
width: 16px;
}
CSS Sprite vraagje
11 juni 2011 - 16:13    reactie #8
geplaatst door: pakito
Hey Ettepet,

Jouw css zit er momenteel in en er is niets zichtbaar. Hoe zou dit toch komen?

CSS Sprite vraagje
11 juni 2011 - 17:09    reactie #9
geplaatst door: ettepet
In elk geval is je html niet valide. Er staat een afsluitende p-tag direct achter de ul-tag, er staan allemaal open-sluit p-tags tussen de listitems en er staat een openings p-tag voor de afsluitende ul-tag.

Ik kan me zo voorstellen dat dit de boel in de soep laat lopen.
Wordt dit zo automatisch voor je gegenereerd (door WordPress?)?


Code: [Selecteer]

<!--BEGIN .entry-content -->
< div class="entry-content">
< ul id="socialsprite"> &nbsp;

</ p>
< li id="socialsprite1">< a href="http://www.kristofdevos.com" rel="nofollow">< span>Twitter</ span></ a></ li>


&nbsp; </ p>
< li id="socialsprite2">< a href="http://www.kristofdevos.com" rel="nofollow">< span>Facebook</ span></ a></ li>


&nbsp; </ p>
< li id="socialsprite3">< a href="http://www.kristofdevos.com" rel="nofollow">< span>RSS</ span></ a></ li>


&nbsp;
</ p></ ul>
<!--END .entry-content -->

CSS Sprite vraagje
11 juni 2011 - 22:12    reactie #10
geplaatst door: pakito
Hmmmm, ik denk dat dit inderdaad het werk van Wordpress is ...
  
eerder topic   volgend topic