Using an image sprite with just icons

Here you have the container with the links inside:

<div class="container">
  <a class="facebook" href="foo.html" target="_blank"></a>
  <a class="twitter" href="foo.html" target="_blank"></a>
  <a class="instagram" href="foo.html" target="_blank"></a>
  <a class="pinterest" href="foo.html" target="_blank"></a>
</div>

And this is the CSS part:

.container {
  width: 233px;
  height: 50px;
}

.facebook,
.twitter,
.instagram,
.pinterest {
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer;
}

.facebook {
  background: url("https://i.imgur.com/Cp7WRET.png") no-repeat;
}

.twitter {
  margin: 0 11px;
  background: url("https://i.imgur.com/MchCG7F.png") no-repeat;
}

.instagram {
  background: url("https://i.imgur.com/3FPoPUy.png") no-repeat;
}

.pinterest {
  margin-left: 11px;
  background: url("https://i.imgur.com/IuKZk48.png") no-repeat;
}

If I’m not using an image sprite, I should do it like this then?

Better?

.container {
  width: 245px;
  height: 50px;
}

.facebook,
.twitter,
.instagram,
.pinterest {
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer;
}

.twitter {
  margin: 0 15px;
}

.pinterest {
  margin-left: 15px;
}

<div class="container">
  <a class="facebook" href="foo.html" target="_blank"><img src="https://i.imgur.com/Cp7WRET.png" alt="Facebook"/></a>
  <a class="twitter" href="foo.html" target="_blank"><img src="https://i.imgur.com/MchCG7F.png" alt="Twitter"/></a>
  <a class="instagram" href="foo.html" target="_blank"><img src="https://i.imgur.com/3FPoPUy.png" alt="Instagram"/></a>
  <a class="pinterest" href="foo.html" target="_blank"><img src="https://i.imgur.com/IuKZk48.png" alt="Pinterest"/></a>
</div>

Yes that’s better as you now have image content and everyone will know what the content is. Background images should only be used for decoration (unless you use an image replacement technique like cootheead has shown).

You can now reduce all that css to this only.

.container {display:table;}
.container a,.container img{float:left;}
.container a{margin-right:15px;}
.container a:last-child{margin:0;}

You may need to remove the text-decoration:underline on the anchors for some browsers and remove the border from the image itself for older IE browsers as they apply a blue border to images that are inside links.

Semantically speaking though you have a list of social icons and even though it is more code the html structure would be better as a ul as in the example from @coothead.

In older browsers screen readers will read a series of adjacent anchors as a sentence without pausing. In a list structure they will pause between each link. These days most screen readers (apparently) do not have this issue but I still like to use the ul structure anyway as it looks neater and reads more easily when scanning through the html.

2 Likes

Without display: table;

.container {
  width: 245px;
  height: 50px;
  background: red;
  text-decoration: none;
}

.container a {
  float: left;
}

With display: table;

.container {
  display:table;
  width: 245px;
  height: 50px;
  background: red;
  text-decoration: none;
}

.container a {
  float: left;
}

https://i.imgur.com/6UxYZti.png

That’s not the code I gave you. You can’t just omit important parts then wonder why it doesn’t work!

I floated the image to kill the white space under the inline image which as been mentioned a thousand times before.

Your example works because you cut off the height of the container with a fixed height. Look at my example it needs no widths or heights at all. It could easily be adapted to images of greater size without changing any css.

2 Likes

If there’s no set width then this happens.

.container {
  display: table;
  background: red;
  text-decoration: none;
}

.container a {
  float: left;
}

display:table without a width is a shrink to fit (shrinkwrap) container, the same behavior is seen with float or inline-block when they are widthless.

When the .container width gets below the total width of child elements then the floated children drop down to a new line. That same behavior would also be seen if the .container was display:block without a width.

1 Like

Then I won’t use a display then.

This one doesn’t use a display.

and it doesn’t break into pieces.

In the real world web pages need to adapt to the viewport width. That means they need to be fluid and flexible, items dropping to a new line is common practice as that is how you avoid horizontal scrollbars.

Your living in a fixed width world, and in reality yours is the one that breaks since it does not adapt and respond to any device.

2 Likes

It stays here and the size never changes: It’s a fixed area.

Also, the right sidebar doesn’t show up on mobile devices, so there’s nothing to shrink.

Your missing the point.

If everything you code has a fixed width that is less than 300px then yes it very well may work on a mobile device.

But that is not a real solution in web design

1 Like

the right sidebar doesn’t show up on mobile devices

Meaning:

This is automatically omitted.
The whole right side bar is omitted.

Only the individual posts appear.

Is this what you mean?

.container {
  display: table;
  background: red;
  text-decoration: none;
}

.container a {
  float: left;
  height: 50px;
}

This is what you meant.

.container {
  display: table;
  background: red;
  text-decoration: none;
}

.container a,
.container img {
  float: left;
}

.container a {
  margin-right: 15px;
}

.container a:last-child {
  margin: 0;
}
1 Like

Here’s another way of doing an image sprite.

.container {
  display: table;
  background: red;
}

.container a {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 15px;
  padding: 0;
  text-indent: -9999em;
  background-color: transparent;
  background-image: url(https://i.imgur.com/f0kjtsJ.png);
  background-repeat: no-repeat;
}

.container a:last-child {
  margin: 0;
}

.facebook {
  background-position: 0 0;
}

.twitter {
  background-position: -50px 0;
}

.instagram {
  background-position: -100px 0;
}

.pinterest {
  background-position: -150px 0;
}

<div class="container">
  <a class="facebook" href="" target="_blank">facebook</a>
  <a class="twitter" href="" target="_blank">twitter</a>
  <a class="instagram" href="" target="_blank">instagram</a>
  <a class="pinterest" href="" target="_blank">pinterest</a>
</div>

Yes a less. accessible way. If the user has images turned off or images are broken or missing then you get no content at all.

You have again managed to dilute a good technique into a lesser one :slight_smile:

2 Likes

How come [margin-right: 15px;] Isn’t working here?

.icon-social {
  display: inline-block;
  text-align: left;
  text-indent: -9999px;
  vertical-align: middle;
}

.social-links {
  width: 245px;
  height: 50px;
  margin: 0;
  list-style: none;
}

.social-links a {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 15px;
  background-image: url("https://i.imgur.com/wzEavBV.png");
  background-repeat: no-repeat;
  color: transparent;
}

.social-links a:last-child {
  margin: 0;
}

.icon-facebook {
  background-position: 0 0;
}

.icon-twitter {
  background-position: -50px 0;
}

.icon-instagram {
  background-position: -100px 0;
}

.icon-pinterest {
  background-position: -150px 0;
}




<ul class="social-links">
  <li><a class="icon-social icon-facebook" href="" title="Facebook" target="_blank">Facebook</a></li>
  <li><a class="icon-social icon-twitter" href="" title="Twitter" target="_blank">Twitter</a></li>
  <li><a class="icon-social icon-instagram" href="" title="Instagram" target="_blank">Instagram</a></li>
  <li><a class="icon-social icon-pinterest" href="" title="Pinterest" target="_blank">Pinterest</a></li>
</ul>

Like this then?

.social-links a {

.social-links li:last-child {
.social-links a {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 15px;
  background-image: url("https://i.imgur.com/wzEavBV.png");
  background-repeat: no-repeat;
  color: transparent;
}

.social-links li:last-child {
  margin: 0;
}

Hi there asasass

I don’t believe, after all these posts of yours, that
anyone really cares if you code works or not. :unhappy:

And repeatedly seeing this…

  text-indent: -9999px;

…is a real pain in the arse. :eyebrows:

But then I do have a sneaky suspicion that you
actually revel in playing the devil’s disciple. :imp:

coothead

3 Likes