SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV not allowing hyperlinks

    Hi there,

    I'm having an issue within my divs. Every time I try to place a link, the link isn't working. I would like the images (left and right arrows) to serve as links.

    Any help is appreciated! Thank you in advance

    HTML Code:
    <style type="text/css">
    <!--
    body {
    	background-color: #337931;
    }
    #photo_thumbnail {
    	height: 93px;
    	width: 792px;
    	position: absolute;
    	left: 28px;
    	top: 72px;
    }
    #photo_gallery_large {
    	height: 467px;
    	width: 577px;
    	position: absolute;
    	left: 137px;
    	top: 168px;
    }
    -->
    </style>
    <link href="dentist_layout.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    body,td,th {
    	font-family: "Century Gothic", "Trebuchet MS", Arial, sans-serif;
    	font-size: 0.9em;
    	color: #003333;
    }
    a:link {
    	color: #006666;
    	text-decoration: underline;
    }
    a:visited {
    	color: #003333;
    	text-decoration: underline;
    }
    #about_dr {
    	height: 788px;
    	width: 751px;
    	position: absolute;
    	left: 30px;
    	top: 54px;
    	padding-right: 20px;
    	padding-left: 20px;
    }
    #ashley {
    	height: 362px;
    	width: 791px;
    	position: absolute;
    	left: 30px;
    	top: 440px;
    }
    #jodi {
    	height: 372px;
    	width: 791px;
    	position: absolute;
    	left: 30px;
    	top: 802px;
    }
    #shannon {
    	height: 372px;
    	width: 791px;
    	position: absolute;
    	left: 30px;
    	top: 1174px;
    }
    #lindsey {
    	height: 362px;
    	width: 791px;
    	position: absolute;
    	left: 30px;
    	top: 1547px;
    }
    #mariola {
    	height: 372px;
    	width: 791px;
    	position: absolute;
    	left: 30px;
    	top: 1910px;
    }
    #footr {
    	height: 120px;
    	width: 960px;
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    	left: 0px;
    	top: 2650px;
    	font-family: "Century Gothic", "Trebuchet MS", Arial, sans-serif;
    	font-size: 13px;
    	color: #006666;
    }
    a:hover {
    	text-decoration: none;
    }
    a:active {
    	text-decoration: underline;
    }
    .style1 {font-size: 16px}
    -->
    </style>
    </head>
    
    <div id="wrapper_newbie">
      <div id="background_newbie"></div>
      <div id="body_light_grn_newbie2"></div>
      <div align="center"></div>
      <div id="newbie_body">
        <div id="photo_gallery_large">
          <div align="center">
            <p>&nbsp;</p>
            <p class="style1">&nbsp;</p>
          </div>
        </div>
        <div id="photo_thumbnail">
          <div align="center"><a href="gallery2.html" target="_self"><img src="images/gallery_back.jpg" width="59" height="42" alt="back" /><img src="images/L_01_NM_thumb.jpg"  width="108" height="81" hspace="10" border="0" /></a><a href="gallery_NM_02.html"><img src="images/L_02_NM_thumb.jpg" width="60" height="81" border="0" /></a><a href="gallery_NM_03.html"><img src="images/L_03_NM_thumb.jpg" width="60" height="81" hspace="10" border="0" /></a><a href="gallery_NM_04.html"><img src="images/L_04_NM_thumb.jpg" width="60" height="81" border="0" /></a><a href="http://www.facebook.com"><img src="images/gallery_next.jpg" alt="back" width="59" height="42" border="0" />
            
          test</a><a href="http://www.facebook.com"></a></div>
        </div>
        <div id="about_dr"></div>
      <img src="images/photo_gallery_header.gif" width="263" height="33" /></div>
    </div>
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You are using way too much position: absolute on the page, so some elements are covering others. For example, this div

    Code:
    #about_dr {
      height: 788px;
      left: 30px;
      padding-left: 20px;
      padding-right: 20px;
      position: absolute;
      top: 54px;
      width: 751px;
    }
    is sitting over the top of your links, making them unclickable. You have to be careful with position: absolute. It's not really very good for page layout, as elements get removed from the page flow and thus don't see each other and adjust around each other, making layout a nightmare. If you disable the line in red above, the link s will be clickable.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Makes sense - thank you!


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
  •