I was asked to make some minor changes to a website.
Upon reviewing the source code, I immediately began looking around for breakable objects.
And here's why.
Bad HTML

<div id="header">
<div id="header_container">
<div id="home"><a href="index.php">Home</a></div>
<div id="facebook"><a target="_blank" href="https://www.facebook.com/musicnowentertainment">Facebook</a></div>
<div id="youtube"><a href="mailto:[email protected]">[email protected]</a></div>
<...more bad code...>

Bad CSS

#facebook {
	position: absolute;
	top: 88px;
	left: 905px;
	width: 27px;
	height: 28px;
}
#facebook a {
	display: block;
	text-indent: -9999px;
	width: 100%;
	height: 100%;
}
#youtube {
	position: absolute;
	top: 87px;
	left: 949px;
	width: 29px;
	height: 28px;
}
#youtube a {
	display: block;
	text-indent: -9999px;
	width: 100%;
	height: 100%;
}

Notice there're no images? Oh. That's because the #header has everything in one giant graphic.

#header {
	position: relative;
	background: url(../images/Layout_Header.jpg) no-repeat center top;
	height: 421px;
}

That's right. All the links are placed as invisible containers above a header graphic with the text moved out of view.
How about we do this the non-n00b way.
Better HTML (remove unnecessary elements, add icon class)

<a class="home" href="/">Home</a>
<a class="youtube icon" href="//www.youtube.com/musicnowent " target="_blank">Youtube</a>
<a class="facebook icon" href="//www.facebook.com/musicnowentertainment" target="_blank">Facebook</a>
<a class="mail icon" href="mailto:[email protected]">[email protected]</a>

Because DRY.
New CSS

.icon { position: absolute; height: 32px; width: 32px; display: block; top: 88px; overflow: hidden; }
.facebook.icon { left: 850px; }
.youtube.icon { left: 902px; }
.youtube.icon img { margin-left: -64px; }
.mail.icon { left: 954px; }
.mail.icon img { margin-left: -32px; }

It's okay if the above CSS attracts you sexually a little bit.
Even better HTML (use images and alt instead of text)

<a class="home" href="/"><img src="images/logo.png" alt="home" /></a>
<a class="youtube icon" href="//www.youtube.com/musicnowent " target="_blank"><img src="images/icons/youtube.png" alt="Youtube" /></a>
<a class="facebook icon" href="//www.facebook.com/musicnowentertainment" target="_blank"><img src="images/icons/facebook.png" alt="Facebook" /></a>
<a class="mail icon" href="mailto:[email protected]"><img src="images/icons/mail.png" alt="[email protected]" /></a>

Why? Because Google hates -9999px text-indent you spammer!  And what about when we have 235235 x 1204124 pixel monitors? That text isn't actually gone. It's floating somewhere off the edge.
Even more better HTML (use image sprites)

<a class="home" href="/"><img src="images/logo.png" alt="home" /></a>
<a class="youtube icon" href="//www.youtube.com/musicnowent " target="_blank"><img src="images/icons.png" alt="Youtube" /></a>
<a class="facebook icon" href="//www.facebook.com/musicnowentertainment" target="_blank"><img src="images/icons.png" alt="Facebook" /></a>
<a class="mail icon" href="mailto:[email protected]"><img src="images/icons.png" alt="[email protected]" /></a>

Why? This cuts down on HTTP requests for each image. Instead, we use a single image with the icons laid out in a grid. Then we adjust the visibility using negative margins.
Here's what a sprite graphic looks like:

(I added a black background so the mail icon is visible)
Here's the cleaned up header graphic:

And here's the final "clean" product

Other cool stuff that I'm going to tease you with but not tell you how to do (yet?):

• With the sprite method it's extremely easy to add rollover effects (with css) and animation (using the spritely jQuery plugin)


• Using a single image for your icons makes it super easy to change icon themes without touching a character of code!


• Using a common icon class makes changing sizes and positions laughably simple. Haha. Done.

This post is only meant to quickly provide an example.
If you have any questions, please ask!