CODEWITHSUNDEEP
htmlcss
smally
smally

Reputation: 463

Using sprites in a nav tag

I'm trying create a html navigation bar that uses sprites for social media icons.

I have my nav bar and individual social media icons working correctly in html like so: 

<nav>
  <a href="https://www.facebook.com" target="_blank"><img src="icons/64/facebook_icon.png" onmouseover="this.src='icons/64/facebook_icon_hover.png'" onmouseout="this.src='icons/64/facebook_icon.png'" /></a>
  <a href="https://www.twitter.com" target="_blank"><img src="icons/64/twitter_icon.png" onmouseover="this.src='icons/64/twitter_icon_hover.png'" onmouseout="this.src='icons/64/twitter_icon.png'" /></a>
  <a href="https://www.linkedin.com" target="_blank"><img src="icons/64/linkedin_icon.png" onmouseover="this.src='icons/64/linkedin_icon_hover.png'" onmouseout="this.src='icons/64/linkedin_icon.png'" /></a>
  <a href="https://plus.google.com" target="_blank"><img src="icons/64/googleplus_icon.png" onmouseover="this.src='icons/64/googleplus_icon_hover.png'" onmouseout="this.src='icons/64/googleplus_icon.png'" /></a>
</nav>

But when I try using my sprite version, it does not work:

#facebook {
  width: 64px;
  height: 64px;
  background: url("images/sprite/64/sprite_original.png") 0 0;
}
#twitter {
  width: 64px;
  height: 64px;
  background: url("images/sprite/64/sprite_original.png") -64px 0;
}
#linkedin {
  width: 64px;
  height: 64px;
  background: url("images/sprite/64/sprite_original.png") -128px 0;
}
#googleplus {
  width: 64px;
  height: 64px;
  background: url("images/sprite/64/sprite_original.png") -192px 0;
}
#facebook:hover {
  background: url("sprite/64/sprite_original.png") 0 -64px;
}
#twitter:hover {
  background: url("sprite/64/sprite_original.png") -64px -64px;
}
#linkedin:hover {
  background: url("sprite/64/sprite_original.png") -128px -64px;
}
#googleplus:hover {
  background: url("sprite/64/sprite_original.png") -192px -64px;
}
<nav>
  <a id="facebook" href="https://www.facebook.com" target="_blank"></a>
  <a id="twitter" href="https://www.twitter.com" target="_blank"></a>
  <a id="linkedin" href="https://www.linkedin.com" target="_blank"></a>
  <a id="googleplus" href="https://plus.google.com" target="_blank"></a>
</nav>

I don't know where I've gone wrong. I'm still learning so any help is appreciated.

Note: All icons are 64px by 64px.

my sprite image

Upvotes: 2

Views: 86

Answers (1)

Collins Abitekaniza
Collins Abitekaniza

Reputation: 4578

Try adding display:inline-block; or display: block; to your elements in css like

#facebook,#twitter,#linkedin,#googleplus{
     display: block;
}

Upvotes: 1

Related Questions