...

View Full Version : only half the image works as a link.....??



blacktears
05-08-2006, 06:41 PM
I have normal thumbnails that will link to an image, however if I have them the right small size they won't link until they get to a certain position in the page(horizontally). I have tried a few things but I have no idea why they won't work. This is my code:

The link in question is


<a href="http://www.rainstormphotography.co.uk"><img src="images/partyimage1.jpg"></a>

It works fine in any other div but the content one.


CSS

body {
margin: 0;
padding: 0;
background: #ECA205 url(images/stars.jpg) top left repeat-x;


}
img {border: none;}
a {text-decoration: none;}
#wrap {
margin: 0 auto;
width: 595px;
background: url(images/container_bg.gif) top left repeat-y;
padding: 0 20px;

}
#header {
position: relative;
height: 159pt;


}
#header h1 {
position: absolute;
top: 5px;
left: -76px;
height: 508px;
width: 298px;
background: url(images/snake.gif) top left no-repeat;
text-indent: -9999px;
margin: 0;


}
#header p {
text-align: right;
margin: 0;
padding: 20px 0;
color: red;
font-size: 10pt;

}
ul {
margin: 15px 0 0 0;
padding: 0;
list-style: none;
float: right;

}
li {float: left;}
li a {
display: block;
height: 27px;
background: top left no-repeat;
text-indent: -9999px;
}
.info {background-image: url(images/info.gif);}
.party {background-image: url(images/party.gif);}
.price {background-image: url(images/price.gif);}
.contact {background-image: url(images/contact.gif);}
.info, .contact {width: 84px;}
.party, .price {width: 84px;}

#content {
clear: both;
background: url(images/content_bg.jpg) top center no-repeat;
border-top: 1px solid #FFF; /* needed to make background to align to absolute top of content div */
padding: 30px 0 0 55px;
height: 330px;

}

#content div {
height: 290px;
width: 475px;
overflow: auto;
font-size: 11pt;
font-family: arial, times new roman;
color: white;

}
#content p {margin: 10px;}

#footer {
margin: 0 auto;
width: 500px;
padding: 0 0px;

}


HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Kiddies Kingdom - Information</title>



<link rel="stylesheet" type="text/css" href="style.css">


<meta name="author"
content="Becka Dawson" />
<meta http-equiv="content-type"
content="text/html; charset=uk-ansi" />


</head>

<body>
<div id="wrap">
<div id="header">
<h1>Kiddie&rsquo;s Kingdom - Information</h1>

<p>
Cross Street Mill // Cross Street<br>
Leek // Staffs // ST 13 6BL<br>
T: (01538 382333)
</p>
<ul id="links">
<li class="info"><a href="info.html">Information</a></li>
<li class="party"><a href="party.html">Party&nbsp;Menu</a></li>

<li class="price"><a href="price.html">Prices</a></li>
<li class="contact"><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<div>
<p>Bring your children for a fun filled visit to Leek's Kiddies Kingdom indoor</p>
<a href="http://www.rainstormphotography.co.uk"><img src="images/partyimage1.jpg"></a>
<p>Perfect for children's parties. A two hour party and a choice of hot or cold party food with a lucky bag for each child to take home afterwards BOOK NOW! We also cater for exclusive children's party bookings - hire the room between 7.00 - 9.00pm - Ask for details.</p>
<p>Whilst the children have fun, you can sit, relax and enjoy a drink or snack from out well stocked cafe.</p>
<p>Children Must be supervised by a parent or guardian at all times, socks must be worn, shoes left at reception. Maximum Height 140 cm</p>
<p>We are currently taking children between the ages of 1-9 years old ONLY.</p>

</div>

</div>
<div id="footer">
<a href="http://www.rainstormphotography.co.uk"><img src="images/rainstorm.gif"></a>

</div>
</div>

</body>
</html>

VIPStephan
05-08-2006, 08:57 PM
Add this to the CSS:


#content {
clear: both;
background: url(images/content_bg.jpg) top center no-repeat;
border-top: 1px solid #FFF; /* needed to make background to align to absolute top of content div */
padding: 30px 0 0 55px;
height: 330px;
position: relative;
z-index: 2;
}

The <h1> that you positioned lies "above" the content (you see this if you put a background color to #header h1) avoiding the link to be clickable, and now the layering is changed so that the content is above.

blacktears
05-09-2006, 08:46 PM
Ah ha!! thanks :D Glad it's not stupidly complicated :)

B:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum