STYLE SHEETS

Using the Padding-Top CSS Property with H2 Headers for Image Replacement

In this penultimate installment of the series, I demonstrate how to apply Langridge’s image replacement method to all of the H2 headers of a trivial XHTML document. The inner workings of this approach are very easy to grasp, so you shouldn’t have major problems using it within your own web pages.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

December 15, 2009

TABLE OF CONTENTS:

As usual, before I show how to implement Langridge’s method with all of the H2 elements of a web page, I'd first like to reintroduce the example developed in the previous tutorial of the series, which demonstrated how to apply this approach to an H1 header. This brief summary hopefully will help you catch on to the inner workings of this method very quickly.

With that being said, here’s the code sample that shows the functionality of Langridge’s technique:

<!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 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;

}

</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 you can see, the implementation of Langridge’s method with a single H1 element is indeed simple. It uses the “padding-top” property to display the corresponding background image, and at the same time hides the inner text by reducing the element’s height to 0. This tricky manipulation of the header’s properties produces the following output on the browser:

That looks pretty neat, eh? Considering that this method doesn’t demand writing any extra markup, it performs pretty well. However, as I said in the introduction, it’d be useful to implement it with different text-based web page elements, to show you how flexible this approach can be.

With that idea in mind, in the following section I’ll be explaining how to apply Langridge’s image replacement method to all of the H2 elements of the previous web page. Therefore, jump ahead and read the next segment. It’s only one click away.

Next: Extending Langridge's method to H2 headers >>