STYLE SHEETS

Assigning Negative Indentation to Hyperlinks for Image Replacement

In this third part of a six-part series on image replacement techniques, I demonstrate how easy it is to apply the image replacement method developed by Mike Rundle simultaneously to H1, H2 and <a> elements on the same XHTML page.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

November 24, 2009

TABLE OF CONTENTS:

Just in case you haven't read the previous installment of the series, where I discussed how to use the IR method mentioned in the introduction with H1 and H2 elements of a sample web page, below I listed the source code of this example page, along with the background images used for styling the headers.

Here’s the XHTML file utilized to implement the image replacement approach:

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

<head>

<title>Mike Rundle'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: 200px;

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

text-indent: -9999px;

}

/* apply image replacement on H2 elements */

h2 {

width: 300px;

height: 150px;

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

text-indent: -9999px;

}

</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 shown before, giving a more refreshing appearance to the H1 and H2 headers of the previous web document was only a matter of negatively indenting the headers’ inner text, while keeping their respective background images visible. And now that I've mentioned background images, below you can see the ones that were used in the earlier example:

Frankly speaking, I have to admit that my graphic skills aren’t very impressive. However, for educational purposes the above images do a decent job of explaining the logic that drives this image replacement method.

What’s more, if you still have any doubts regarding the effectiveness of this IR method, then you should take a look at the following screen capture, which shows the visual style that was given to the targeted H1 and H2 headers:

That looks pretty appealing, doesn’t it? We’re not done with this approach, though, as its inherent flexibility allows us to style other text-based web page elements. That includes hyperlinks, of course. Therefore, it’s time to see how to use the same approach implemented with a few inline links.

Want to learn more on how this will be done? Then click on the link below and keep reading.

Next: Adding a fancier style to some web page links >>