SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 Code:
    <!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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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> &nbsp; &nbsp; &nbsp; &nbsp;  </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"
    Code:
     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!

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    </div>
    </div>
    Where the FirstName LastName, M.S. is not clickable

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •