Making all of this div content a hyperlink. What is the correct approach?

gribbs100 · 02-10-2012, 03:12 PM

Hello Guys,
Below is a rough example of what I am trying to accomplish. When you hover over the div, the background color changes. I also want to make the entire row a hyperlink. Now we all know that a div is a block element and cannot be inside of a href=... so I have to come up with another way to make the whole thing a link. The only solution that I came up with (not applied in the code below) is to have a transparent png image positioned absolute z-index:999 inside + over each entire container and make that a link. Is there a better way though? I really wanted to do this with a html + css approach. I didn't want to have to go a javascript route.Thanks in advance for any suggestions.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-</title>
<style type="text/css">
body {
	background-color: #131313;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
}
#gallery-box {
	width: 630px;
	margin: 0px;
	float: left;
	line-height: 30px;
	overflow: auto;
}
.directory1 {
	background-color: #1c1d1e;
	float: left;
	width: 610px;
}
.directory2 {
	background-color: #121315;
	float: left;
	width: 610px;
}
.event-title {
	width: 195px;
	margin-right: 5px;
	float: left;
	padding-left: 5px;
}
.city {
	float: left;
	height: 30px;
	width: 200px;
	margin-right: 5px;
}
.date {
	float: left;
	height: 30px;
	width: 200px;
}
.directory1:hover {
	background:#fff;
	color:#000;
}
.directory2:hover {
	background:#fff;
	color:#000;
}
</style>
</head>
<body>
<div id="gallery-box">

  <div class="directory1">
    <div class="event-title">Venue 1</div>
    <div class="city">City</div>
    <div class="date">Date</div>
  </div>
  
  <div class="directory2">
   <div class="event-title">Venue 2</div>
    <div class="city">City</div>
    <div class="date">Date</div>
  </div>
  
  <div class="directory1">
    <div class="event-title">Venue 3</div>
    <div class="city">City</div>
    <div class="date">Date</div>
  </div>
  
  <div class="directory2">
   <div class="event-title">Venue 4</div>
    <div class="city">City</div>
    <div class="date">Date</div>
  </div>
  
  <div class="directory1">
    <div class="event-title">Venue 5</div>
    <div class="city">City</div>
    <div class="date">Date</div>
  </div>
  
  <div class="directory2">
   <div class="event-title">Venue 6</div>
    <div class="city"><a href="wrgtre">Cit</a>y</div>
    <div class="date">Date</div>
  </div>
  
    <div class="directory1">
    <div class="event-title">Venue 7</div>
    <div class="city">City</div>
    <div class="date">Date</div>
  </div>
  
  <div class="directory2">
   <div class="event-title">Venue 8</div>
    <div class="city">City</div>
    <div class="date">Date</div>
  </div>
  
  <div class="directory1">
    <div class="event-title">Venue 9</div>
    <div class="city">City</div>
    <div class="date">Date</div>
  </div>
  
   <div class="directory2">
    <div class="event-title">Venue 10</div>
    <div class="city">City</div>
    <div class="date">Date</div>
  </div>
  
</div>
</body>
</html>

visioncom · 02-10-2012, 03:27 PM

You could always use an image map. Just make the size of your map the size of your div with the appropriate coordinates. I dont forsee any reason for that not to work.

Excavator · 02-10-2012, 04:56 PM

Good morning gribbs100,
An anchor is the easiest way to make that row a link, use spans to form the different classes inside each .directoryX since.

Something like this -

Code:

  <a href="#" class="directory1">
    <span class="event-title">Venue 1</span>
    <span class="city">City</span>
    <span class="date">Date</span>
  </a>

gribbs100 · 02-10-2012, 09:45 PM

Excellent! I appreciate the help. That is perfect!