jebaird.com

While working on one of my newer projects I ran into an issue where I needed to overlay a very large image over multiple elements on my page, including the site navigation. This left the contact link on the far right un-clickible.

Part of the page html

 <div id="topNav">
                <ul>
                <li id="phones"><a href="#" title=""></a></li><li id="plans"><a href="#" title="plans">plans</a></li><li id="extras"><a href="#" title="extras">extras</a></li><li id="locations"><a href="#" title="locations">locations</a></li><li id="contact"><a href="#" title="contact us">contact us</a></li>                </ul>
            </div>
        </div>
			<div id="contentWrapper" class="index"><!--add a class to this to make the inner elements-->
			<h2>welcome</h2>
<div id="leftCol">
</div>
<div id="content">
		
<a href="#" id="learnMoreAboutInMessaging"><img src="images/learn_more_about_inmessaging.png" alt="learn mor about inMESSAGING"></a>		

<img class="contentRightImg" src="images/index_phone_woman.png" alt="woman talking on a">		

</div>

the css

div.index #content img.contentRightImg{

topNav{
	background: #a39d9e url('images/top_nav_bg.png') no-repeat;
	height: 21px;
	padding: 12px 10px 0px;
	overflow: hidden;
}

#topNav ul{
	list-style: none;
}
#topNav ul li{
	display: block;
	float: left;
	margin-right: 11px;
	height: 13px;
	width: 91px;
}
#topNav ul li a{
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -999999px;
	background: transparent url('images/top_nav_li_bg.png') no-repeat 0px 0px;
}

#topNav ul li#phones a{
	background-position: 0px 100%;
}
#topNav ul li#phones a:hover,#topNav ul li#phones a.active{
	background-position: 0px 0px;
}
#topNav ul li#plans{
	width: 82px;
}
#topNav ul li#plans a{
	background-position: -102px 100%;
}
#topNav ul li#plans a:hover,#topNav ul li#plans a.active{
	background-position: -102px 0px;
}
#topNav ul li#extras a{
	background-position: -193px 100%;
}
#topNav ul li#extras a:hover,#topNav ul li#extras a.active{
		background-position: -193px 0px;
}
#topNav ul li#locations{
	width: 130px;
}
#topNav ul li#locations a{
		background-position: -296px 100%;
}
#topNav ul li#locations a:hover, #topNav ul li#locations a.hover{
	background-position: -296px 0px;
}
#topNav ul li#contact{
	width: 100px;
	margin: 0px 0px 0px 170px;
}
#topNav ul li#contact a{
	background-position: right 100%;
}
#topNav ul li#contact a:hover, #topNav ul li#contact a.hover{
	background-position: right 0px;
}


#contentWrapper{
	margin-bottom:8px;
	height: auto;

}

#leftCol{
	width: 192px;
	height: 266px;
	background: #881119 url('images/left_col_red_bg.png') no-repeat; 
	float:left;
	display: inline;
}

#content{
	height: 266px;
	float: right;
	display: inline;
	width: 530px;
	background: #C64141 url('images/content_red_bg.png') no-repeat;
	/*background: #C64141 url('images/content_gay_bg.png') no-repeat;*/
}
img.contentRightImg{
	position: relative;
	left:100px;
	bottom: 110px;
	
	
}
/* page layout only styles */

div.index #leftCol{
	display: none;
}
div.index #content{
	width: 730px;
	background: #C64141 url('images/index_content_bg.png') no-repeat;
}
div.index #content a#learnMoreAboutInMessaging{
	position: relative;
	left:140px;
	bottom: 265px;
}
div.index #content img.contentRightImg{
	left:100px;
	bottom: 110px
	
}
position: relative;
	left:100px;
	bottom: 110px
	
}

Which looks like this when its rendered

After trying multiple times trying to get the zindex to work I decided to just assign the image a map over where it was covering the contact link.  The great thing about this "hack" is that it still keeps valid html and css.

<img class="contentRightImg" src="images/index_phone_woman.png" alt="woman talking on a" usemap="#imap_83">		

<map id="imap_83" name="imap_83" >
  <area shape="rect" coords="256,40,434,118" alt="contact us" title="contact us" href="contact.php">
</map>