STYLE SHEETS

Using Fahrner`s Improved Image Replacement Method with Hyperlinks

In this ninth part of the series, I show how to implement the improved version of Fahrner’s image replacement method for polishing the visual presentation of some <a> elements. The whole styling process is very straightforward, so you should easily be able to apply it when creating your own web pages.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

December 09, 2009

TABLE OF CONTENTS:

As usual, before I begin discussing how to implement the improved version of Fahrner’s image replacement approach, I'm going to take a quick look at the example built in the previous article. In that one I explained how to use this same method for styling the H2 elements included in an XHTML document.

So, let me show you the background image that was utilized to decorate the H2 headers. Here it is:

This method bases its functionality on positioning a background graphic over the text of the selector, which implies that the graphic in question shouldn’t contain any transparent sections. The above image fits this requirement, so now let's look at the sample web page that performs the corresponding image replacement:

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

<head>

<title>Variation of Fahrner Image Replacement (FIR) 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 {

position: relative;

width: 400px;

height: 200px;

margin: 0;

padding: 0;

overflow: hidden;

}

#header h1 span {

display: block;

position: absolute;

left: 0;

top: 0;

z-index: 1;

width: 400px;

height: 200px;

margin: 0;

padding:0;

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

}

/* apply image replacement on H2 elements */

h2 {

position: relative;

width: 300px;

height: 150px;

margin: 0;

padding: 0;

overflow: hidden;

}

h2 span {

display: block;

position: absolute;

left: 0;

top: 0;

z-index: 1;

width: 300px;

height: 150px;

margin: 0;

padding: 0;

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

}

</style>

</head>

<body>

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

<h2>Main content section<span></span></h2>

</div>

<h2>Footer section<span></span></h2>

</div>

</body>

</html>

As you can see from the previous code sample, this version of Fahrner’s method makes use of two empty, absolutely positioned <span> tags to mask the text of the styled web page elements. In the earlier example, the elements turned out to be H1 and H2 headers respectively, but it’s possible to follow the same approach with other selectors as well.

Therefore, in the next section I’ll be explaining how to use the previous image replacement method for improving the visual appearance of a few links. So click on the link below and keep reading.

Next: Improving the visual presentation of some web page links >>