Image as a link

[Gainax]

I have 3 classes in mycode, which uses a background image in the CSS. (3 classes, 3 diff images)

 

I want the image to act as a link.

 

My code is as follows:

 

              <h2 class="dashboard-facilities-header">Facilities</h2>
                <div>
                  <p class="dashboard-desc">Here you can add/edit your profile that everyone can see!</p>
               </div>
            </div>  
            
            <div class="user-dashboard-boxes">
              <h2 class="dashboard-teams-header">Teams & Clubs</h2>
                <div>
                  <p class="dashboard-desc">Here you can add/edit your profile that everyone can see!</p>
               </div>
            </div>
            
            <div class="user-dashboard-boxes">
              <h2 class="dashboard-events-header">Events</h2>
                <div>
                  <p class="dashboard-desc">Here you can add/edit your profile that everyone can see!</p>
               </div>
            </div>

 

	
h2.dashboard-facilities-header {background-image:url(../images/dashboard-facilities-header.png);background-repeat:no-repeat;height:25px;text-indent:-9999px;}
h2.dashboard-teams-header {background-image:url(../images/dashboard-teams-header.png);background-repeat:no-repeat;height:25px;text-indent:-9999px;}
h2.dashboard-events-header {background-image:url(../images/dashboard-events-header.png);background-repeat:no-repeat;height:25px;text-indent:-9999px;}

 

All help is welcome

[gevans]

If you want to use it as a link you either need to use an anchor tag, or javascript

[dbrimlow]

What you want is to make the "link" a block - not the image. This will set the link to the width and height of the box itself. It also allows you to use the  feature for an a:hover element on for the entire box (like switching images, generating borders, etc).

 

You didn't show the link your html, it needs to be there - css is not a programming language, it just designates how things look (not act) on the page.

 

So the "a:link" element and the "a:hover" element both only designate how those respective links look. And when you set a:hover to LOOK different than "a:link", it only gives the illusion of what a programming language does, by changing the way a:hover looks.

 

Also, If you can, try to lose all unnecessary "divs" -  keep it to the semantic h1 - h6, p, ul, ol, dl, li elements. Only toss in the extra div when you need to style multiple semantic elements within one parent container. Always think of a "div" simply as a placeholder for a group of related semantic and markup elements.

 

So, since you didn't show the link (but used the class in the h2) we must assume you want the h2 element to use the image and be the link. So just set those elements to make the block the size of your image (replace width with the actual width).

 

/* THE CSS: */

h2.dashboard-facilities-header a:link, h2.dashboard-facilities-header a:visited {
display: block; 
width:100%; 
height:25%; 
background: url(../images/dashboard-facilities-header.png) no-repeat
}

/* THE HTML: */

<h2 class="dashboard-facilities-header"><a href="facilities.php>Facilities</a></h2>
      <p class="dashboard-desc">Here you can add/edit your profile that everyone can see!</p>

 

Just remember that any deviation in the styling of actual text for the h2 element should be separate than the styling for the h2 a elements. Margins, paddings, borders, underlining, etc. all will affect the box, and therefore, the dimensions of the visible background image. You may also need to designate color or any other visual changes you want from your css defaults for those elements.  Scalability is the key to well-planned css. What you want to get a small element like this one working should not cause problems later when you are using the CSS for multiple pages.

 

Play around with it to get it working the way you want, so you will know what you can and can't get away with. The cheap and exponentially code-adding quick-fix of slapping on an extra div around the h2 is always available - but your page will become very heavy very quickly when you cheat by using divs.

 

THE CHEAT (using divs instead of semantic classes):

/* THE CSS: */

.dashboard-facilities-header a:link, .dashboard-facilities-header a:visited {
display: block; 
width:100%; 
height:25%; 
background: url(../images/dashboard-facilities-header.png) no-repeat
}

/* THE HTML: */

<div class="dashboard-facilities-header">
<h2><a href="facilities.php>Facilities</a></h2>
</div>
      <p class="dashboard-desc">Here you can add/edit your profile that everyone can see!</p>

 

Good luck.