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
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;
}
#main{
width:500px;
height: 20px;
background: lightblue;
}
#hidden {
width:300px;
height:20px;
background: lightgrey;
display: none;
}
-->
</style>
<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
<script>
$(document).ready(function(){
$("#carousel2").CloudCarousel(
{
yRadius: 40,
xRadius:405,
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();
});
});
</script>
</head>
<body>
<!-- header -->
<header>
<div class="container">
<h1> <a href="index.html"> </a></h1>
<nav>
<ul>
<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>
</ul>
</nav>
</div>
</header>
<!-- #gallery -->
<section id="gallery">
<div class="container">
<h6>
<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> -->
</div>
</div>
</ul>
</section>
<!-- /#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>
</div>
<div class="main-box">
<div class="container">
<div class="inside">
<div class="wrapper">
<!-- aside -->
<div id="resourceSlides">
</div>
</div>
</div>
</div>
</div>
<footer>
<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> </div>
</div>
</div>
</footer>
</body>
</html>
The following is part of the css style file that contains the div class “my_left_box” and “my_right_box”
div.my_left_box{
float: left;
padding: 20px;
width: 500px;
border: 0px solid gray;
}
div.my_right_box{
float: left;
padding: 20px;
width: 400px;
border: 0px solid gray;
}
I will appreciate any help!
