Clickable image with a floating div inside it

Hey all

I'm trying to arrange this:

A div with an image inside which acts as a link. The actual image should be larger than the box, centered on the middle of the image (so you don't see the edges).

Inside this, floated to the right (with a margin), another div that itself *isn't* a link, but has a further list of links inside it. To complicate things further, the list of links in the smaller box may vary, and should push down the bottom of the larger box if it gets larger, revealing more of the image as it does so.


-------------------------
¦.image.linkA.fills.box.¦
¦......_______________..¦
¦......¦(white)......¦..¦
¦......¦.linkB.......¦..¦
¦......¦.linkC.......¦..¦
¦......¦.linkD.......¦..¦
¦......¦_____________¦..¦
¦_______________________¦

I've got most of the way there: this all works except that the image is done as a background and isn't a link. Can anyone tell me how to either
a) make the background image work as a link or
b) use a normal image link (ie not background) but float the smaller box over the top of it?

here's what i have so far.

html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
... 
<div class="property-channel">  
 <div class="name"> 
 <a href=..>linkA</a> 
 </div>  
 <div class="thumbnail" style="background-image: url('link-to-a-specific-image.jpg');"> 
 <!-- want this whole div to link to linkA as well --> 
 <ul class="children"> 
  <li class="child"><a href=..>linkB</a></li> 
  <li class="child"><a href=..>linkC</a></li> 
  <li class="child"><a href=..>linkD</a></li>  
 </ul> 
 </div> 
</div>

css:


div.property-channel{ 
 float:left; 
 width: 350px; 
 margin: 5px 5px 5px 5px; 
 border: 1px solid #ddd; 
 padding:0; 
} div.property-channel div.thumbnail{ 
 height:190px; 
 width:100%; 
 background-repeat:no-repeat; 
 background-position:top left;  
} 
div.property-channel ul.children{ 
 margin: 1em; 
 padding:.5em; 
 float:right; 
 width:180px; 
 background: white; 
 border: 2px outset gray; 
}

Thanks! max

Clickable image with a floating div inside it

max williams

blueocto

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week