Div and hyperlink issue

Hello I am new to this site and fairly new to using templates to design website. I am trying to add approximately 20 pictures of people along with their name which is a hyperlink to their own individual website. The hyperlinks do not work inside of the div class container. Is there a way to make these hyperlinks work inside the div?

The following is sample code within the html file. I hope I won’t piss anyone off by adding the full code but my problem can be found in the <!-- /#gallery –><div class=“container”> section

<html xmlns="http://www.w3.org/1999/xhtml">
<title>People - HCC Lab People Page</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
  <script type="text/javascript" src="js/cufon-yui.js"></script>
  <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script>
  <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script>
  <script type="text/javascript" src="js/cufon-replace.js"></script>
	<script type="text/javascript" src="js/roundabout.js"></script>
  <script type="text/javascript" src="js/roundabout_shapes.js"></script>
  <script type="text/javascript" src="js/gallery_init.js"></script>
  <script type="text/javascript" src="js/loopedslider.min.js"></script>
  <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- Load the mousewheel JavaScript file -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<style type="text/css">
#resourceSlides div {
    display: none;
    height: 20px;
    background: lightblue;
#hidden {
    background: lightgrey;
    display: none;
 <script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>

			yRadius: 40,
			xPos: 450,
			yPos: 18,
			FPS: 30,
			speed: 0.2,
			mouseWheel: true,
			bringToFront: true,
			autoRotate: 'no'

$(document).ready(function() {
    $('#resourceLinks a').click(function() {
        var i = $('#resourceLinks a').index($(this));
        $("#resourceSlides div").hide();
        $("#resourceSlides div:eq(" + i + ")").show();


  <!-- header -->
    <div class="container">
    	<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></h1>
        	<li><a href="index.html">Home</a></li>
           <li><a href="people.html"class="current">People</a></li>
          <li><a href="research.htm">Research</a></li>

           <li><a href="about.html">About</a></li>
	 <!-- #gallery -->
  <section id="gallery">
  	<div class="container">
  <img src="images/DrBLAH.png" alt="" align="left" ><br><br>  Dr. BLAH blazzah blazzah blah blah.</h6></p>
    <!--	<ul id="myRoundabout" class = "cloudcarousel">
        	<!--<iframe class = "cloudcarousel" seamless="seamless" src="carousel.html" width="850" height="480"></iframe>
			<div id="carousel2" style="position: absolute; left: 10px; top: 60px; width: 850px; height: 480px; z-index: 13;">
			<div id="resourceLinks">
<a href="#"> <img class="cloudcarousel" src="images/electronicVotingIcon.png" alt="Prime III" title="Prime III" width="180" height="200" border="0" /> </a>
 <a href="#"> <img class="cloudcarousel" src="images/hccIconAQ.png" alt="" title="" width="180" height="200" border="0" /> </a>
 <a href="#"> <img class="cloudcarousel" src="images/hccIconCRC.png" alt="" title="" width="180" height="200" border="0" /> </a> 
 <a href="#"> <img class="cloudcarousel" src="images/voicingIcon.png" alt="" title="" width="180" height="200" border="0" /> </a> 
 <a href="#"> <img class="cloudcarousel" src="images/BCIIcon.png" alt="" title="" width="180" height="200" border="0" /> </a> -->
  <!-- /#gallery -->
<div class="container"> 
<div class="my_left_box">
     <img src="images/name.jpg" width="200" height="200" alt=""> <h4>
     <a href="http://www.TheirPersonalWebsite.com/">FirstName LastName, M.S.</a>
     <br> Ph.D. Student

  <div class="main-box">
    <div class="container">
      <div class="inside">
        <div class="wrapper">
        	<!-- aside -->
			<div id="resourceSlides">
    <div class="container">
    	<div class="wrapper">
        <div class="fleft">Copyright -HCC </div>
        <div class="fright"><a href="http://www.humancentredcomputing.com/" target="_blank" rel="nofollow">HCC</a> &nbsp; &nbsp; &nbsp; &nbsp;  </div>

The following is part of the css style file that contains the div class “my_left_box” and “my_right_box”

    float: left;
    padding: 20px;
    width: 500px;
    border: 0px solid gray;

    float: left;
    padding: 20px;
    width: 400px;
    border: 0px solid gray;

I will appreciate any help!

Welcome to Sitepoint, dmoon.

Forgive me if I am stating the obvious. But did you notice that the HREF for the links inside the DIV are set to “#”? That essentially nullifies the hyperlink. Try placing the actual URLs in those HREFs.

BTW… it is a good thing to post the as much code as you can provide code, so don’t worry about ‘pissing’ anyone off for that. :slight_smile:

Thanks for replying. No, the ones you mentioned are fine. I am referring to:

<!-- /#gallery –>
<div class=“container”>
<div class=“my_left_box”>
<img src=“images/name.jpg” width=“200” height=“200” alt=“”> <h4>
<a href=“http://www.TheirPersonalWebsite.com/”>FirstName LastName, M.S.</a>
<br> Ph.D. Student
Where the FirstName LastName, M.S. is not clickable

Again. Cursory glance at this. sorry.

But I notice that you didn’t close the H4 tag. I would take care of that first.

The thing I would look for is any absolutely/relative positioned elements with z-index in that block ( this would include :before/:after generated code )

The reason why I mention this is because if all or part of a transparent element is placed over a link ( via AP/RP or margin ) you would still be able to see the link but the link would not register as a hovers or click ( since you would actually be hovering on the element above the link and not the link itself.