DaBrook.orgLearning Resource for
Web Design and IB ITGS

Posted: Fri, March 07, 08

The Shea Enhancement

This method was taken from CSSguru, David Shea's, article "Revised Image Replacement."

Copy and paste the code below into a new document in your playground folder called "image-replacement.hml"

<h3 id="header" title="Revised Image Replacement"> 	
	<span></span>Revised Image Replacement 
</h3> 

#header { 	
	width: 329px; 	
	height: 25px; 	
	position: relative; 	
	} 

#header span { 	
	background: url(http://tinyurl.com/3b9yyu) no-repeat; 	
	position: absolute; 	
	width: 100%; 	
	height: 100%; 	
}

The end result should look like this example.  Using your web developer toolbar in Firefox, try disabling the css.  What happens?  Try disabling images.  What happens?

Upload your "image-replacement.html" file to welovewebdesign.com

Apply to Your Own Site

Open up your two column layout from the last tutorial. We are going to use the css and html markup from the example above and apply it to own our two column layout pages.

Here is what you need to do:

1. Create two images that can work as headers.
   1. The first is for the h2 tags.  It should be 400 x 50px.
   2. The second is for the h3 tags.  It should be 400 x 25px.
   3. Same into your images folder inside of a new folder called "image-replacement"
2. Add the extra markup to your <h2> and <h3> headers in your two column layout.
   1. Add an id attribute.
   2. The id for the h2 tag should be header2
   3. The id for the h2 tag should be header3
   4. Add an empty span tag.
3. Modify the css
   1. Change #header to #header2
   2. Duplicate the two rules and change from #header2 to header3
   3. Change the link to the image to the image that you made.

Upload your html file and images to We Love Web Design.  Your page should look something like this example.