DIV not allowing hyperlinks

HTML & CSS
1

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 :slight_smile:



<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

You are using way too much position: absolute on the page, so some elements are covering others. For example, this div

#about_dr {
  height: 788px;
  left: 30px;
  padding-left: 20px;
  padding-right: 20px;
  [COLOR="#FF0000"]position: absolute;
[/COLOR]  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

Makes sense - thank you!