Display Block Execution

[Siebird]

I have linked h2 elements in a billboard type display. I want the rollover effect to work if you rollover anywhere on the element even the background image. You can see it in action here.

HTML:

<div id="billboard">
			<h2 id="ad_postframe"><a href="#" title="Post Frame">Post Frame</a></h2>
			<h2 id="ad_residential"><a href="#" title="Residential">Residential</a></h2>
			<h2 id="ad_archcomm"><a href="#" title="Architectural/Commercial">Architectural/Commercial</a></h2>
				<div class="clear">&nbsp;</div>
		</div>

CSS:

#billboard {
	position: relative;
	margin: 2px;
	width: 838px;
	height: 323px;
	background: #FFF;
	border: 2px solid #333;
}
 
#billboard h2 {display: block;text-indent: -9000px}
 
#ad_postframe {
	position: relative;
	display: block;
	margin: 2px 0 2px 2px;
	float: left;
	width: 277px;
	height: 319px;
	background: url(../layout/billboard-postframe.jpg) no-repeat;
}
 
#ad_residential {
	position: relative;
	margin: 2px 2px 2px 2px;
	float: left;
	width: 277px;
	height: 319px;
	background: url(../layout/billboard-residential.jpg) no-repeat;
}
 
#ad_archcomm {
	position: relative;
	margin: 2px 2px 2px 0;
	float: right;
	width: 276px;
	height: 319px;
	background: url(../layout/billboard-archcomm.jpg) no-repeat;
}
 
#ad_postframe a:link, #ad_postframe a:visited, #ad_postframe a:hover, #ad_postframe a:active,
#ad_residential a:link, #ad_residential a:visited, #ad_residential a:hover, #ad_residential a:active,
#ad_archcomm a:link, #ad_archcomm a:visited, #ad_archcomm a:hover, #ad_archcomm a:active {
	margin: 0 0 0 10px;
	display: block;
	width: 40px;
	height: 319px;
	overflow: hidden;
	text-decoration: none;
	background-repeat: no-repeat;
}
 
#ad_postframe a {background: url(../layout/billboard-btn-postframe.png) no-repeat;}
#ad_postframe a:hover {background: url(../layout/billboard-btn-postframe-on.png) no-repeat;}
#ad_residential a {background: url(../layout/billboard-btn-residential.png) no-repeat;}
#ad_residential a:hover {background: url(../layout/billboard-btn-residential-on.png) no-repeat;}
#ad_archcomm a {background: url(../layout/billboard-btn-archcomm.png) no-repeat;}
#ad_archcomm a:hover {background: url(../layout/billboard-btn-archcomm-on.png) no-repeat;}

[Centauri]

If you make the <a> elements the same size as the <h2> elements, you can set background-position: 10px top; which will display the vertical bar in the same spot, but have the whole area as the link. However, on the # a and # a:hover styles, declare background-image rather than background, and remove the no-repeat, as this will cause the position to default.

Also, instead of the large list of a:link a:visited etc., the <a> tags can be targeted simply by #billboard a { }

[Siebird]

Also, instead of the large list of a:link a:visited etc., the <a> tags can be targeted simply by #billboard a { }

Thanks, everything worked, but I tried targeting just the #billboard a { } and the images wouldn't show. So I put the long list back in and works perfectly!