CSS Sprites

HTML & CSS
1

Hi, I am using CSS sprites for the Social links on my footer for the images and I wanted to know if
I coded it correctly: CODEPEN

<div id="footer">
            <div id="socialmedia">
              
               <ul id="social_navlist">
                <li> <p>FIND US</p></li>
  <li id="linkedin" class="icons hvr-buzz-out"><a href="default.asp"></a></li>
  <li id="youtube" class="icons hvr-buzz-out"><a href="css_intro.asp"></a></li>
  <li id="directindustry" class="icons hvr-buzz-out"><a href="css_syntax.asp"></a></li>
  <li id="google" class="icons hvr-buzz-out"><a href="css_syntax.asp"></a></li>
</ul>
            </div>



#socialmedia{
    float:right;
    padding-right:20px;
   margin-bottom:0px;
   height:5px;
}

#social_navlist li {

    padding: 0;
    list-style: none;


 
}

#social_navlist li, #social_navlist a {
    
    display: inline-block;
    margin-left:5px;
    margin-top:-15px;
  vertical-align:middle;
  
    
}

#social_navlist li p {
  font-size: 10pt;
  font-weight: 700;
}




#linkedin {

    width: 22px;
 background:url(http://csssprites.com/results/0f2fc362af130a43b663f079ff08e292/result.png);
  background-position: 0px 0px;
}

#youtube {

    width: 22px;
 background:url(http://csssprites.com/results/0f2fc362af130a43b663f079ff08e292/result.png);
  background-position: 0px -32px;
}

#directindustry {

    width: 22px;
 background:url(http://csssprites.com/results/0f2fc362af130a43b663f079ff08e292/result.png);
  background-position: 0px -64px;
}

#google {
 
    width: 22px;
 background:url(http://csssprites.com/results/0f2fc362af130a43b663f079ff08e292/result.png);
  background-position: 0px -96px;
}
2

Does it work as you want? If so, then yes.

Is there any specific issue you have?

3

Can you try this and see if it still works?

#google,
#youtube,
#linkedin,
#directindustry {
  width: 22px;
 background:url(http://csssprites.com/results/0f2fc362af130a43b663f079ff08e292/result.png);
}
#linkedin {
  background-position: 0 0;
}
#youtube {
  background-position: 0 -32px;
}
#directindustry {
  background-position: 0 -64px;
}
#google {
  background-position: 0 -96px;
}

Instead of this:

/*
#linkedin {
 width: 22px;
 background:url(http://csssprites.com/results/0f2fc362af130a43b663f079ff08e292/result.png);
 background-position: 0px 0px;
}
#youtube {
 width: 22px;
 background:url(http://csssprites.com/results/0f2fc362af130a43b663f079ff08e292/result.png);
 background-position: 0px -32px;
}

#directindustry {
 width: 22px;
 background:url(http://csssprites.com/results/0f2fc362af130a43b663f079ff08e292/result.png);
 background-position: 0px -64px;
}

#google {
 width: 22px;
 background:url(http://csssprites.com/results/0f2fc362af130a43b663f079ff08e292/result.png);
 background-position: 0px -96px;
}
*/
4

Yeah it does is this a better method?

5

Yeah but I was just wondering If I was using any code the wrong way (cheating)

6

I prefer this method because it drastically reduces the CSS file size, is easier to read and also easier to maintain,

1 Like
7

I got my images as links but they disappear when I do this: LINK

 <a href="https://www.linkedin.com/company/iog-products"><li id="linkedin" class="icons hvr-buzz-out"></li></a>
8

This does not seem to work either:

 <li id="linkedin" class="icons hvr-buzz-out"><a href="https://www.linkedin.com/company/iog-products"></a></li>
9

There isn’t anything inside the tags to define x/y area so they collapse.

By also giving a height: 22px I get

And there’s an overlap problem (maybe more right padding to the container div? eg. 80px instead of 20px).

Though narrowing the view-port causes them to go under again.

10

You need to give the option to close that online click help. Smaller screens will be unable to get to the content below it. And it’s annoying :slight_smile: .

More padding wouldn’t really be the solution, if you are referring to the online click help.

It overlaps anything as long as the window is small enough. Making your window smaller will result in even more overlap. Unless I misunderstood your overlap reference :slight_smile: .

11

Yes, I just edited previous.

But that is a problem that needs to be removed, moved elsewhere, or fixed.

1 Like
12

So how do I make the icon show? The image is in the CSS…

13

alrighttttttttt

14

Your HTML was invalid - that’s why the linkedin wasn’t showing.

<li id="linkedin" class="icons hvr-buzz-out"> <a href="https://www.linkedin.com/company/iog-products"></a></li>

You can’t have the anchor as a parent to the LI since the only direct children allowed in a UL are LI :stuck_out_tongue: .

15

I see that but then how can convert this into a link and grab the image from the CSS? I am trying to use this CSS sprites thing…should I call it out using an <img> in between the <a></a> ?

16

What exactly is your issue? All 4 social media icons are showing up.

17

Yeah but they are not clickable to external pages I have as hrefs its not working…

 <li id="linkedin" class="icons hvr-buzz-out"><a href="https://www.linkedin.com/company/iog-products"></a></li>
18

http://codepen.io/ryanreese09/pen/zGrMLq

Not a fan of the code but it’s either just make my little changes or recode the entire page :stuck_out_tongue: .

19

So the issue was in the CSS? and you broke these up: what is min-height?

#social_navlist li {

    padding: 0;
    list-style: none;
  display:inline-block;

 
}

 #social_navlist a {
    
    display: block;
   min-height:22px;
   padding:0;
  vertical-align:middle;
  
    
}
20

The issue was basically there was no content in the anchors.