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 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How To Prevent Linking Original Position of Relatively-Positioned Element

    my page contains three spans, inline:
    Code:
    <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:
    Code:
    <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:
    Code:
    <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
    Last edited by johnywhy; 05-08-2011 at 07:54 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    How about if you use display:block; margin-top:-100px as oppose to relative positioning and negative top

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    not working for me, and i'm not a fan of weird workarounds anyway, if they can be avoided, but thanks.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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]

    Code:
    #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.
    Code:
    <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>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    johnywhy (05-08-2011)

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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.

  • #6
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hey, i tried your solution, also good! did not need the 200px values. Better than my solution, which requires knowing the image size.
    Code:
    <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

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <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>

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    #a3 { position: relative; display:inline-block; }
    #headline { position: absolute; left: 0px; top: 50%; }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

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