STYLE SHEETS

Langridge`s Image Replaceement Technique: A Final Look

Welcome to the final part of a 12-part series on image replacement techniques. By means of a strong hands-on approach, this series helps you start using these methods so you can add a fresh, appealing look to different text-based elements of your web pages, without having to sacrifice the cleanness of their structural markup.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

December 16, 2009

TABLE OF CONTENTS:

In the previous tutorial, as I mentioned, I showed how to use Langridge’s image replacement method for giving a more appealing presentation to H2 elements of an XHTML document. In case you haven't read it, below I listed the source code corresponding to this example, so you can understand how it works.

Here’s the example in question, along with the background image used for decorating the H2 headers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Stuart Langridge's image replacement on H1 and H2 elements</title>

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: 0;

padding-top: 200px;

background: url(h1.png) top left no-repeat;

overflow: hidden;

}

/* apply image replacement on H2 elements */

h2 {

width: 300px;

height: 0;

padding-top: 150px;

background: url(h2.png) top left no-repeat;

overflow: hidden;

}

</style>

</head>

<body>

<h1>Welcome to our website</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>

<h2>Main content section</h2>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As I stated in the introduction, Langridge’s approach bases its functionality on reducing the height of the targeted web page element to zero (0), while the background image is neatly displaced to the visible area by means of the “padding-top” property. This somewhat tricky use of these properties produces the following result, when the previous XHTML document is rendered by the browser:

Well, that worked pretty well! Considering that this method doesn’t demand writing any extra markup, its performance is more than acceptable. What’s more, its flexibility allows it to be used with different text-based HTML elements, other than boring H2 headers. Thus, it’s time to demonstrate how easy it is to apply this approach to some basic web page links.

But guess what? The full details of this process will be discussed in the following segment, so click on the link below and keep reading.

Next: Using Langridge's technique with hyperlinks >>