...

View Full Version : 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.



<!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 -

<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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum