my page contains three spans, inline:
<span id="span1" /> <span id="span2" /> <span id="span3" />
they are positioned properly on the page.
within span3, i want to contain a link surrounding an image. centered on the image, i want some text:
<a id="span3" href="tours.html"> <img src="tours.jpg" /> <span id="headline"> <i>Text Line 1<br>Text Line 2</i> </span> </a>
to get the text centered on the image, i make it relatively-positioned:
<span id="headline" style=" width: 240px; display: block; position: relative; left: 850px; top: -100px;"> <i>Headline</i> </span>
all good, but problem is that the original inline location of the headline is getting linked, even though the headline has been relatively repositioned.
so, how to eliminate link region in original location of headline?
You're using the wrong
You're using the wrong positioning. Relative positioning must be placed on the containing element, and absolute positioning must be placed on the child element within that you want to position. You should also, in my opinion and others, make the image a background image with a width and height on the containing element to make things cleaner and easier for future modification.
With this in mind, your code should appear as such (using 100px as default values you can change):
<a id="span3" href="tours.html" style="display: block; position: relative; width: 240px; height: 100px; background: url(images/tours.jpg) no-repeat top left;"> <span id="headline" style="position: relative; top: 40px; left: 100px;"> <i>Headline</i> </span> </a>
Not sure if that will fix your problem as I didn't quite understand it but it's a starting point.