SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display Block Execution

    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:
    Code HTML4Strict:
    <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:
    Code 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;}

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 { }

  3. #3
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •