...

View Full Version : How To Prevent Linking Original Position of Relatively-Positioned Element



johnywhy
05-08-2011, 08:13 PM
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?

posted to http://csscreator.com, http://css-tricks.com, http://www.codingforums.com, http://welovecss.com

Scriptet
05-08-2011, 09:07 PM
How about if you use display:block; margin-top:-100px as oppose to relative positioning and negative top

johnywhy
05-08-2011, 09:28 PM
not working for me, and i'm not a fan of weird workarounds anyway, if they can be avoided, but thanks.

AndrewGSW
05-08-2011, 10:07 PM
You need to relatively position the 'a' element and then move the span absolutely over the image.

If you leave the span as relatively positioned then there will be a gap and, because it is contained within the 'a' element, this gap will remain as a link.

[I've given your 'a' tag an id of 'a3' as it isn't a span]


#a3 { position: relative; }
#headline { position: absolute; top: -200px; left: 200px; }
the measurements (top and left) are effectively from the bottom left corner of the image.

<span id="span1"></span><span id="span2"></span>
<span id="span3" >
<a id="a3" href="tours.html"><img src="tours.jpg" />
<span id="headline">
<i>Text Line 1<br>Text Line 2</i>
</span>
</span>

johnywhy
05-08-2011, 10:33 PM
i'm trying to avoid relative positioning, because i don't want to have to 'aim' for the right position, especially if i later switch to a different image.

here's my best so far:

<span style="display:inline-block; width:270px; height:200px; background:url('assets/images/breaking-news.png') no-repeat; vertical-align:bottom;">

<a style="display:inline-block; width:100%; height:100%; text-align:center; padding-top:25%; " href="walkingtours">
Breaking News!
<br><i>More Headline, and more, and more, and more, and more</i>
</a>

</span>

Two problems, the link extends below the span on the page, and secondly i cant get padding to the left and right of the text.

johnywhy
05-08-2011, 10:49 PM
hey, i tried your solution, also good! did not need the 200px values. Better than my solution, which requires knowing the image size.

<span>
<a style="position: relative;" href="tours.html"><img src="assets/images/breaking-news.png" />
<span style="position: absolute; left:0px; text-align:center ">
Breaking News!<br><i>More Headline, and more, and more, and more, and more</i>
</span>
</a>
</span>

just have to get it vertically centered

AndrewGSW
05-08-2011, 11:00 PM
did not need the 200px values
Erm.. how could I have known how big your image is, or where within it you wanted to place the text :p

johnywhy
05-08-2011, 11:03 PM
True, but your code does not require knowing that.

Here's the best yet, but sadly requires knowing height of image to get vertical centering.

<span>
<a style="position: relative; text-decoration: none" href="tours.html">

<img src="assets/images/breaking-news.png" />

<span style="position: absolute; left:0px; padding-top:65px; padding-left:20px; padding-right:20px; text-align:center ">
Breaking News!<br><i>More Headline, and more, and more, and more, and more</i>
</span>

</a>
</span>

AndrewGSW
05-08-2011, 11:08 PM
#a3 { position: relative; display:inline-block; }
#headline { position: absolute; left: 0px; top: 50%; }

johnywhy
05-09-2011, 12:02 AM
great! but if headline text is longer it won't be quite centered anymore, so i picked 40%.

someone suggested display:table-cell in order to use vertical-align:middle, but i cannot get that to work



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum