Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    only half the image works as a link.....??

    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

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

    Code:
     <!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>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Add this to the CSS:
    Code:
    #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.

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah ha!! thanks Glad it's not stupidly complicated

    B


  •  

    Posting Permissions

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