Spanning H2 Elements for Image Replacement - The finished version of the sample web document
(Page 4 of 4 )
If you’re anything like me, then surely you’ll want to see how the CSS snippet created in the previous segment can be tied to the structure of a simple web page. Taking into account this possibility, below I coded such a page for you, so you can see how all of its H2 elements are neatly decorated with my humble background image. Here’s how this web page looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fahrner Image Replacement (FIR) on H1 and H2 elements</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #fff;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #ffc;
}
#header, #content, #footer {
padding: 20px;
}
/* apply image replacement on H1 element */
#header h1 {
width: 400px;
height: 200px;
margin: 0;
padding: 0;
background: url(h1.png) top left no-repeat;
}
#header h1 span {
display: none;
}
/* apply image replacement on H2 elements */
h2 {
width: 300px;
height: 150px;
margin: 0;
padding: 0;
background: url(h2.png) top left no-repeat;
}
h2 span {
display: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><span>Welcome to our website</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
<div id="content">
<h2><span>Main content section</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
<div id="footer">
<h2><span>Footer section</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
</div>
</body>
</html>
There you have it. Now, if you’re feeling eager and want to see if this image replacement approach really works as expected, then go ahead and test this sample code on your own browser. If all goes well, you should get an output similar to the one depicted below:
Well, it worked, right? So at this point you've learned yet another IR method, which is pretty easy to implement, even at the expense of coding here and there some additional <span> elements. However, it’s fair to mention that this particular implementation of the previous method is somewhat outdated, since there exists an improved version of it. So, if you want to learn more about this, jump forward and read the article’s bottom line.
Final thoughts
How time flies! In a flicker of the eye we’ve come to the end of this fifth part of the series. Overall, the experience has been quite educational, as you learned how to implement Todd Fahrner’s image replacement method with all of the H2 elements of a basic web page.
As you saw for yourself, this approach is slightly harder to apply due to the fact that it requires you to code two <span> tags per element being styled, which is an additional burden -- and leads to writing sections of markup with no true semantic meaning.
But before I hear your loud complaints, allow me tell you that this method has been largely enhanced over time, and its improved version is quite possibly the most popular among web designers nowadays. For the moment I’ll keep exploring it as it was originally developed, so in the next tutorial I’ll be showing how to use it with some <a> elements.
Don’t miss the tutorial to come!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
