Position Span over Anchor??

Hi Basically I want a 100% by 150px DIV clickable.
Inside it is a picture, a title, and some text.
So I have something like the following:

<a href=#"><img .. /> Title and Text</a>

I then set the a to display block, 150px height and 100% width, with some hover effects this all works great.

However I want it so that only the title is inside the anchor tag for SEO reasons. So it looks like this:

<a href="#">The Title</a> /*This is lets say 450px wide and 150px height*/
<span>Pic and Text</span> /*Add Negative Margin Top to make it appear inside the anchor area*/

I then tried to add negative margin to the SPAN so it looked as though it was in the anchor, but if the span pic or text is hovered over it can't be clicked as obviously it isn't the anchor tag but it is hovererd over it but i need the whole over the anchor area to be clickable?

Is it possible?

 

anything thing is possible with coding

 

<a href="#">The Title</a> /* block 150px height */
<a href="#" style="margin-top: -150px">Pic and Text</a>

Code (markup):

 

Thanks zeegal but I was hoping not to have the pic and text inside the anchor, however I still want it to appear over the title anchor and be clickable, so I guess it would need to be kind of see-through but still visible :s
I don't think it's possible, I guess the pic and text would have to be inside the anchor.

 

If I understand correctly, you should be able to achieve that affect by setting the ancor to a class which is in turn set to specific width and height.

Here's an example. Not sure if this'll work since I'm just pulling this from my head, but tweak around this idea.

a.block {
    display: block;
    height: 150px;
    width: 150px;
    }

Code (markup):

 

Then try this:

<a href="#">The Title</a> /* block 150px height */
<span style="margin-top: -150px; cursor: pointer;" onclick="javascript: document.location.href='#';">Pic and Text</span>

Code (markup):