Linking with CSS Image Replacement

**nindustrial** · Sep 22, 2004 13:13

I used a modified form of the Gilder/Levin IR to make the header on my page a link as well. The page is here:

http://www.msue.msu.edu/emergency/new/1minute.html

Everything works just fine, images off you still see text, etc.

My only question now (and I've been playing around with it a bit), is whether or not I can get the actual text to be a link in the case of a user having CSS turned off.

Here's my xhtml:

HTML Code:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>MSU Extension Emergency Management -- 1-Minute Tips Archive</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
<body> 
	<div id="header"> 
		
  <h1 id="title" title="MSUE Emergency Management"><a href="index.html"></a>MSU 
    Extension Emergency Management</h1>
	</div>
	<div id="search"> 
      <!-- Begin siteLevel HTML Searchbox Code -->
    <form method="get" action="http://sitelevel.whatuseek.com/query.go">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td><table cellspacing="0" cellpadding="2" border="0">
              <tr> 
                <td class="sbar" align="left" valign="middle"> Search The Site:</td>
                <td align="center" valign="middle"><input type="hidden" name="crid" value="2b87ca85287802c7" /> 
                  <input id="searchtext" type="text" name="query" size="17" maxlength="100" /></td>
                
              <td id="searchcell" valign="middle" align="right"><input type="image" src="images/searchbutton.jpg" value="Search" name="B1" /></td>
              </tr>
              <!--LB-->
              <!--/LB-->
            </table></td>
        </tr>
      </table>
    </form>
    <!-- End siteLevel HTML Searchbox Code -->
	</div>
	
<div id="contentouter"> 
  <div id="content"> 
    <div id="oneminutearea"> 
      <h2 class="sectionhead">1-Minute Tips Archive</h2>
      <div class="contenttext"> 
        <p>This area allows you to access previous 1-Minute Tip messages. All 
          documents are in Microsoft Word format. Also, the documents are listed 
          in the order of most recent first.</p>
        <ul>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/hurricanes07sep04.doc" target="_blank">Hurricanes</a> 
            (Tue, 07 Sep 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/extensionassistance26aug04.doc" target="_blank"> 
            Extension Assistance after Storm Events</a> (Thu, 26 Aug 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/criticalbloodshortage06jul04.doc" target="_blank"> 
            Critical Blood Shortage</a> (Tue, 06 Jul 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/animalbiosecurity14jun04.doc" target="_blank"> 
            Animal Biosecurity When Exhibiting at Fairs</a> (Mon, 14 Jun 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/morefloodresourcesfromeden09Jun04.doc" target="_blank"> 
            More Flood Resources from EDEN</a> (Wed, 09 Jun 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/floodingandwinddamageinthemid-west24May04.doc" target="_blank"> 
            Flooding and Wind Damage in the Mid-West</a> (Mon, 24 May 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/wildfireseasonpart320apr04.doc" target="_blank"> 
            Wildfire Season Part 3</a> (Tue, 20 Apr 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/michiganwildfirefactorfiction14apr04.doc" target="_blank"> 
            Wildfire Season Part 2</a> (Wed, 14 Apr 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/wildfireseasonpart102apr04.doc" target="_blank"> 
            Wildfire Season Part 1</a> (Fri, 02 Apr 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/ricin12feb04.doc" target="_blank"> 
            Ricin</a> (Thu, 12 Feb 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/whatcausesmadcow16jan04.doc" target="_blank"> 
            BSE Part 2</a> (Fri, 16 Jan 2004)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/bsepart127dec03.doc" target="_blank"> 
            BSE Part 1</a> (Sat, 27 Dec 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/1-minutetipsnowarchived18dec03.doc" target="_blank"> 
            1-Minute Tips Now Archived</a> (Thu, 02 Dec 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/usdacountyemergencyboards02dec03.doc" target="_blank"> 
            USDA County Emergency Boards</a> (Tue, 02 Dec 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/californiawildfires28oct03.doc" target="_blank"> 
            California Wildfires</a> (Tue, 28 Oct 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/msuestafftraining17oct03.doc" target="_blank"> 
            MSUE Staff Training</a> (Fri, 17 Oct 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/familyemergencykits29aug03.doc" target="_blank"> 
            Family Emergency Kits</a> (Fri, 29 Aug 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/northeastpoweroutage14aug03.doc" target="_blank"> 
            Northeast Power Outage</a> (Thu, 14 Aug 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/methlabsincreasing21jul03.doc" target="_blank"> 
            Meth Labs</a> (Mon, 21 Jul 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/communicatingduringdisasterevents09jul03.doc" target="_blank"> 
            Disaster Communication</a> (Wed, 09 Jul 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/whatifred20may03.doc" target="_blank"> 
            What if Red?</a> (Tue, 20 May 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/2003michiganwildfirestatistics25apr03.doc" target="_blank"> 
            2003 Wildfire Stats</a> (Fri, 25 Apr 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/newmsueemergencymanagementwebsite16apr03.doc" target="_blank"> 
            New MSUE Emergency Management Web Site</a> (Wed, 16 Apr 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/wildfire06apr03.doc" target="_blank"> 
            Wildfire Media Packet on the Way to MSUE Offices</a> (Sun, 06 Apr 
            2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/protectingfoodsystem18mar03.doc" target="_blank"> 
            Protecting Food System</a> (Tue, 18 Mar 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/threatconditionlowered27feb03.doc" target="_blank"> 
            Threat Condition Lowered</a> (Thu, 27 Feb 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/whotocontact21feb03.doc" target="_blank"> 
            Who to Contact</a> (Fri, 21 Feb 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/end11feb03.doc" target="_blank"> 
            Exotic Newcastle Disease</a> (Tue, 11 Feb 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/columbia03feb03.doc" target="_blank"> 
            Columbia</a> (Mon, 03 Feb 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/westnilevirus20jan03.doc" target="_blank"> 
            West Nile Virus</a> (Mon, 20 Jan 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/additioninfoonportablegenerators13jan03.doc" target="_blank"> 
            Additional Information About Portable Generators</a> (Mon, 13 Jan 
            2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/portablegeneratorspart213jan03.doc" target="_blank"> 
            Portable Generators Part 2</a> (Mon, 13 Jan 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/portablegeneratorspart102jan03.doc" target="_blank"> 
            Portable Generators Part 1</a> (Thu, 02 Jan 2003)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/riverice15dec02.doc" target="_blank"> 
            River Ice</a> (Sun, 15 Dec 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/drivewayaccess06dec02.doc" target="_blank"> 
            Driveway Access</a> (Fri, 06 Dec 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/shut-offs19nov02.doc" target="_blank"> 
            Shut-Offs</a> (Tue, 19 Nov 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/agrisecurity04nov02.doc" target="_blank"> 
            Agrisecurity</a> (Mon, 04 Nov 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/appresolved23sep02.doc" target="_blank"> 
            App Resolved</a> (Mon, 23 Sep 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/hstraining18sep02.doc" target="_blank"> 
            HS Training</a> (Wed, 18 Sep 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/msueand9-1111sep02.doc" target="_blank"> 
            MSU and 9/11</a> (Wed, 11 Sep 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/completeurl19jul02.doc" target="_blank"> 
            Complete URL</a> (Fri, 19 Jul 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/nationalextensionstaffsurvey18jul02.doc" target="_blank"> 
            National Extension Staff Survey</a> (Thu, 18 Jul 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/firewise12jul02.doc" target="_blank"> 
            Firewise</a> (Fri, 12 Jul 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/givingblood27jun02.doc" target="_blank"> 
            Giving Blood</a> (Thu, 27 Jun 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/imagine02jun02.doc" target="_blank"> 
            Imagine</a> (Sun, 02 Jun 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/Small%20Pox.doc" target="_blank"> 
            Small Pox</a> (Tue, 21 May 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/Tornado%20-%20Part%20IV.doc" target="_blank"> 
            Tornados Part 4</a> (Wed, 15 May 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/tornados-partiii12may02.doc" target="_blank"> 
            Tornados Part 3</a> (Sun, 12 May 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/Tornados%20-%20Part%20II.doc" target="_blank"> 
            Tornadoes Part 2</a> (Thu, 09 May 2002)</li>
          <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/tornados-parti07may02.doc" target="_blank"> 
            Tornadoes Part 1</a> (Tue, 07 May 2002)</li>
        </ul>
      </div>
    </div>
  </div>
</div>
	<div id="footer">
		<p>Copyright &copy; 2004 Michigan State University Extension/Michigan State University
		<br /><a  class="navlink" href="http://www.msue.msu.edu/msue/disclaim.html" target="_blank">Disclaimer</a>, <a  class="navlink" href="http://www.msue.msu.edu/msue/indicia.html" target="_blank">Indicia</a>, 
		and <a  class="navlink" href="http://www.msue.msu.edu/msue/linking.html" target="_blank">Linking Information</a> - Site designed and maintained by <a  class="navlink" href="mailto:engelan1@msu.edu">
		Andrew Engel</a>
		<br />Michigan State University is an affirmative action equal opportunity institution</p>
	</div>
	<div id="navigation"> 
		<h3>Navigation</h3>
		<ul class="navlist">
			<li><a class="navlink" href="index.html">Home</a></li>
			<li><a class="navlink" href="prepare.html">Preparedness</a></li>
			<li><a class="navlink" href="intouch.html">Get In Touch</a></li>
			<li><a class="navlink" href="hottopics.html">Hot Topics</a></li>
			<li><a class="navlink" href="spanish.html">En Espa&ntilde;ol</a></li>
			<li><a class="navlink" href="sitemap.html">Site Map</a></li>
		</ul>
		<h3>Quick Links</h3>
		<ul class="navlist">
			<li><a class="navlink" href="http://www.agctr.lsu.edu/eden/" target="_blank">EDEN</a></li>
			<li><a class="navlink" href="http://www.agctr.lsu.edu/eden/Resources/onlineext.aspx" target="_blank">
			Extension Websites</a></li>
			<li><a class="navlink" href="http://www.michigan.gov/msp/0,1607,7-123-1593_3507-15509--,00.html" target="_blank">
			Local EM Contacts</a></li>
			<li><a class="navlink" href="http://www.redcross.org" target="_blank">Red Cross</a></li>
		</ul>
		
  <div id="updates"> 
    <h4 id="updtitle">Updates</h4>
    <p class="updtext">9.08 - New site launched.</p>
    <p class="updtext"><a href="older.html">Older Updates...</a></p>
  </div>
	</div>
</body>
</html>

And here's the CSS for the relevant portion:

HTML Code:

/* Header Portion */
	
h1#title {
	width: 760px;
	height: 100px;
	position: relative;
	margin-bottom: 0px;
	}
	
h1#title span{
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	}
	
h1#title a {
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	}

(That extra CSS for the span is used when I don't want the header to link... such as on the home page, so instead I use a span)

Thanks for any help.

**nindustrial** · Sep 22, 2004 14:09

Hm... I seem to have figured out how to do it. This comes after working a different area and trying to create a link in only a portion of the parent element. As such, I used the float command and then started messing around with that for the banner to see what I could do. Here's the page:

http://www.msue.msu.edu/emergency/new/1minute.html

Here's the new XHTML:

HTML Code:

  <h1 id="title" title="MSUE Emergency Management"><a class="headlink" href="index.html"></a><a href="index.html">MSU 
    Extension Emergency Management</a></h1>
	</div>

and here's the new CSS:

HTML Code:

/* Header Portion */
	
h1#title {
	width: 760px;
	height: 100px;
	position: relative;
	margin-bottom: 0px;
	}
	
a.headlink {
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	position: relative;
	float: left;
	width: 760px;
	height: 100px;
	margin-bottom: -100px;
	z-index: 1;
	}

Now if anyone could explain exactly why this happened to work, or has any suggestions for a cleaner way to do it, I'd love to hear.

**vgarcia** · Sep 22, 2004 14:23

I'd say don't do image replacement and just use <img /> tags. The image is part of the document structure in this instance since you want them to behave like links, so image replacement is a waste of time and could cause more accessibility problems than it helps.

**Xerxos** · Sep 22, 2004 21:42

life would be so much easier with IE supporting PNG alfa-channel

you could just take the text of the logo, save it as transparent png and put it into the img, then save the background and put it as the background for it.. that would be the best solution, but sadly...

User Tag List

Thread: Linking with CSS Image Replacement

Thread Tools

Display

Hybrid View

Linking with CSS Image Replacement

Bookmarks

Bookmarks

Posting Permissions