troubleshooting Question

How can I turn an empty div tag into a link?

Avatar of elliottbenzle
elliottbenzle asked on
CSSHTML
5 Comments1 Solution2048 ViewsLast Modified:
On my page I'm using a div tag with a background as the heading. There is nothing in the Div tag, but eventually there will be. So I can't fill it with an image. Is there a way to make a transparent image/something that will layover part of the div tag and can act as a link. Here is the page:

http://www.glowfishtw.com/robinbenzle/index.asp

I only need the top 3/4 of the header to act as a link, so maybe just a way to make a transparent link? I'm not really sure, so any ideas would be greatly appreciated. Thanks.
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/robinbenzle.asp" -->
<%
Dim rstravelpic
Dim rstravelpic_cmd
Dim rstravelpic_numRows
 
Set rstravelpic_cmd = Server.CreateObject ("ADODB.Command")
rstravelpic_cmd.ActiveConnection = MM_robinbenzle_STRING
rstravelpic_cmd.CommandText = "SELECT * FROM travelpic" 
rstravelpic_cmd.Prepared = true
 
Set rstravelpic = rstravelpic_cmd.Execute
rstravelpic_numRows = 0
%>
<!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>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #999999;
}
.oneColFixCtrHdr #container {
	width: 950px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.oneColFixCtrHdr #header {
	background-color: #DDDDDD;
	background-image: url(images/header.jpg);
	height: 242px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 20px;
}
.food {
	float: left;
	width: 517px;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 0px;
}
.travel {
	float: left;
	width: 231px;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 0px;
}
.travelbg {
	float: left;
	width: 231px;
	padding-top: 0px;
	padding-right: 5px;
	padding-left: 5px;
	background-image: url(images/traveltime.jpg);
	background-repeat: no-repeat;
	margin-top: 10px;
	margin-left: 0px;
}
.garagesale {
	width: 231px;
	margin-top: 20px;
	background-image: url(images/garagesale.jpg);
	background-repeat: no-repeat;
	height: 190px;
	clear: both;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.sponsor {
	float: left;
	width: 162px;
	padding-top: 5px;
	padding-right: 0px;
	padding-left: 0px;
}
.chowtime {
	width: 495px;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: 7px;
	margin-left: 15px;
	margin-top: 10px;
	background-image: url(images/chowtime.jpg);
	background-repeat: no-repeat;
}
.chowtext {
	margin-top: 10px;
	margin-left: 5px;
	font-weight: bold;
	font-size: 20px;
	float: left;
}
.traveltext {
	margin-top: 10px;
	margin-left: 5px;
	font-weight: bold;
	font-size: 20px;
}
.clearer {
clear: both;
height: 1px;
overflow: hidden; }
 
 
.chowsubscribe {
	color: #999999;
	float: left;
	margin-top: 21px;
	margin-left: 10px;
	font-size: 10px;
}
.oneColFixCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
	background: #FFFFFF;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
}
.videodescription {
	width: 440px;
	padding-right: 20px;
	padding-left: 20px;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
}
.oneColFixCtrHdr #footer2 {
	background-color: #FFFFFF;
	height: 50px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	text-align: center;
}
.aboutrobin {
	height: 16px;
	float: left;
	background-color: #EFEFEF;
	margin-top: 20px;
	margin-right: 30px;
	margin-bottom: 5px;
	margin-left: 30px;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}
.aboutrobinright {
	height: 16px;
	float: left;
	background-color: #efefef;
	margin-top: 20px;
	margin-right: 12%;
	margin-bottom: 5px;
	margin-left: 30px;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}
.aboutrobinleft {
	height: 16px;
	float: left;
	background-color: #efefef;
	margin-top: 20px;
	margin-right: 30px;
	margin-bottom: 5px;
	margin-left: 12%;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}
.oneColFixCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.chowtime {
	background-image: url(images/chowtime.jpg);
	background-repeat: no-repeat;
	padding-right: 10px;
	padding-left: 7px;
}
.chowsubscribe a:link {
	color: #999999 !important;
}
.chowsubscribe a:visited {
	color: #CCCCCC !important;
}
.chowvideo {
	width: 480px;
	margin: 0px;
	padding-top: 15px;
}
.travelvideo {
	width: 220px;
	margin: 0px;
	padding-top: 15px;
}
.chowlinks {
	width: 310px;
	margin-right: 0px;
	margin-left: 20px;
	margin-top: 15px;
	font-size: 12px;
	font-weight: bold;
}
.travellinks {
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	font-size: 12px;
	font-weight: bold;
	padding-right: 0px;
}
.break {
	clear: both;
}
.traveltextpadding {
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
}
.travelpadding {
	padding-bottom: 10px;
}
.travelpicpadding {
	padding-top: 10px;
	padding-bottom: 10px;
}
.style4 {
	font-size: 12px;
	font-weight: bold;
}
.style5 {
	font-size: 10px
}
.style6 {width: 440px; padding-right: 20px; padding-left: 20px; font-size: 12px; }
.style8 {
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	font-size: 12px;
}
.style10 {font-size: 10px; color: #333333; }
-->
</style>
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
 
      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
  
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
<body class="oneColFixCtrHdr" onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Adobe Flash Player. Do you want to download it now?');">
 
<div id="container">
  <div id="header">
 
  <!-- end #header --></div>
  <div id="mainContent">
    <div class="food"><img src="images/foodtitle.jpg" width="517" height="40" />
      <div class="chowtime">
        <div class="chowtext">Chow Time</div>
        
        <div class="chowsubscribe">subscribe</div>
        
        
        <div class="break"></div>
        <div class="chowvideo">
          <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','480','height','326','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video/SUMMER&autoPlay=false&autoRewind=true','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //end AC code
          </script>
          <noscript>
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="480" height="326" id="FLVPlayer">
            <param name="movie" value="FLVPlayer_Progressive.swf" />
            <param name="salign" value="lt" />
            <param name="quality" value="high" />
            <param name="scale" value="noscale" />
            <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video/SUMMER&autoPlay=false&autoRewind=true" />
            <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video/SUMMER&autoPlay=false&autoRewind=true" quality="high" scale="noscale" width="480" height="326" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />            
</object>
          </noscript>
</div><br />
<div class="style6">short description of the video.</div>
 
        <div class="chowlinks">
          <ul>
            <li>Print friendly version of this recipe<br />
            </li>
            <li>Recipe video archive<br />
            </li>
            <li><a href="recipearchive.asp">Robin's Recipies</a></li>
            <li><a href="recipearticles.asp">Food Articles</a><br />
            </li>
            <li>Comments and questions?</li>
          </ul>
        </div>
      </div>
    </div>
     <div class="travel">
       <div class="travelpadding"><img src="images/traveltitle.jpg" width="231" height="40" /></div>
       <table width="236" height="581" border="0" bgcolor="#FFFFFF">
         <tr>
           <td width="236" height="166" valign="top" background="images/traveltime.jpg"  style="background-repeat:no-repeat">
           <div align="center">
             <% 
' Moving to random record - Steven Jones' Extension
If Not(rstravelpic.bof and rstravelpic.eof) Then
  ' reset the cursor to the beginning
  If (rstravelpic.CursorType > 0) Then
    rstravelpic.MoveFirst
  Else
    rstravelpic.Requery
  End If
  
  rstravelpic_totalrn = -1
  rstravelpic_totalrn = rstravelpic.RecordCount ' ony works on some recordsets, but much faster
  If (rstravelpic_totalrn = -1) Then ' and if it didn't work, we still have to count the records.
 
    ' count the total records by iterating through the recordset
    rstravelpic_totalrn=0
    While (Not rstravelpic.EOF)
      rstravelpic_totalrn = rstravelpic_totalrn + 1
      rstravelpic.MoveNext
    Wend
 
    ' reset the cursor to the beginning
    If (rstravelpic.CursorType > 0) Then
      rstravelpic.MoveFirst
    Else
      rstravelpic.Requery
    End If
	
  End If
 
' now do final adjustments, and move to the random record  
rstravelpic_totalrn = rstravelpic_totalrn - 1
If rstravelpic_totalrn > 0 Then
Randomize
rstravelpic.Move Int((rstravelpic_totalrn + 1) * Rnd)
End If 
End If
' all done; you should always check for an empty recordset before displaying data
%>
<div class="travelpicpadding"><img src="<%=(rstravelpic.Fields.Item("picture").Value)%>" width="220" /><br />
             </div>
             <span class="style8"><%=(rstravelpic.Fields.Item("textvar").Value)%></span><br />
             </div>
<div class="travellinks">
<ul>
<li class="style4"> 
  Travel Videos</li>
<li class="style4">Travel Articles and Photos</li>
<li><span class="style4">Come with me to Africa<br />
					</span><span class="style5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aug. 29 - Sept. 9</span></li>
</ul>
</div>           </td>
         </tr>
         <tr>
           <td height="212"><div class="garagesale"></div></td>
         </tr>
       </table>
    </div>
     
    <div class="sponsor"><img src="images/sponsortitle.jpg" /></div>
    <!-- end #mainContent --></div>
    
    <div class="clearer"></div>
 
  <div id="footer">
    <span class="style10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyright 2008 by Robin Benzle. All Rights Reserved    </span>
  <!-- end #footer --></div>
   <div id="footer2">
   <div align="center">
   <div class="aboutrobinleft">About Robin Benzle</div>
   <div class="aboutrobin">Subscribe to Weekly Recipe</div>
   <div class="aboutrobin">Advertise on this Site</div>
   <div class="aboutrobinright">Contact Us</div>
   </div>
   </div>
<!-- end #container --></div>
</body>
</html>
<%
rstravelpic.Close()
Set rstravelpic = Nothing
%>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 5 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros